不用marquee而使用JS控制图片纵向滚动，解决火狐不兼容

来源：互联网发布：迅龙数据恢复软件官网编辑：程序博客网时间：2024/05/20 07:58

火狐浏览使用marquee标签时候，存在兼容性问题，onMouseOut 和 onMouseOver，不能控制滚动的启停，在这里使用js进行控制

纵向滚动源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title>不用marquee而使用JS控制图片纵向滚动，解决火狐不兼容</title></head><body><div id="demotop" style="OVERFLOW: hidden; height: 700px; width:200px; color: red">  <ul style="list-style-type: none;">                  <li id="demo1top">         <ul style="list-style-type: none;">                          <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>              <li><img src="images/001.jpg" width="100" height="89" /></li>                   </ul>        </li>        <li id="demo2top"></li>            </ul></div><script type="text/javascript">var speed=20//越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值demo2top.innerHTML=demo1top.innerHTMLfunction Marquee(){if(demo2top.offsetHeight-demotop.scrollTop<=0)demotop.scrollTop-=demo1top.offsetHeightelse{demotop.scrollTop++}}var MyMartop=setInterval(Marquee,speed)demotop.onmouseover=function() {clearInterval(MyMartop)}demotop.onmouseout=function() {MyMartop=setInterval(Marquee,speed)}</script> </body></html>

横向滚动源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title>不用marquee而使用JS控制图片横向滚动</title></head><body><div id="demoleft" style="OVERFLOW: hidden; WIDTH: 700px; COLOR: red">  <table>          <tr>        <td id="demo1left">         <table>            <tr>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>              <td><img src="images/001.jpg" width="100" height="89" /></td>             </tr>          </table>        </td>        <td id="demo2left"></td>      </tr>       </table></div><script type="text/javascript">var speed=20//越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值demo2left.innerHTML=demo1left.innerHTMLfunction Marquee(){if(demo2left.offsetWidth-demoleft.scrollLeft<=0)demoleft.scrollLeft-=demo1left.offsetWidthelse{demoleft.scrollLeft++}}var MyMarleft=setInterval(Marquee,speed)demoleft.onmouseover=function() {clearInterval(MyMarleft)}demoleft.onmouseout=function() {MyMarleft=setInterval(Marquee,speed)}</script> </body></html>

0 0