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 相关文章推荐
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
Element实现动态表格的示例代码
Aug 02 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
vue中注册自定义的全局js方法
2019/11/15 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
python3实现弹弹球小游戏
2019/11/25 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
财务人员个人自荐信范文
2013/09/26 职场文书
租房协议书
2014/04/10 职场文书
物流管理专业求职信
2014/05/29 职场文书
安全先进班组材料
2014/12/26 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
工作表现证明
2015/06/15 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android