css+div横向滚动条

来源：互联网发布：王军大数据编辑：程序博客网时间：2024/05/17 11:34

html代码

<div id="scroll_div" class="fl"><div id="scroll_begin"> <span class="pad_right">50元巨人点卡奖励</span> <span class="pad_right">50元巨人点卡奖励</span> <span class="pad_right">50元巨人点卡奖励</span> <span class="pad_right">50元巨人点卡奖励</span> <span class="pad_right">50元巨人点卡奖励</span></div><div id="scroll_end"></div></div>

css代码

.pad_right {padding-right: 2em;}#scroll_div {    height: 26px;    line-height: 26px;    overflow: hidden;    white-space: nowrap;    width: 535px;    margin-left: 10px;    background: rgba(0, 0, 0, 0.52);    color: #fff;}#scroll_begin,#scroll_end {display: inline;}

js代码

var speed = 50;var MyMar = null;var scroll_begin = document.getElementById("scroll_begin");var scroll_end = document.getElementById("scroll_end");var scroll_div = document.getElementById("scroll_div");scroll_end.innerHTML = scroll_begin.innerHTML;function Marquee() {if(scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)scroll_div.scrollLeft -= scroll_begin.offsetWidth;elsescroll_div.scrollLeft++;}MyMar = setInterval(Marquee, speed);scroll_div.onmouseover = function() {　　　　　　　clearInterval(MyMar);　　　　　}　　　　scroll_div.onmouseout = function() {　　　　　　　MyMar = setInterval(Marquee, speed);　　　　　　　　　}

阅读全文

0 0