jquery仿iphone向右滑动解锁效果

新建html文档。

准备好需要用到的图标。

书写hmtl代码。

书写css代码。body { background-image: url(../images/iphone-bg.png); background-repeat: no-repeat; background-color: #25262b; padding: 0; margin: 0; }a { outline: none; }p { padding: 0; margin: 0; }img { border: 0; }#iphone-scrollcontainer { height: 461px; width: 320px; position: absolute; top: 140px; left: 40px; background-color: #000000; }#iphone-inside { overflow: hidden; height: 100%; width: 100%; background-image: url(../images/ku.png); }#unlock-top { position: relative; height: 95px; background-image: url(../images/lock-top.png); }#unlock-spacer { height: 272px; }#unlock-bottom { position: relative; height: 94px; background-image: url(../images/lock-bottom.png); }#slide-to-unlock { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 94px; background-image: url(../images/slide-to-unlock.gif); }#unlock-slider-wrapper { padding-left: 22px; padding-top: 23px; }#unlock-slider { width: 277px; height: 50px; }#unlock-handle { position: absolute; z-index: 10; height: 50px; width: 72px; top: 0px; left: 0px; background-image: url(../images/lock-slider.png); }.time { text-align: center; color: #FFFFFF; font-family: Georgia, Times, serif; font-size: 45px; padding: 6px 0; }.date { text-align: center; color: #FFFFFF; font-family: Georgia, Times, serif; font-size: 12px; }.ui-slider { position: relative; background-repeat: no-repeat; background-position: center center; }

书写并添加js代码。

代码整体结构。

查看效果。