twitter facebook qq sina-weibo

经典案例The classic case.

jQuery.eraser – jQuery橡皮擦插件

jQuery.eraser 的原理其实是有灰色、彩色两张图片(都需要自己事前准备),将灰色的图片装载于一个 canvas 中,然后和彩色的图片用 CSS 定位在同一个位置,并设置 z-index 使 canvas 位于彩色图片之上。当按住鼠标并在 canvas 上来回移动时,就出现了类似橡皮擦擦出的效果。

分享类型:jQuery插件

by http://www.dowebok.com/
AutoScroll.js – jQuery页面自动滚动插件

AutoScroll.js 是一个类似的 jQuery 插件,当鼠标移动到浏览器可视区域上端或下端时,页面就能自动滚动。它还可以设置鼠标移动到离可视区域多少范围开始自动,以及滚动间隔、滚动速度、加速度等等。

分享类型:jQuery插件

by http://www.dowebok.com/
multiscroll.js – jQuery左右垂直反向滚动插件

也许你已经知道 fullpage.js 是一个非常优秀插件,很多优秀的公司都在使用它,比如猪八戒、网易等等。今天我们再介绍一款该插件作者开发的另一款插件——multiscroll.js。multiscroll.js 和 fullpage.js 有点类似,也是页面全屏滚动,只不过 fullpage.js 是整屏滚动,而 multiscroll.js 是分成左右两个面板,垂直反向滚动合在一起。

分享类型:jQuery插件

by http://www.dowebok.com/
One-Page-Nav – jQuery导航插件

电商网站的分类比较明确,比如1楼是手机通讯产品,2楼是家用电器,3楼是服装鞋包等等,旁边还会有一个固定的楼层导航,这个导航列出了所有的楼层,同时还会高亮你正在浏览的楼层,点击其他楼层按钮,又会滚动到其他楼层。这样的导航可以增加用户体验,让购物更加方便快捷。

分享类型:jQuery插件

by http://www.dowebok.com/
fullPage.js制作网易邮箱大师页面

近期网易又推出了移动版邮箱客户端——邮箱大师(查看),介绍页面虽然和 6.0 的类似,但还是有较大的不同:邮箱大师使用了 flash,并且滚动后 flash 会重新播放,比较特别。

分享类型:fullPage.js

by http://www.dowebok.com/
onepage-scroll – jQuery单页/全屏滚动插件

单页/全屏滚动页面越来越常见了,它多用于产品介绍、招聘等内容较少的简单页面。针对这种效果也出现了不少 jQuery 插件,如之间介绍的 fullPage.js 和 Scrollify,今天再介绍一款 jQuery 单页/全屏滚动插件——onepage-scroll, 还算小巧,min 版本仅 9kb。

分享类型:jQuery插件

by http://www.dowebok.com/
fullPage.js制作网易邮箱6.0介绍页面

页面采用了时下非常流行的“全屏”效果,文字、图片再加上 CSS3 动画,让用户非常直观、清晰的了解6.0版本的功能及特色,真是高端大气上档次。

分享类型:fullPage.js

by http://www.dowebok.com/
skippr – 更轻更快的jQuery幻灯片插件

skippr 是一个基于 jQuery 的幻灯片插件,官方的口号是更轻、更快。它具有以下功能、特点:支持左右滑动、淡入淡出两种切换方式,支持左右箭头导航,支持键盘方向键控制,支持自动播放,支持响应式,支持日志。

分享类型:jQuery插件

by http://www.dowebok.com/
SlipHover – 创建一个动画遮罩层显示标题或描述

SlipHover 是一个基于 jQuery 的插件,它能够感知鼠标移动方向,并在相应的方向(或反方向)以动画的方式显示出一个遮罩层,用来显示标题或描述,应用到幻灯片或相册中是个不错的选择。SlipHover 还支持自定义遮罩高度、动画时间、字体颜色、背景颜色、文字排版等等。合理的搭配,相信能让你的幻灯片或相册更加的上档次。

分享类型:jQuery插件

by http://www.dowebok.com/
Scrollify – jQuery全屏滚动插件

和 fullPage.js 一样,Scrollify 也是一款基于 jQuery 的全屏滚动插件。跟 fullPage.js 相比,Scrollify 更加小巧,压缩后不足 4KB。但功能上不如 fullPage.js 强大,对移动设备的支持也不如 fullPage.js。不过对于一般的情况,Scrollify 是完全可以胜任的,它支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数以及 fullPage.js 没有的局部滚动。

分享类型:jQuery插件

by http://www.dowebok.com/
baguetteBox.js – 纯JS lightbox库

baguetteBox.js 是一个简单简单、易用的 JavaScript lightbox库它具有以下特点:纯 JavaScript 实现,无需依赖其他库,支持触摸屏设备手势操作,支持显示标题(说明),支持响应式图像,支持CSS3过渡,使用 SVG 按钮,没有多余的文件下载,启用 gzip 压缩后仅 2KB

分享类型:baguetteBox.js

by http://www.dowebok.com/
scrollReveal.js – 页面滚动显示动画JS

