直接看<script>標(biāo)簽，想要鼠標(biāo)懸浮暫停怎樣實(shí)現(xiàn)不擾亂自動(dòng)翻滾<html>
?<head>
??<title>文字的無(wú)縫滾動(dòng)</title>
??<meta?charset="utf-8">
??<meta?http-equiv="X-UA-Compatible"?content="IE=edge,chrome=1"?/>?
??<style?type="text/css">
???*{?
????margin:?0;
????padding:?0;
???}
???body{
????font-size:?12px;
????line-height:?24px;
???}
???a{
????text-decoration:?none;
????color:#333;
???}
???a:hover{
????color:#ff0000;
???}
???ul?{
????????list-style:?outside?none?none;
???}
???#mooc{
????width:?399px;
????margin:?50?auto?0;
????border:?5px?solid?#BBBBBB;
????box-shadow:?2px?2px?10px?#ababab;
????border-radius:?15px;
???}
???#mooc_head{
????height:?60px;?/*?Safari?5.1?-?6.0?*/
???????????background:?-webkit-linear-gradient(top,?#f05e6f,?#c9394a);
???????????background:?-moz-linear-gradient(center?top,#f05e6f,?#c9394a);
???????????background:?linear-gradient(to?bottom,?#f05e6f,?#c9394a);?/*?Safari??/*?Firefox?3.6?-?15??/*?標(biāo)準(zhǔn)的語(yǔ)法?*/
???????????position:?relative;
???????????padding-left:?30px;
???????????line-height:?60px;
????font-size:?24px;
????color:#FFFFFF;
????border-radius:?8px?8px?0px?0px;
???}
???#mooc_head?a{
????right:10px;
????bottom:?10px;
????line-height:?30px;
????color:white;
????position:?absolute;
????font-size:?12px;
???}
???#moocbox{
????height:150px;
????overflow:?hidden;
????margin-left:?25px;
????width:335px;
???}
???#moocbox?ul?li{
????height:?24px;?
???}
???#moocbox?ul?li?a{
????display:block;
????color:black;
????float:left;
????height:?24px;
????text-indent:?15px;
????overflow:?hidden;
????width:?180px;
???}
???#moocbox?ul?li?a:hover{
????color:red;
???}
???#mooc?span{
????color:#999;
????float:?right;
???}
??</style>
?</head>
?<body>
??<div?id="mooc">
???<h3?id="mooc_head">慕課網(wǎng)最新課程
???<a?href="#">更多>></a>
???</h3>
???<div?id="moocbox">
????<ul?id="con">
????????<li><a?href="#">1.學(xué)會(huì)html5?絕對(duì)的屌絲逆襲（案例）</a><span>2013-09-18</span></li>
????????<li><a?href="#">2.tab頁(yè)面切換效果（案例）</a><span>2013-10-09</span></li>
????????<li><a?href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li>
????????<li><a?href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a><span>2013-11-01</span></li>
????????<li><a?href="#">5.分頁(yè)頁(yè)碼制作（案例）</a><span>2013-11-06</span></li>
????????<li><a?href="#">6.導(dǎo)航條菜單的制作（案例）</a><span>2013-11-08</span></li>
????????<li><a?href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
????????<li><a?href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li>
????????<li><a?href="#">9.如何實(shí)現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li>????
????</ul>
???</div>
??</div>?
??<script?type="text/javascript">
??var?box?=?document.getElementById("moocbox");
??var?con=document.getElementById("con");
??con.innerHTML+=con.innerHTML;
??box.scrollTop=0;
??var?liHeight=24;//li的高度
??var?speed=50;
??var?delay=1000;
??function?startMove(){
???box.scrollTop++;
//???console.log(box.scrollTop);
???time=setInterval(scrollUp,speed);
??}
??function?scrollUp?()?{???
???if(box.scrollTop%liHeight==0){
????clearInterval(time);
????setTimeout(startMove,delay);
???}else{
????box.scrollTop++;
????if(box.scrollTop?>=?box.scrollHeight/2){
?????box.scrollTop=0;
????}
???}
??}
??setTimeout(startMove,delay);
//??box.onmouseover=function(){
//???clearInterval();
//??}
//??box.onmouseout=function(){
//???startMove();
//??}?
??</script>
?</body>
</html>
js的鼠標(biāo)懸浮事件
時(shí)間啊
2016-04-03 21:02:47
