| 本文分享一个用原生JS实现的百叶窗特效，效果如下： 
代码实现如下，欢迎大家复制粘贴。 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现百叶窗特效</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } #box { width: 562px; padding: 10px 24px 20px; background: #EACFCF; overflow: hidden; margin: 20px auto 0; } .left { width: 266px; float: left; } .right { width: 266px; float: right; } #box h2 { height: 38px; border-bottom: 1px solid #D2A1A1; padding-left: 20px; } #box h2 strong { float: left; line-height: 38px; color: #885050; font-weight: normal; } #box h2 a { float: right; width: 52px; height: 14px; font-size: 12px; text-indent: 10px; color: #fff; line-height: 12px; font-weight: normal; margin-top: 10px; } #box li { height: 30px; position: relative; border-bottom: 1px dashed #D1A1A1; } #box li div, #box li p { height: 30px; position: absolute; top: 0; left: 0; width: 100%; } #box li p { background: #fff; opacity: 0; filter: alpha(opacity=0); } #box li div a, #box li div span { line-height: 30px; font-size: 12px; height: 30px; } #box li div a { float: left; padding-left: 20px; color: #7F5454; width: 172px; overflow: hidden; } #box li div span { padding-right: 10px; float: right; color: #CF9494; } </style> <script type="text/javascript"> window.onload = function () { var oBox = document.getElementById("box"); var aLi = document.getElementsByTagName('li'); var i = 0; for (i = 0; i < aLi.length; i++) { var oP = aLi[i].getElementsByTagName('p')[0]; oP.iAlpha = 0; oP.time = null; aLi[i].onmouseover = function () { var oP = this.getElementsByTagName('p')[0]; oP.time ? clearInterval(oP.time) : ""; oP.style.opacity = 1; oP.style.filter = "alpha(opacity=100)"; oP.iAlpha = 100; } aLi[i].onmouseout = function () { starmove(this.getElementsByTagName('p')[0]); }; } }; function starmove(obj) { obj.time ? clearInterval(obj.time) : ""; obj.time = setInterval(function () { domove(obj); }, 14); } function domove(obj) { var iSpeed = 5; if (obj.iAlpha <= iSpeed) { clearInterval(obj.time); obj.iAlpha = 0; obj.time = null; } else { obj.iAlpha -= iSpeed; } obj.style.opacity = obj.iAlpha / 100; obj.style.filter = "alpha(opacity=" + obj.iAlpha + ")"; } </script></head> <body> <div id="box"> <div class="left"> <h2> <strong>最新消息</strong> <a>more</a> </h2> <ul> <li> <p></p> <div> <a>课程常见问题合集</a> <span>20110329</span> </div> </li> <li> <p></p> <div> <a>JS课程结课标准</a> <span>20110327</span> </div> </li> <li> <p></p> <div> <a>网页特效大集合(每天更新)</a> <span>20110322</span> </div> </li> <li> <p></p> <div> <a>上课地点</a> <span>20110319</span> </div> </li> <li> <p></p> <div> <a>CSS课程最新开班时间</a> <span>20110319</span> </div> </li> <li> <p></p> <div> <a>JavaScript课程最新开班时间</a> <span>20110319</span> </div> </li> <li> <p></p> <div> <a>零基础网页制作课程</a> <span>20110319</span> </div> </li> </ul> </div> <div class="right"> <h2> <strong>新鲜事</strong> <a>more</a> </h2> <ul> <li> <p></p> <div> <a>JavaScript实现的3D球面标签云效果</a> <span>20110329</span> </div> </li> <li> <p></p> <div> <a>周六JavaScript聚会活动现场记录</a> <span>20110327</span> </div> </li> <li> <p></p> <div> <a>阿里前端面试题</a> <span>20110319</span> </div> </li> <li> <p></p> <div> <a>浅析google地图前端实现原理（一）</a> <span>20110319</span> </div> </li> <li> <p></p> <div> <a>Windows计算器（简易版）作业练习</a> <span>20110319</span> </div> </li> <li> <p></p> <div> <a>手风琴缓动效果</a> <span>20110319</span> </div> </li> <li> <p></p> <div> <a>JavaScript实现的3D球面标签云效果</a> <span>20110319</span> </div> </li> </ul> </div> </div></body> </html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
微信小程序实现短信登录的实战
原生JS实现图片跑马灯特效 |
