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

作者:轻舞肥羊 时间:2024-04-16 09:24:09 

本文实例讲述了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程序设计有所帮助。

来源:http://www.yihaomen.com/article/js/298.htm

标签:js,iphone,滑屏解锁
0
投稿

猜你喜欢

  • SQL语句删除2条重复数据一条保留一条

    2024-01-26 12:16:39
  • MYSQL 一个巧用字符函数做数据筛选的题

    2024-01-26 01:39:05
  • Laravel框架路由管理简单示例

    2023-11-14 13:37:26
  • python中heapq堆排算法的实现

    2022-10-13 23:11:40
  • MySQL 客户端不输入用户名和密码直接连接数据库的2个方法

    2024-01-14 05:30:41
  • 解决Vue不能检测数组或对象变动的问题

    2024-04-27 15:59:40
  • Python异常处理知识点总结

    2023-01-04 16:03:36
  • uniapp小程序之配置首页搜索框功能的实现

    2024-04-22 13:03:28
  • HTML编写小经验

    2011-06-14 09:43:14
  • Python利用三层神经网络实现手写数字分类详解

    2023-10-06 19:53:40
  • 打开电脑上的QQ的python代码

    2022-08-18 04:21:28
  • PHP 应用容器化以及部署方法

    2023-11-14 15:45:06
  • plt.subplot()参数及使用介绍

    2022-03-23 09:17:03
  • 分享15个最受欢迎的Python开源框架

    2021-06-22 12:17:08
  • python通过nmap扫描在线设备并尝试AAA登录(实例代码)

    2021-08-06 23:23:42
  • Python + Requests + Unittest接口自动化测试实例分析

    2021-08-08 05:41:47
  • python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解

    2021-12-18 10:27:02
  • Python中ttkbootstrap的介绍与基本使用

    2023-08-23 15:57:01
  • Python基础之字符串常见操作经典实例详解

    2022-08-14 04:40:58
  • Python实现使用dir获取类的方法列表

    2023-01-04 12:18:44
  • asp之家 网络编程 m.aspxhome.com