Description: 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.
To Search:
File list (Check if you may need any files):
通过拖拽分割线展示前后图片对比效果\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
通过拖拽分割线展示前后图片对比效果
Download