js实现类似苹果手机的网页滑屏解锁功能示例【附源码下载】

本文实例讲述了射流研究…实现类似苹果手机的网页滑屏解锁功能。分享给大家供大家参考，具体如下：

苹果手机的出现，打破了人们的用户体验，这一用户体验也延伸到了网页设计上。最近看到很多博客的评论都用类似苹果手机滑动解锁的方式实现。只有滑动解锁之后才能评论，或者做其他的事情。这个功能的实现，其实并不麻烦，关键是要有好的美工，做出好的滑动图片，然后爪哇岛描述语言配合半铸钢钢性铸铁(铸造半钢)就可以完成，我在这里也简单实现了一个，基本功能如下

1.打开页面时隐藏评论框，你可以做成使残废形式，下载源码后可以修改。2.滑动解锁图片，显示评论框，你可以做成让文本区域字段使能够方式。3.采用原生爪哇岛描述语言实现，兼容即，火狐，chrome，safari .

效果图基本如下：

你可以改动部分源代码测试，加入你自己想要的逻辑。

源代码贴在下面，你也可以在文章的最后下载：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title yihaomen。com js滑屏解锁/title style type=' text/CSS ' # slider _ comment { position : relative；宽度宽度：426像素高度：640 pxmargin:10px汽车；} # lock { width:200px高度：30 pxborder:1px虚线# ccc线高：30 px} #锁定跨度{位置：绝对值；宽度：45 px高度：30 px光标：指针指针；背景： URL(img/箭头。巴布亚新几内亚)无重复；}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var slider _ comment=document。getelementbyid(' slider _ comment ')；var oLock=文档。getelementbyid(' lock ')；var oBtn=olock。getelementsbytagname(' span ')[0]；var注释=文档。getelementbyid(' comment ')；var DIsX=0；var MaxL=olock。客户端宽度-obtn。用.抵消；奥宾。onmousedown=function(e){ var e=e | | window。事件；disX=e . client x-这个。offsetleft文件。onmousemove=function(e){ var e=e | | window。事件；var l=e . ClientX-DIsX；l 0(l=0)；l MaxL(l=MaxL)；奥宾。风格。left=l ' px奥宾。offsetleft==MaxL(注释。风格。display=' block '，oLock.innerHTML='请输入评论内容');返回false }；文件。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=nullobn。释放捕获obn。释放捕获()；oBtn.offsetLeft maxL/2？startMove(maxL，function(){ comment。风格。display=' block' oLock.innerHTML='请输入评论内容；奥洛克。风格。display=' block}): startMove(0)}；这个。设置捕获这个。setcapture()；返回false }；函数startMove (iTarget，OnEnD){ clearInterval(obtn。计时器)；奥宾。timer=setInterval(function(){ doMove(itar get，onEnd) }，30) } function doMove (iTarget，onEnd){ var iSpeed=(itar get-obtn)。offset left)/5；iSpeed=iSpeed 0？数学天花板：数学地板；iTarget==oBtn.offsetLeft？(clearInterval(oBtn.timer)，onEnd onEnd()): obtn。风格。left=iSpeed obtn。offsetleft ' px ' } }/script/headdydiv id=' slider _ comment ' div id=' lock ' span/span/div id=' comment ' style=' width :500 px；高度：200 pxdisplay : none ' text area id=' comment _ text ' row=5 style=' width :500 px；高度：200 pxborder:1px实心# CCC '/text area/div/div/body/html源码点击此处本站下载。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery页面元素操作技巧汇总》 、 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。