和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件。

分享类型:jQuery插件

by http://www.dowebok.com/
WOW.js – 让页面滚动更有趣

有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。

分享类型:jQuery插件

by http://www.dowebok.com/
jQuery计时器插件TimeCircles

TimeCircles 是一个 jQuery 时间类插件,它能够制作出一个漂亮环的形时间,可用于计时或倒计时。虽然 TimeCircles 默认的样式已经很漂亮了,但它还提供了各种参数来自定义,你可以很方便的设置包括环形的大小、进度条的大小、环形的颜色、进度条的颜色、多少刷新以及控制暂停和开始。

分享类型:jQuery插件

by http://www.dowebok.com/
用fullPage.js制作百度百科史记2013效果

这个专题采用了全屏制作,每屏的热词都以从四面飞往屏幕中间,效果非常不错。fullPage.js 提供丰富的回调函数,让我们能都在各个阶段进行控制,制作这个专题的中的动画效果就需要用到这些回调函数。

分享类型:fullPage.js

by http://www.dowebok.com/
jQuery全屏滚动插件fullPage.js

如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面。

分享类型:jQuery插件

by http://www.dowebok.com/
jQuery Lightbox效果插件Boxer

Boxer 是一款基于 jQuery 的 Lightbox 效果插件,可用于显示图片、视频、iframe和其他内容,和其他Lightbox 效果插件一样,Boxer 在显示组图的时候,有左右箭头控制。Boxer 还能自动检测设备是否为移动设备,针对移动设备显示更适合的样式和更友好的触摸控制。

分享类型:jQuery插件

by http://www.dowebok.com/
jQuery图片滑动对比插件twentytwenty

twentytwenty 和 Covering-Bad 一样,也是一款滑动对比插件,它也支持水平方向和垂直方向、支持设置前后对比区域大小。twentytwenty 和 Covering-Bad 的实现原理类似,也是两张图片叠在一起,不同的是 Covering-Bad 是改变宽度或高度,而 twentytwenty 是使用 CSS clip:rect 进行裁切。

分享类型:jQuery插件

by http://www.dowebok.com/
jQuery覆盖对比插件Covering-Bad

Covering-Bad 是一个基于 jQuery 的插件,它能够创建一个可以拉动大小的元素,覆盖在原有的元素上面,从而进行更好的对比。2013年3月11日,日本东海岸发生9.0级大地震时腾讯的专题页面做了一个类似的效果。

分享类型:jQuery插件

by http://www.dowebok.com/
强大实用的jQuery幻灯片插件Owl Carousel

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,Owl Carousel 提供了众多的参数、回调函数及自定义事件(具体请往下浏览),所以它几乎可以满足你的所有要求。浏览器兼容:兼容所有浏览器,包括 IE6、IE7。

分享类型:jQuery插件

by http://www.dowebok.com/
hotopile JS – jQuery照片堆叠效果插件

hotopile JS 是模拟照片散布堆叠在一起的 jQuery 图片插件,它能够很的制作照片墙效果。点击缩略图,照片会弹出放大,左右的箭头可以查看“上一张”、“下一张”,再次点击会返回。缩略图可以拖动,所以即使被叠在非常后面的照片也能够轻松的找到。

分享类型:jQuery插件

by http://www.dowebok.com/
jQuery环形弹出分享按钮

jQuery环形弹出分享按钮,这是一款基于jQuery和CSS3的分享按钮插件,分享按钮有两种模式,第一种点击分享时展开环形的分享按钮,第二种则是直线展开,两种方式的分享按钮均有弹出的动画特效,是一款非常酷的jQuery分享按钮插件。

分享类型:js脚本代码

by http://js.itivy.com/
jQ无限极手风琴图片展示

jQuery无限极手风琴图片展示,这是一款基于jQuery的图片手风琴插件,我们可以定义无限张图片,点击图片的侧边,即可以展开大图,手风琴效果还不错。

分享类型:js脚本代码

by http://js.itivy.com/
jQ右侧带缩略图焦点图插件

jQuery右侧带缩略图焦点图插件,这是一款功能强大的jQuery焦点图插件,该jQuery焦点图的特点是右侧可以展开一行缩略图和描述,点击相应选项即可播放相应的图片,该jQuery焦点图的扩展性也很强。

分享类型:js脚本代码

by http://js.itivy.com/
CSS3实现动画边框菜单

CSS3实现动画边框菜单,这是一款基于CSS3的个性化菜单,该CSS3动画菜单一共有6组不同的弹出菜单形式,有从侧边展开的菜单,也有从量变展开的菜单。

分享类型:css3代码

by http://js.itivy.com/
jQ/CSS3左右拉伸动画菜单

Query/CSS3左右拉伸动画菜单,这款菜单设计非常独特,当普通情况下,菜单只显示菜单项的LOGO图标,当鼠标滑过菜单项时,菜单项就向左右拉伸展开,该菜单基于jQuery。

分享类型:js脚本代码

by http://js.itivy.com/
没有更多内容了╮(╯▽╰)╭