您的位置：首页 > Web前端 > JavaScript

不同浏览器下图片滚动效果的js

2009-07-17 16:34 639 查看

遇到过JS无法在火狐浏览器上实现IE的效果，昨天查看了一下相应的代码完成了这一功能的实现做一下简单的记录

网上的资料很多但大多没有说明细节看到了峰之博文的一篇文章后才若有所思问题出现在那里。

<div id="piclist" style="width:500px; overflow:hidden;">
<table>
<tr><td id="demo1" height="110">
<table height="110" border="0" cellpadding="0" cellspacing="5">
<tr>
<td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31" /></a></td>
<td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31" /></a></td>
<td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31" /></a></td>
<td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31" /></a></td>
<td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31" /></a></td>
<td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31" /></a></td>
<td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31" /></a></td>
<td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31" /></a></td>
<td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31" /></a></td>
<td><a href="http://www.lwfeel.com"><img src="http://www.lwfeel.com/logo.gif" width="88" height="31" /></a></td>
</tr>
</table>
</td>
<td id="demo2"> </td>
</tr></table>
</div>
<SCRIPT>
var speed3=25//速度数值越大速度越慢var isIE = document.all && window.external; //判断是否非ie
if(isIE==false){
demo1 = document.getElementById("demo1"); //非w3c标准要找到表单，必须是要用getElementById("XX");
demo2 = document.getElementById("demo2");
piclist = document.getElementById("piclist");}
/*
//这个星是用于判断是否火狐的，是多余代码，所以注释掉了，哪位有兴趣可以研究研究。
var firefox = document.getElementById && !document.all; //这段是为了兼容火狐，w3c标准
if(firefox==true){
demo1 = document.getElementById("demo1");
demo2 = document.getElementById("demo2");
piclist = document.getElementById("piclist");
}*/

demo2.innerHTML=demo1.innerHTML

function Marquee(){
if(demo2.offsetWidth-piclist.scrollLeft<=0)
piclist.scrollLeft-=demo1.offsetWidth
else{
piclist.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
piclist.onmouseover=function() {clearInterval(MyMar)}
piclist.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>

但在我的浏览器上不能完成对火狐的调试，既然问题出现在

var firefox = document.getElementById && !document.all; //这段是为了兼容火狐，w3c标准
if(firefox==true){
demo1 = document.getElementById("demo1");
demo2 = document.getElementById("demo2");
piclist = document.getElementById("piclist");
}*/

那一定有其它的判断方法，网上搜索后找到了我想要的

if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}

稍做修改完成了图片滚动的特效

if(navigator.userAgent.indexOf("FireFox")>0)

{

Demo1 = document.getElementById("demo1"); //非w3c标准要找到表单，必须是要用getElementById("XX");

Demo2 = document.getElementById("demo2");

piclist = document.getElementById("piclist ");

}

else

{

Demo2.innerHTML=demo1.innerHTML

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

也会对它的效果造成影响
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
可以做一种变通

在ie6与火狐下均可运行正常,并且找到了一个小但非常好用的JS调试器Companion.JS才300K大家可以安装试用一下

地址:http://www.my-debugbar.com/wiki/CompanionJS/HomePage

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航