本文实例讲述了js实现类似iphone的网页滑屏解锁功能。分享给大家供大家参考,具体如下:
iphone的出现,打破了人们的用户体验,这一用户体验也延伸到了网页设计上。最近看到很多博客的评论都用类似iphone滑动解锁的方式实现。只有滑动解锁之后才能评论,或者做其他的事情。这个功能的实现,其实并不麻烦,关键是要有好的美工,做出好的滑动图片,然后javascript配合CSS就可以完成,我在这里也简单实现了一个,基本功能如下
1。打开页面时隐藏评论框,你可以做成禁用形式,下载源码后可以修改。
2. 滑动解锁图片,显示评论框,你可以做成让textarea字段使方式。
3.采用原生javascript实现,兼容ie, firefox、chrome, safari。
效果图基本如下:
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”的在
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> yihaomen.com js滑屏解锁& lt;/title>
& lt;风格类型=" text/css "比;
# slider_comment{位置:相对;宽度:426 px;高度:640 px;保证金:10 px汽车;}
#锁{宽度:200 px;高度:30 px;边界:1 px冲# ccc;行高:30 px;}
#锁跨度{位置:绝对的,宽度:45 px;高度:30 px;游标:指针;背景:url (img/arrow.png)不再重演;}
& lt;/style>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function ()
{
var slider_comment=. getelementbyid (“slider_comment”);
var oLock=. getelementbyid(“锁”);
var oBtn=oLock.getElementsByTagName(“跨度”)[0];
var评论=. getelementbyid(“评论”);
var disX=0;
var maxL=oLock。clientWidth - oBtn.offsetWidth;
oBtn。onmousedown=function (e)
{
var e=e | | window.event;
disX=e。clientX - this.offsetLeft;
文档。onmousemove=function (e)
{
var e=e | | window.event;
var l=e。clientX - disX;
l & lt;0,,(l=0);
l在;maxL,,(l=maxL);
oBtn.style。左=l +“px”;
oBtn。offsetLeft==maxL,,(comment.style.display="块",oLock。innerHTML="请输入评论内容”);
返回错误;
};
文档。onmouseup=function ()
{
文档。onmousemove=零;
文档。onmouseup=零;
oBtn。releaseCapture,,oBtn.releaseCapture ();
oBtn。offsetLeft祝辞maxL/2 & # 63;
startMove (maxL、功能()
{
comment.style.display=翱椤?
oLock。innerHTML="请输入评论内容”;
oLock.style。显示=翱椤?
}):
startMove (0)
};
这一点。setCapture,,this.setCapture ();
返回假
};
函数startMove (iTarget比;
& lt; div id="锁"祝辞& lt; span> & lt;/span> & lt;/div>
& lt; div id="评论"比;
& lt; textarea id=" comment_text "行=5祝辞& lt;/textarea>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
之前
源码点击此处<强> 。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》,《jQuery常用插件及用法总结》,《jQuery扩展技巧总结》及《jQuery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
