滚动显示友情链接
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
1、原理：利用? overflow: hidden;屬性只顯示一行，調整scrollTop達到滾動目的
<style?type="text/css"> .linkDiv?{width:?870px;height:?20px;line-height:?20px;float:?left;overflow:?hidden; } </style> <div?class="friendLink"><h3>友情鏈接：</h3><div?id="flink"?class="linkDiv"><a?href="#/"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#/"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#/"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a><span>|</span>????????????????<a?href="#"?target="_blank">滾動顯示</a></div> </div><br/> <h3>ddddd</h3> <script?type="text/javascript">var?fscroll?=?document.getElementById("flink");var?fheight?=?fscroll.scrollHeight;//fscroll.innerHTML?+=?fscroll.innerHTML;function?friendScroll()?{fscroll.scrollTop?++;if(fscroll.scrollTop?>=?fscroll.scrollHeight-20)?fscroll.scrollTop=0;}var?MyMar=window.setInterval(friendScroll,100);fscroll.onmouseover=function()?{clearInterval(MyMar)};fscroll.onmouseout=function()?{MyMar=setInterval(friendScroll,100)}; </script>2、升級版，滾到底靜止一秒鐘再從頭來，廣告樣式
<!DOCTYPE?html> <html> <head><meta?charset="UTF-8"><title>Document</title> </head> <body> <style?type="text/css"> .linkDiv?{width:?473px;height:?25px;line-height:?25px;float:?left;overflow:?hidden;position:?relative;border:?1px?solid?#07949C;border-radius:?2px; } .left_font{color:?white;width:?130px;display:?inline-block;text-align:?center;text-decoration:?none;z-index:2;position:?relative; } .right_font{color:?rgb(126,?126,?126);width:?330px;display:?inline-block;text-align:?center;text-decoration:?none; } .background_blue{height:400%;width:130px;position:?absolute;background-color:#07949C;z-index:1; } </style><div?id="flink"><div></div><a?href="#"?target="_blank">天貓年貨節(jié)</a><a?href="#"target="_blank">年貨大派送，全場5折嗨翻天</a><br><a?href="#"?target="_blank">京東年終大促</a><a?href="#"target="_blank">年貨大派送，滿100立減200</a><br><a?href="#"?target="_blank">天貓年貨節(jié)</a><a?href="#"target="_blank">年貨大派送，全場5折嗨翻天</a><br><a?href="#"?target="_blank">京東年終大促</a><a?href="#"target="_blank">年貨大派送，滿100立減200</a><br></div> <script?type="text/javascript">var?fscroll?=?document.getElementById("flink");var?fheight?=?fscroll.scrollHeight;//fscroll.innerHTML?+=?fscroll.innerHTML;function?friendScroll()?{fscroll.scrollTop?++;if(fscroll.scrollTop?>=?fscroll.scrollHeight-26){clearInterval(MyMar);setTimeout(function(){fscroll.scrollTop=0;MyMar=setInterval(friendScroll,100);},?1000);}}var?MyMar=window.setInterval(friendScroll,100);fscroll.onmouseover=function()?{clearInterval(MyMar)};fscroll.onmouseout=function()?{MyMar=setInterval(friendScroll,100)}; </script></body> </html>轉載于:https://my.oschina.net/lantianbaiyun/blog/490574
總結
- 上一篇： Linux上构建一个RADIUS服务器详
- 下一篇： java.security.Access