今天前端哥分享的的是利用jquery做一个文字上下如百叶窗滚动的特效，代码也非常的简单，即使是新手也能看懂并引入到实际项目开发中
首先看效果图：
必须引入jquery:
<script src="https://www.qianduange.cn/templets/default/js/jquery.min.js"></script>
主要的css样式表：
li { list-style: none; }#ul1, #ul2 { width: 300px; height: auto; float: left; border-top: 1px solid #000; margin: 20px; }li { width: 100%; height: 30px; overflow: hidden; position: relative; border-bottom: 1px dashed #333; line-height: 30px; }li div { position: absolute; top: -30px; left: 0; }li div p { height: 30px; }
对应的html元素：
<ul id="ul1"> <li> <div> <p>前端哥1111111</p> <p>前端哥222222</p> </div> </li> <li> <div> <p>前端哥33333</p> <p>前端哥44444444444444</p> </div> </li> <li> <div> <p>前端哥55555555555</p> <p>6前端哥6666666666</p> </div> </li> <li> <div> <p>前端哥7777777</p> <p>前端哥8888888</p> </div> </li> <li> <div> <p>前端哥999999999</p> <p>前端哥ddddddd</p> </div> </li> <li> <div> <p>前端哥aaaaaaaa</p> <p>前端哥cccccccccc</p> </div> </li> </ul> <ul id="ul2"> <li> <div> <p>1111111111111</p> <p>https://www.qianduange.cn/</p> </div> </li> <li> <div> <p>33333333333333</p> <p>https://www.qianduange.cn/</p> </div> </li> <li> <div> <p>555555555555555</p> <p>https://www.qianduange.cn/</p> </div> </li> <li> <div> <p>777777777777777</p> <p>https://www.qianduange.cn/</p> </div> </li> <li> <div> <p>999999999999999</p> <p>https://www.qianduange.cn/</p> </div> </li> <li> <div> <p>aaaaaaaaaaaaaaaa</p> <p>https://www.qianduange.cn/</p> </div> </li> </ul>
js代码：
function startMove(obj, json, fn) { clearInterval(obj.iTimer); var iCur = 0; var iSpeed = 0; obj.iTimer = setInterval(function() { var iBtn = true; for (var attr in json) { var iTarget = json[attr]; if (attr == "opacity") { iCur = Math.round(css(obj, "opacity") * 100); } else { iCur = parseInt(css(obj, attr)); } iSpeed = (iTarget - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur != iTarget) { iBtn = false; if (attr == "opacity") { obj.style.opacity = (iCur iSpeed) / 100; obj.style.filter = 'alpha(opacity=' (iCur iSpeed) ')'; } else { obj.style[attr] = iCur iSpeed 'px'; } } } if (iBtn) { clearInterval(obj.iTimer); fn && fn.call(obj); } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } window.onload = function() { var oUl = document.getElementById("ul1"); var oUl2 = document.getElementById("ul2"); toShow(oUl); setTimeout(function() { toShow(oUl2); }, 1000); function toShow(obj) { var aDiv = obj.getElementsByTagName("div"); var iNow = 0; var timer = null; var bBtn = true; setInterval(function() { toChange(); }, 2000); function toChange() { timer = setInterval(function() { if (iNow == aDiv.length) { clearInterval(timer); iNow = 0; bBtn = !bBtn; } else if (bBtn) { startMove(aDiv[iNow], { top: 0 }); iNow ; } else { startMove(aDiv[iNow], { top: -30 }); iNow ; } }, 100); } } }
效果图：
完整demo:
<!doctype html><html> <head> <meta charset="utf-8"> <title>js文字百叶窗特效-前端哥</title> <script src="https://www.qianduange.cn/templets/default/js/jquery.min.js"></script> <style> * { padding: 0; margin: 0; } .qianduange { width: 680px; margin: 0px auto;} li { list-style: none; } #ul1, #ul2 { width: 300px; height: auto; float: left; border-top: 1px solid #000; margin: 20px; } li { width: 100%; height: 30px; overflow: hidden; position: relative; border-bottom: 1px dashed #333; line-height: 30px; } li div { position: absolute; top: -30px; left: 0; } li div p { height: 30px; } </style> </head> <body> <h1 style="text-align: center; margin-top: 30px;">js百叶窗效果-前端哥</h1> <div class="qianduange"> <ul id="ul1"> <li> <div> <p>前端哥1111111</p> <p>前端哥222222</p> </div> </li> <li> <div> <p>前端哥33333</p> <p>前端哥44444444444444</p> </div> </li> <li> <div> <p>前端哥55555555555</p> <p>6前端哥6666666666</p> </div> </li> <li> <div> <p>前端哥7777777</p> <p>前端哥8888888</p> </div> </li> <li> <div> <p>前端哥999999999</p> <p>前端哥ddddddd</p> </div> </li> <li> <div> <p>前端哥aaaaaaaa</p> <p>前端哥cccccccccc</p> </div> </li> </ul> <ul id="ul2"> <li> <div> <p>1111111111111</p> <p>https://www.qianduange.cn/</p> </div> </li> <li> <div> <p>33333333333333</p> <p>https://www.qianduange.cn/</p> </div> </li> <li> <div> <p>555555555555555</p> <p>https://www.qianduange.cn/</p> </div> </li> <li> <div> <p>777777777777777</p> <p>https://www.qianduange.cn/</p> </div> </li> <li> <div> <p>999999999999999</p> <p>https://www.qianduange.cn/</p> </div> </li> <li> <div> <p>aaaaaaaaaaaaaaaa</p> <p>https://www.qianduange.cn/</p> </div> </li> </ul> </div> <script> function startMove(obj, json, fn) { clearInterval(obj.iTimer); var iCur = 0; var iSpeed = 0; obj.iTimer = setInterval(function() { var iBtn = true; for (var attr in json) { var iTarget = json[attr]; if (attr == "opacity") { iCur = Math.round(css(obj, "opacity") * 100); } else { iCur = parseInt(css(obj, attr)); } iSpeed = (iTarget - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur != iTarget) { iBtn = false; if (attr == "opacity") { obj.style.opacity = (iCur iSpeed) / 100; obj.style.filter = 'alpha(opacity=' (iCur iSpeed) ')'; } else { obj.style[attr] = iCur iSpeed 'px'; } } } if (iBtn) { clearInterval(obj.iTimer); fn && fn.call(obj); } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } window.onload = function() { var oUl = document.getElementById("ul1"); var oUl2 = document.getElementById("ul2"); toShow(oUl); setTimeout(function() { toShow(oUl2); }, 1000); function toShow(obj) { var aDiv = obj.getElementsByTagName("div"); var iNow = 0; var timer = null; var bBtn = true; setInterval(function() { toChange(); }, 2000); function toChange() { timer = setInterval(function() { if (iNow == aDiv.length) { clearInterval(timer); iNow = 0; bBtn = !bBtn; } else if (bBtn) { startMove(aDiv[iNow], { top: 0 }); iNow ; } else { startMove(aDiv[iNow], { top: -30 }); iNow ; } }, 100); } } } </script> </body></html>
