简易的仿照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>
