jQuery多功能日历插件 带事件记录功能

之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮。今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口,你可以设置事件的描述以及提醒的时间,是一款相对实用的jQuery日历插件。

jquery-calendar-with-event

接下来我们一起来看看实现这款jQuery带事件记录功能的日历插件的实现过程及源码,代码主要由HTML、CSS和jQuery组成。

HTML代码:

<div id="myId" class="jalendar">
        <div class="added-event" data-date="14/12/2017" data-time="Tüm Gün" data-title="WWDC 13 on San Francisco, LA"></div>
        <div class="added-event" data-date="16/12/2017" data-time="20:45" data-title="Tarkan İstanb[......]

阅读全文>>

jQuery热点新闻Tab焦点图插件

之前我们分享过好多基于jQuery的焦点图插件,效果都还很不错。这次要分享的jQuery焦点图插件非常适合展示热点新闻,它可以在图片上方展示文字标题,并且焦点图的切换按钮时tab风格的,图片切换也十分流畅。

jquery-tab-image-slider

在线演示源码下载

jQuery图片下滑切换焦点图插件

这次我们要分享的一款jQuery插件也比较实用,是一款jQuery焦点图插件。焦点图相当普通,一共可以循环播放4张图片,并且每一张图片在切换的时候都是向下滑动的切换效果,并且在向下切换时产生弹性的动画特效,另外,插件是基于jQuery的,各种浏览器的兼容性应该还不错。

jquery-image-dropdown-slider

下面是实现这款jQuery焦点图的过程和代码。

HTML代码:

<div class="slider-wrap col-width">
    <div class="cycleslider-wrap" style="display: block;">
       <div id="slider" class="cycleslider" style="position: relative; width: 970px; height: 350px;">
             <div class="cycle-slider"><a href="http://js.itivy.com/"><img src="./images/1.[......]

阅读全文>>

jQuery动态标签插件 标签可新增和删除

今天要分享一款基于jQuery的标签插件,使用这款插件,我们可以动态增加和删除标签,在写博文的时候,我们为博文打标签就不用逗号或者分号隔开了,当你每新增一个标签时,该插件就会为你检查标签内容输入的正确性,并且在界面上显示输入的标签,删除标签也相当方便。

jquery-label-new-delete

在线演示源码下载

CSS3鼠标悬停图片动画 多种文字动画效果

这是一款基于CSS3的图片鼠标悬停动画,这款CSS3应用的特点是当鼠标移动至图片上方时,在图片上将会出现自定义的动画,可以是文字动画、图标动画等。另外,这款CSS3鼠标悬停图片动画的形式非常丰富,基本可以满足你的需求。

css3-image-mouse-hover

下面我们一起来看看实现这款CSS3鼠标悬停动画的过程和代码,代码主要由HTML和CSS组成。

HTML代码:

<div class="grid">
			<figure class="effect-lily">
				<img src="img/12.jpg" alt="img12"/>
				<figcaption>
					<div>
						<h2>Nice <span>Lily</span></h2>
						<p>Lily likes to play with crayons and pencils</p>
					</div>
					<a href="#"&[......]

阅读全文>>

jQuery可放大预览的图片滑块插件

这是一款基于jQuery的图片滑块焦点图插件,这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的JavaScript功底,可以自己修改代码来实现这一功能。

jquery-preview-image-slider

在线演示源码下载

HTML5截图功能 可拖拽图片

截图在我们平常电脑应用中非常的广泛,包括开发者和一般的使用用户。今天介绍的这款HTML5截图应用可以帮助你在上传头像前截取自己的头像,你只需要拖拽移动图片即可选中要截取的部分,HTML5会自动将选取的图片自动生成一张新的图片来保存,从而完成截图的功能。另外,该HTML5截图应用还支持按住shift键实现图片同比例缩放。

html5-screenshot

下面我们来看看实现这款HTML5截图功能应用的过程和源代码,代码主要由HTML、CSS以及jQuery组成。

HTML代码:

<div class="component">

		<div class="overlay">
			<div class="overlay-inner"></div>
		</div>

		<img class="resize-image" src="img/image.jpg" alt="image for resizing">

		<button class="btn-crop js-crop">截图<img c[......]

阅读全文>>

纯CSS3动画按钮效果 5种漂亮样式

这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码随意改变自己喜欢的颜色样式。

css3-animation-button-5-styles

让我们一起来看看实现这5中样式动画按钮的HTML代码和CSS代码吧。以第一个按钮为例,其他按钮的代码大家可以下载源代码来研究,并不是很难。

HTML代码:

<div class="button01">
      <a href="#">Download</a>
      <p class="top">click to begin</p>
      <p class="bottom">1.2MB .zip</p>
</div>

CSS代码:

.button01 {
  width: 200px;
  margin: 50px auto 20px auto;
}

.button01 a {
  display: bloc[......]

阅读全文>>

14款华丽的最新jQuery焦点图动画插件

jQuery焦点图的种类特别烦多,堪称最为丰富的jQuery插件之一。当然jQuery焦点图在网页应用中使用也相当广泛,比如产品展示和活动展示等。本文分享了目前最新的14款jQuery焦点图动画插件,希望对大家的前端开发有所帮助。

1、jQuery带对比功能的焦点图插件

我们在这里已经分享过很多炫酷的jQuery焦点图插件,大部分焦点图插件都比较实用。今天要分享的这款有几个特点:第一是焦点图带有缩略图预览功能,第二是焦点图中的图片带有和原图进行对比的功能,并且这款jQuery焦点图还支持定时图片切换,非常实用。

jquery-image-silder-compare

在线演示1    在线演示2    源码下载

2、jQuery右侧Tab选项卡的焦点图插件

这是一款基于jQuery的焦点图插件,和之前介绍的jQuery焦点图插件类似,它以淡入淡出的动画方式来切换图片,该焦点图插件的特点是右侧有一排Tab选项卡,点击相应选项卡后即可切换对应的图片,应该说这款jQuery焦点图插件还是非常实用的。

jquery-tab-image-silder

在线演示        源码下载

3、jQuery平板样式的焦点图动画插件

上一款我们介绍的是应用在手机端的[......]

阅读全文>>

jQuery带对比功能的焦点图插件

我们在这里已经分享过很多炫酷的jQuery焦点图插件,大部分焦点图插件都比较实用。今天要分享的这款有几个特点:第一是焦点图带有缩略图预览功能,第二是焦点图中的图片带有和原图进行对比的功能,并且这款jQuery焦点图还支持定时图片切换,非常实用。

jquery-image-silder-compare

在线演示1在线演示2源码下载