自下而上滚动公告栏（可悬停）
生活随笔
收集整理的這篇文章主要介紹了
自下而上滚动公告栏（可悬停）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字公告滾動輪播-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
* {margin:0;padding:0;
}
li {list-style:none;
}
.news {height:35px;background:#fff;overflow:hidden;
}
.news .t_news {height:20px;color:#2a2a2a;margin-top:15px;overflow:hidden;position:relative;width:500px;
}
.news .news_li,.swap {line-height:20px;display:inline-block;position:absolute;top:0;right:0;font-size:14px;text-align:right;color:#585858
}
.news .swap {top:20px;
}
</style>
</head>
<body>
<div class="news"><div class="t_news"><ul class="news_li"><li>1 我愛北京天安門</li><li>2 我愛北京天安門</li><li>3 我愛北京天安門</li><li>4 我愛北京天安門</li><li>5 我愛北京天安門</li></ul><ul class="swap"></ul></div>
</div><script>
$('.swap').html($('.news_li').html());
x = $('.news_li');
y = $('.swap');
h = $('.news_li li').length * 20; //20為每個li的高度
var hh = $('.news_li li').length;
if (hh > 1)//setTimeout(b,3000);//滾動間隔時間 現(xiàn)在是3秒
b();
b();function b() {t = parseInt(x.css('top'));//alert(t)
y.css('top', '20px');x.animate({top: t - 20 + 'px'}, 'slow'); //20為每個li的高度if (Math.abs(t) == h - 20) { //20為每個li的高度
y.animate({top: '0px'}, 'slow');z = x;x = y;y = z;}setTimeout(b, 3000); //滾動間隔時間 現(xiàn)在是3秒
}
</script></body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/shark1100913/p/9308973.html
總結(jié)
以上是生活随笔為你收集整理的自下而上滚动公告栏（可悬停）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ArrayList刷题总结
- 下一篇： golang 防知乎 中文验证码 源码