信息滾動
文字無縫信息滾動：javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>信息滾動</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
#hh{width: 400px;height: 144px;margin-top:100px;margin-left: 400px; background-color: green;overflow: hidden;border: 2px solid red;}
</style>
</head>
<body>
<div id="hh">
<ul id="con1">
<li>一、大叔過一會你就是昆明大理石密度法規和女的名稱是</li>
<li>二、啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>三、是水水水水水水水水水水水水水水水水</li>
<li>四、人人人人人人人人人人人人人人人人人人人人人人人</li>
<li>五、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
<li>六、鵝鵝鵝餓鵝鵝鵝餓鵝鵝鵝餓鵝鵝鵝餓</li>
<li>七、每天每天每天每天每天每天每天每天每天每天天</li>
<li>八、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
<li>九、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
<li>十、鵝鵝鵝餓鵝鵝鵝餓鵝鵝鵝餓鵝鵝鵝餓</li>
<li>十一、每天每天每天每天每天每天每天每天每天每天天</li>
<li>十二、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
</ul>
<ul id="con2"></ul>
</div>
<script type="text/javascript">
var hh=document.getElementById('hh');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
var time=50;
hh.scrollTop=0;
con2.innerHTML=con1.innerHTML;
function scrollUp(){
if (hh.scrollTop>=con1.offsetHeight) {
hh.scrollTop=0;
}else{
hh.scrollTop++;
}
}
var myScroll=setInterval('scrollUp()',time);
hh.onmouseover=function(){
clearInterval(myScroll);
}
hh.onmouseout=function(){
myScroll=setInterval('scrollUp()',time);
}
</script>
</body>
</html>
間歇性信息滾動：css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>間歇性信息滾動</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
#hh{width: 400px;height: 144px;margin-top:100px;margin-left: 400px; background-color: green;overflow: hidden;border: 2px solid red;}
</style>
</head>
<body>
<div id="hh">
<ul id="con1">
<li>一、大叔過一會你就是昆明大理石密度法規和女的名稱是</li>
<li>二、啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
<li>三、是水水水水水水水水水水水水水水水水</li>
<li>四、人人人人人人人人人人人人人人人人人人人人人人人</li>
<li>五、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
<li>六、鵝鵝鵝餓鵝鵝鵝餓鵝鵝鵝餓鵝鵝鵝餓</li>
<li>七、每天每天每天每天每天每天每天每天每天每天天</li>
<li>八、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
<li>九、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
<li>十、鵝鵝鵝餓鵝鵝鵝餓鵝鵝鵝餓鵝鵝鵝餓</li>
<li>十一、每天每天每天每天每天每天每天每天每天每天天</li>
<li>十二、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
</ul>
<ul id="con2"></ul>
</div>
<script type="text/javascript">
var hh=document.getElementById('hh');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
var time=50;
var liheight=24;
hh.scrollTop=0;
con2.innerHTML=con1.innerHTML;
function starMove(){
hh.scrollTop++;
myScroll=setInterval('scrollUp()',time);
}
function scrollUp(){
// hh.scrollTop++;
if(hh.scrollTop%liheight==0){
clearInterval(myScroll);
setTimeout('starMove()',2000);
}else{
hh.scrollTop++;
if (hh.scrollTop>=hh.scrollHeight/2) {
hh.scrollTop=0;
}
}
}
setTimeout('starMove()',2000);
</script>
</body>
</html>
相關文章
- 1. jquery插件無縫滾動信息牌滾動
- 2. JS實現信息滾動效果
- 3. 信息無縫滾動效果marquee
- 4. Jquery消息滾動
- 5. Android無限循環自動滾動信息展現
- 6. 滾動播放文字或者圖片信息效果
- 7. jQuery實現的向下推送圖文信息滾動效果
- 8. jq發送信息， 滾動條一直保持在底部
- 9. 微信小程序-滾動消息通知
- 10. 【JavaScript】文字滾動效果展示，用於信息提示
- 更多相關文章...
- • ionic 滾動條 - ionic 教程
- • 瀏覽器信息 - 瀏覽器信息
- • 算法總結-滑動窗口
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章