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 Archive Network 集合
May 12 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
劣质的PHP代码简化
2010/02/08 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
DOM 基本方法
2009/07/18 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
小程序实现录音功能
2020/09/22 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
酒店开业庆典策划方案
2014/05/28 职场文书
小学捐书活动总结
2014/07/05 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
庆祝国庆节标语
2014/10/09 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
2015年党性分析材料
2014/12/19 职场文书
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js