文件名称:jquerybeforeafter
- 所属分类:
- JSP源码/Java
- 资源属性:
- [JavaScript] [源码]
- 上传时间:
- 2014-10-12
- 文件大小:
- 268kb
- 下载次数:
- 0次
- 提 供 者:
- npu***
- 相关连接:
- 无
- 下载说明:
- 别用迅雷下载,失败请重下,重下不扣分!
介绍说明--下载内容均来自于网络,请自行研究使用
jquery与HTML5实现拖动图片变换效果,拖动中间的分隔线,可看到两种截然不同的效果,一边是清淅的图像,一边是模糊的图片,当然是调用了两张分别处理过的图片,综合运用jquery.beforeafter-1.3.js,jquery-ui-1.8.13.custom.min.js,jquery-1.6.1.min.js等jquery插件来实现,在图片中你可看到模特的脸,左边是不清淅的,右边则是高清的,你可通过中间的分隔条来向左或向右拖动查看。
因为用了HTML5技术,所以测试时候IE8无效果,请使用火狐或Opera、Chrome等网页浏览器。-jquery and HTML5 drag the picture transformed to achieve the effect, drag the divider in the middle, you can see two very different effect, while the image is clear mission, while the blurred picture, of course, is to call the two were treated pictures, integrated use jquery.beforeafter-1.3.js, jquery-ui-1.8.13.custom.min.js, jquery-1.6.1.min.js and other jquery plugins to achieve, in the picture you can see the model s face, the left is not clear mission, the right is the high-definition, you can drag the view to the left or right through the middle of the divider.
Because use of the HTML5 technology, so the test when IE8 no results, use Firefox or Opera, Chrome and other web browsers.
因为用了HTML5技术,所以测试时候IE8无效果,请使用火狐或Opera、Chrome等网页浏览器。-jquery and HTML5 drag the picture transformed to achieve the effect, drag the divider in the middle, you can see two very different effect, while the image is clear mission, while the blurred picture, of course, is to call the two were treated pictures, integrated use jquery.beforeafter-1.3.js, jquery-ui-1.8.13.custom.min.js, jquery-1.6.1.min.js and other jquery plugins to achieve, in the picture you can see the model s face, the left is not clear mission, the right is the high-definition, you can drag the view to the left or right through the middle of the divider.
Because use of the HTML5 technology, so the test when IE8 no results, use Firefox or Opera, Chrome and other web browsers.
(系统自动生成,下载前可以参看下载内容)
下载文件列表
通过拖拽分割线展示前后图片对比效果\blonde1_after.jpg
..................................\blonde1_before.jpg
..................................\conan-after.jpg
..................................\conan-before.jpg
..................................\index.html
..................................\js\handle.gif
..................................\..\jquery-1.6.1.min.js
..................................\..\jquery-ui-1.8.13.custom.min.js
..................................\..\jquery.beforeafter-1.3.js
..................................\..\jquery.beforeafter-1.3.min.js
..................................\..\lt-small.png
..................................\..\rt-small.png
..................................\Thumbs.db
..................................\js
通过拖拽分割线展示前后图片对比效果