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函数分享
Jan 07 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
js cavans实现静态滚动弹幕
May 21 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中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
redux-saga 初识和使用
2018/03/10 Javascript
Python使用剪切板的方法
2017/06/06 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
几款好用的python工具库(小结)
2020/10/20 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
学校联谊活动方案
2014/02/15 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
灵山大佛导游词
2015/02/04 职场文书
违纪学生保证书
2015/02/27 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
焦裕禄观后感
2015/06/03 职场文书
七年级语文教学反思
2016/03/03 职场文书