当前位置：Gxlcms > JavaScript > js实现类似iphone的网页滑屏解锁功能示例【附源码下载】

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

时间：2021-07-01 10:21:17 帮助过：6人阅读

本文实例讲述了js实现类似iphone的网页滑屏解锁功能。分享给大家供大家参考，具体如下：

iphone 的出现,打破了人们的用户体验，这一用户体验也延伸到了网页设计上。最近看到很多blog的评论都用类似iphone滑动解锁的方式实现。只有滑动解锁之后才能评论，或者做其他的事情。这个功能的实现，其实并不麻烦，关键是要有好的美工，做出好的滑动图片,然后javascript配合CSS就可以完成,我在这里也简单实现了一个，基本功能如下

1. 打开页面时隐藏评论框，你可以做成disable形式，下载源码后可以修改。
2. 滑动解锁图片，显示评论框，你可以做成让textarea字段enable方式。
3. 采用原生javascript实现，兼容ie,firefox,chrome,safari.

效果图基本如下：

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>yihaomen.com js滑屏解锁</title>
  6. <style type="text/css"> 
  7. #slider_comment{position:relative;width:426px;height:640px;margin:10px auto;}
  8. #lock{width:200px;height:30px;border:1px dashed #ccc;line-height:30px;}
  9. #lock span{position:absolute;width:45px;height:30px;cursor:pointer;background:url(img/arrow.png) no-repeat;}
  10. </style>
  11. <script type="text/javascript"> 
  12. window.onload = function ()
  13. {
  14.   var slider_comment = document.getElementById("slider_comment");
  15.   var oLock = document.getElementById("lock");
  16.   var oBtn = oLock.getElementsByTagName("span")[0];
  17.   var comment=document.getElementById('comment');
  18.   var disX = 0;
  19.   var maxL = oLock.clientWidth - oBtn.offsetWidth;  
  20.   oBtn.onmousedown = function (e)
  21.   {
  22.     var e = e || window.event;
  23.     disX = e.clientX - this.offsetLeft;
  24.     document.onmousemove = function (e)
  25.     {
  26.       var e = e || window.event;
  27.       var l = e.clientX - disX;
  28.       l < 0 && (l = 0);
  29.       l > maxL && (l = maxL);      
  30.       oBtn.style.left = l + "px";      
  31.       oBtn.offsetLeft == maxL && (comment.style.display="block",oLock.innerHTML = "请输入评论内容");
  32.       return false;
  33.     };
  34.     document.onmouseup = function ()
  35.     {
  36.       document.onmousemove = null;
  37.       document.onmouseup = null;
  38.       oBtn.releaseCapture && oBtn.releaseCapture();
  39.       oBtn.offsetLeft > maxL / 2 ?
  40.         startMove(maxL, function ()
  41.         {
  42.           comment.style.display="block";
  43.           oLock.innerHTML = "请输入评论内容";
  44.           oLock.style.display = "block";
  45.         }) :
  46.         startMove(0)
  47.     };
  48.     this.setCapture && this.setCapture();
  49.     return false
  50.   };
  51.   function startMove (iTarget, onEnd)
  52.   {
  53.     clearInterval(oBtn.timer);
  54.     oBtn.timer = setInterval(function ()
  55.     {
  56.       doMove(iTarget, onEnd)
  57.     }, 30)
  58.   }
  59.   function doMove (iTarget, onEnd)
  60.   {
  61.     var iSpeed = (iTarget - oBtn.offsetLeft) / 5;
  62.     iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  63.     iTarget == oBtn.offsetLeft ? (clearInterval(oBtn.timer), onEnd && onEnd()) : oBtn.style.left = iSpeed + oBtn.offsetLeft + "px"
  64.   }
  65. };
  66. </script>
  67. </head>
  68. <body>
  69. <div id="slider_comment">
  70. <div id="lock"><span></span></div>
  71. <div id="comment" style="width:500px;height:200px;display:none;">
  72.   <textarea id="comment_text" rows=5 style="width:500px;height:200px;border:1px solid #ccc;"></textarea>
  73. </div>
  74. </div>
  75. </body>
  76. </html>

源码点击此处本站下载。

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

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！