html

<div class="winBox">
<ul class="scroll"> <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
<li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
<li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
<li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
<li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
</ul>
</div
<div class="winBox"> <ul class="scroll"> <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li> <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li> <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li> <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li> <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li> </ul> </div
<div class="winBox">
    <ul class="scroll"> <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
        <li><span>张**</span><span>1561****168</span><span>已成功报名</span></li>
    </ul>
</div

css

.winBox {
width: 100% ;
height: 40px;
overflow: hidden;
position: relative;
background: pink;
}
.scroll { /*width的大小是根据下面li的长度和多少个li而定的,需注意!*/
width: 1500px;
position: absolute;
left: 0px;
top: 0px;
}
.scroll li {
width: 300px;
float: left;
line - height: 40px;
text - align: center;
}
.scroll li span {
display: inline - block;
padding: 0 8px;
}
.winBox { width: 100% ; height: 40px; overflow: hidden; position: relative; background: pink; } .scroll { /*width的大小是根据下面li的长度和多少个li而定的,需注意!*/ width: 1500px; position: absolute; left: 0px; top: 0px; } .scroll li { width: 300px; float: left; line - height: 40px; text - align: center; } .scroll li span { display: inline - block; padding: 0 8px; }
.winBox {
    width: 100% ;
    height: 40px;
    overflow: hidden;
    position: relative;
    background: pink;
}
.scroll { /*width的大小是根据下面li的长度和多少个li而定的,需注意!*/
    width: 1500px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.scroll li {
    width: 300px;
    float: left;
    line - height: 40px;
    text - align: center;
}
.scroll li span {
    display: inline - block;
    padding: 0 8px;
}

jquery

$(function () {
var lilen = $(".winBox li").length;
$(".scroll").width(lilen * 300)
var num = 0;
function goLeft() { //750是根据你给的尺寸,可变的
if (num == -750) {
num = 0;
}
num -= 1;
$(".scroll").css({
left: num
})
}
//设置滚动速度
var timer = setInterval(goLeft, 20); //设置鼠标经过时滚动停止
$(".winBox").hover(function () {
clearInterval(timer);
},
function () {
timer = setInterval(goLeft, 20);
})
})
$(function () { var lilen = $(".winBox li").length; $(".scroll").width(lilen * 300) var num = 0; function goLeft() { //750是根据你给的尺寸,可变的 if (num == -750) { num = 0; } num -= 1; $(".scroll").css({ left: num }) } //设置滚动速度 var timer = setInterval(goLeft, 20); //设置鼠标经过时滚动停止 $(".winBox").hover(function () { clearInterval(timer); }, function () { timer = setInterval(goLeft, 20); }) })
$(function () {
    var lilen = $(".winBox li").length;
    $(".scroll").width(lilen * 300)
    var num = 0;

    function goLeft() { //750是根据你给的尺寸,可变的
            if (num == -750) {
                num = 0;
            }
            num -= 1;
            $(".scroll").css({
                left: num
            })
        }
        //设置滚动速度
    var timer = setInterval(goLeft, 20); //设置鼠标经过时滚动停止
    $(".winBox").hover(function () {
            clearInterval(timer);
        },
        function () {
            timer = setInterval(goLeft, 20);
        })
})

 

发表评论

邮箱地址不会被公开。 必填项已用*标注