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


Posted in Javascript onJune 10, 2019

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

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

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

效果图基本如下:

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>yihaomen.com js滑屏解锁</title>
<style type="text/css"> 
#slider_comment{position:relative;width:426px;height:640px;margin:10px auto;}
#lock{width:200px;height:30px;border:1px dashed #ccc;line-height:30px;}
#lock span{position:absolute;width:45px;height:30px;cursor:pointer;background:url(img/arrow.png) no-repeat;}
</style>
<script type="text/javascript"> 
window.onload = function ()
{
  var slider_comment = document.getElementById("slider_comment");
  var oLock = document.getElementById("lock");
  var oBtn = oLock.getElementsByTagName("span")[0];
  var comment=document.getElementById('comment');
  var disX = 0;
  var maxL = oLock.clientWidth - oBtn.offsetWidth;  
  oBtn.onmousedown = function (e)
  {
    var e = e || window.event;
    disX = e.clientX - this.offsetLeft;
    document.onmousemove = function (e)
    {
      var e = e || window.event;
      var l = e.clientX - disX;
      l < 0 && (l = 0);
      l > maxL && (l = maxL);      
      oBtn.style.left = l + "px";      
      oBtn.offsetLeft == maxL && (comment.style.display="block",oLock.innerHTML = "请输入评论内容");
      return false;
    };
    document.onmouseup = function ()
    {
      document.onmousemove = null;
      document.onmouseup = null;
      oBtn.releaseCapture && oBtn.releaseCapture();
      oBtn.offsetLeft > maxL / 2 ?
        startMove(maxL, function ()
        {
          comment.style.display="block";
          oLock.innerHTML = "请输入评论内容";
          oLock.style.display = "block";
        }) :
        startMove(0)
    };
    this.setCapture && this.setCapture();
    return false
  };
  function startMove (iTarget, onEnd)
  {
    clearInterval(oBtn.timer);
    oBtn.timer = setInterval(function ()
    {
      doMove(iTarget, onEnd)
    }, 30)
  }
  function doMove (iTarget, onEnd)
  {
    var iSpeed = (iTarget - oBtn.offsetLeft) / 5;
    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    iTarget == oBtn.offsetLeft ? (clearInterval(oBtn.timer), onEnd && onEnd()) : oBtn.style.left = iSpeed + oBtn.offsetLeft + "px"
  }
};
</script>
</head>
<body>
<div id="slider_comment">
<div id="lock"><span></span></div>
<div id="comment" style="width:500px;height:200px;display:none;">
  <textarea id="comment_text" rows=5 style="width:500px;height:200px;border:1px solid #ccc;"></textarea>
</div>
</div>
</body>
</html>

源码点击此处本站下载

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

Javascript 相关文章推荐
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
JS中substring与substr的用法
Nov 16 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
vue制作toast组件npm包示例代码
Oct 29 Javascript
JavaScript实现简单计时器
Jun 22 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 #jQuery
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 #Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 #Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 #Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 #Javascript
浅谈ECMAScript 中的Array类型
Jun 10 #Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 #Javascript
You might like
PHP 防注入函数(格式化数据)
2011/08/08 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
python encode和decode的妙用
2009/09/02 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
安装Python的教程-Windows
2017/07/22 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
药物学专业学生的自我评价
2013/10/27 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
美德好少年事迹材料
2014/01/19 职场文书
公关活动策划方案
2014/05/25 职场文书
中职生求职信
2014/07/01 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
出国留学英文自荐信
2015/03/25 职场文书
讲座新闻稿
2015/07/18 职场文书
2016年教师新年寄语
2015/08/18 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle