移动端 iphone锁屏文字效果

简易的仿照iphone 效果笔记备份
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"   content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"  />

<title>iphone 文字效果</title>
<style>
*{ margin:0; padding:0;}
html,body,.wrap{width: 100%; height: 100%; overflow: hidden;}
.wrap{ background: #666 url(http://127.0.0.1:8020/try/loveImg/TaylorSwift3.jpg) no-repeat center top; -webkit-background-size: 100%;background-size: 100%; }
.slider_text{ width:80px; margin: 0px auto; height: 20px; line-height: 20px;  position: relative; }
#div1 , #div2{ position:absolute; left:0; top:0;}
#div2{ color:#f2f2f2; width:15px; height:20px; overflow:hidden;}
#div2 span{ position:absolute; left:0; top:0; width:auto; height: 20px;;}
</style>

</head>

<body>
	  
	<div class="wrap">
	http://www.cnblogs.com/surfaces/
	
	<div class="slider_text" style="margin-top: 400px;">
    <div id="div1"><span>滑动解锁></span></div>
    <div id="div2"><span>滑动解锁></span></div>
    </div>
    
    </div>
 <script>

window.onload = function(){
	var oDiv1 = document.getElementById(\'div1\');
    var oDiv2 = document.getElementById(\'div2\');
	var oSpan2 = oDiv2.getElementsByTagName(\'span\')[0];

	function getStyle(obj, name){
	if(obj.currentStyle){
		return obj.currentStyle[name];
	}else{
		return getComputedStyle(obj, false)[name];
	}
  }
	
	setInterval(function(){
		  var moveLeft=parseInt(getStyle(oDiv2,\'left\'));
		  var maxWidth=oDiv1.offsetWidth;
		  console.log(maxWidth)
		if(moveLeft>maxWidth){
			oDiv2.style.left = 0 + \'px\';
		    oSpan2.style.left = 0 + \'px\';
		}else{
		   oDiv2.style.left = oDiv2.offsetLeft + 1 + \'px\';
		   oSpan2.style.left = -oDiv2.offsetLeft + \'px\';
		}
	},30);
	
};

</script>
</body>
</html>