简易的仿照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{ 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{ 80px; margin: 0px auto; height: 20px; line-height: 20px; position: relative; }
#div1 , #div2{ position:absolute; left:0; top:0;}
#div2{ color:#f2f2f2; 15px; height:20px; overflow:hidden;}
#div2 span{ position:absolute; left:0; top:0; 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>