网页版Lock手式解锁js特效

1、新建html文档。

3、书写hmtl代码。<div id="wrapper"><div id="slide"> <h2> <strong id="slider"></strong> <span>滑动解除锁定</span> </h2></div></div>

5、书写并添加js代码。<script src="jquery-1.4.2.min.js"></script><script src="jquery-ui.min.js"></script><script>$(function() { $("#slider").draggable({ axis: 'x', containment: 'parent', drag: function(event, ui) { if (ui.position.left > 550) { $("#slide").fadeOut(); } else { } }, stop: function(event, ui) { if (ui.position.left < 551) { $(this).ani mate({ left: 0 }) } } });});</script>

7、查看效果。