生活随笔
收集整理的這篇文章主要介紹了
div 图片滚动 / 文字滚动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天研究了一下圖片滾動，網上有很多可以使用的例子，所以先是找了一個用的是表格布局的，如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body><div id="gpic" style="overflow: hidden; width: 600px; height: 182px;"><table border="0" align="center" cellpadding="0" cellspacing="0"><tr><td id="gpic1" valign="top" align="center"><table width="974" border="0" align='center' cellpadding="0" cellspacing="0"><tr><td height="120" bgcolor="#FF00FF">圖片/鏈接1</td><td valign='top' bgcolor="#00FFFF">圖片/鏈接2</td><td valign='top' bgcolor="#FFFF00">圖片/鏈接3</td><td valign='top' bgcolor="#0000FF">圖片/鏈接4</td><td valign='top' bgcolor="#00FF00">圖片/鏈接5</td><td valign='top' bgcolor="#FF0000">圖片/鏈接6</td></tr><tr><td height="24" align="center">文字信息</td><td align="center">文字信息</td><td align="center">文字信息</td><td align="center">文字信息</td><td align="center">文字信息</td><td align="center">文字信息</td></tr></table></td><td id="gpic2" valign="top"></td></tr></table></div><script>var speed = 30gpic2.innerHTML = gpic1.innerHTMLfunction Marquee() {if (gpic2.offsetWidth - gpic.scrollLeft <= 0)gpic.scrollLeft -= gpic1.offsetWidthelse {gpic.scrollLeft++}}var MyMar = setInterval(Marquee, speed)gpic.onmouseover = function () { clearInterval(MyMar) }gpic.onmouseout = function () { MyMar = setInterval(Marquee, speed) }</script>
</body>
</html>
這個滾動效果可以使用，但是表格布局現在一般不用，而且這個例子的onmouseover和onmouseout在頻繁的setInterval；
個人感覺可以使用布爾變量true和false來控制，停止還是繼續滾動。
自己改寫如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title>
</head>
<body><div id="PicWall" style="width: 200px; overflow: hidden; white-space: nowrap;"><div id="InnerPic" style="display: inline; width: 200px;"><img src="a.jpg" alt="img-1" />1<img src="a.jpg" alt="img-2" />2<img src="a.jpg" alt="img-3" />3<img src="a.jpg" alt="img-4" />4<img src="a.jpg" alt="img-5" />5</div><div id="InnerPic2" style="display: inline; width: 200px;"></div></div><script>var speed = 30;var scroll = true;InnerPic2.innerHTML = InnerPic.innerHTML;function Marquee() {if (scroll) {if (InnerPic2.offsetWidth - PicWall.scrollLeft <= 0) {PicWall.scrollLeft -= InnerPic.offsetWidth;} else {PicWall.scrollLeft++;}}}var MyMarquee = setInterval(Marquee, speed);PicWall.onmouseover = function () { scroll = false; }PicWall.onmouseout = function () { scroll = true; }</script>
</body>
</html>
另外有些了一個文字上下滾動
<!-- 臨時或重點信息發布（滾動）【開始】 --><div id="TextWall" style="overflow: hidden; border: 1px solid #2aff00; height: 230px;"><div id="InnerText" style="word-wrap: break-word;">信息：<br />1、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br />2、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br />3、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br />4、abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz<br /></div><div id="InnerText2" style="word-wrap: break-word;"></div></div><script>var textSpeed = 30;var textScroll = true;InnerText2.innerHTML = InnerText.innerHTML;function TextMarquee() {if (textScroll) {if (InnerText.offsetHeight - TextWall.scrollTop <= 0) {TextWall.scrollTop -= InnerText.offsetHeight;} else {TextWall.scrollTop++;}}}var MyTextMarquee = setInterval(TextMarquee, textSpeed);TextWall.onmouseover = function () { textScroll = false; }TextWall.onmouseout = function () { textScroll = true; }</script><!-- 臨時或重點信息發布（滾動）【結束】 -->
總結
以上是生活随笔為你收集整理的div 图片滚动 / 文字滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
