marquee无缝滚动例子

第一、新建marquee.css文件。在marquee.css文件中加入如下如下CSS代码:

#demo {
 background: #FFF;
 overflow:hidden;
 border: 1px dashed #CCC;
 width: 950px;
    height:144px;
}
#demo img {
   height:144px;
    width:180px;
}
#demo img:hover{
    border:1px solid #ffa800;
}
#indemo {
 float: left;
 width: 800%;
}
#demo1 {
 float: left;
}
#demo2 {
 float: left;
}
#demo {
 background: #FFF;
 overflow:hidden;
 border: 1px dashed #CCC;
 width: 950px;
}
#demo img {
 border: 3px solid #F2F2F2;
}
#indemo {
 float: left;
 width: 800%;
}
#demo1 {
 float: left;
}
#demo2 {
 float: left;
}

 

第二、新建marquee.js文件。在marquee.js文件中加入如js代码:

$(document).ready(function(){
 huandeng()
})

function huandeng(){

var speed=20; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};  
}

 

第三、写html代码如下:

你可能感兴趣的:(jQury)