JS realizes the function example of iPhone like webpage sliding screen unlocking [Download with source code]


The example of this paper describes how JS can realize the function of page slide screen unlocking similar to iPhone. To share with you for your reference, as follows:

The emergence of iPhone breaks people’s user experience, which extends to web design. Recently, I saw a lot of blog comments are implemented in the way of iPhone slide unlocking. You can’t comment or do anything else until you swipe and unlock. In fact, the implementation of this function is not troublesome. The key is to have a good artist, make a good slide picture, and then JavaScript can be completed with CSS. Here I also simply implemented one. The basic functions are as follows

1. Hide the comment box when opening the page. You can make it in the form of disable. You can modify it after downloading the source code.
2. Slide the unlocking picture and display the comment box. You can make the textarea field enable.
3. Using native JavaScript, compatible with ie, Firefox, chrome, safari

The rendering is basically as follows:

You can change part of the source code test and add the logic you want.

The source code is pasted below. You can also download it at the end of the article:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title > yihaomen.com JS slide screen unlocking < / 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;}
<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", onlock. InnerHTML = "please enter comment content");
      return false;
    document.onmouseup = function ()
      document.onmousemove = null;
      document.onmouseup = null;
      oBtn.releaseCapture && oBtn.releaseCapture();
      oBtn.offsetLeft > maxL / 2 ?
        startMove(maxL, function ()
          Olock.innerhtml = "please enter comments";
          oLock.style.display = "block";
        }) :
    this.setCapture && this.setCapture();
    return false
  function startMove (iTarget, onEnd)
    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"
<div style="width:500px;height:200px;display:none;">
  <textarea rows=5 style="width:500px;height:200px;border:1px solid #ccc;"></textarea>

Source code click hereDownload this website

For more information about jQuery, please refer to the following topics: jQuery page element operation skill summary, jQuery common event usage and skill summary, jQuery common plug-ins and usage summary, jQuery extension skill summary and jQuery selector Usage Summary

I hope this article will be helpful to jQuery programming.

Recommended Today

Vs + QT mixed programming (C / C + +) — 1 introduction application, dynamic calculator

brief introduction For novice users of the interface, to play QT, they still need more practice. For the convenience of learning, this column will be updated in later learning.                     qtThe files included in the generated project are as follows: qt.uiIs the file where the interface is located qt.hHeader file qt.cppImplementing files for functions main.cppMain function […]