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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
jquery常用的12个小功能
Jul 22 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
jQuery操作css样式
May 15 jQuery
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
基于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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
跟我学Laravel之路由
2014/10/15 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python实现猜拳游戏项目
2020/11/30 Python
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
11月升旗仪式讲话稿
2014/02/15 职场文书
房地产促销活动方案
2014/03/01 职场文书
文化活动实施方案
2014/03/28 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android