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

最新推荐文章于 2022-08-02 10:46:59 发布

lyflcear

最新推荐文章于 2022-08-02 10:46:59 发布

阅读量1.2k

点赞数

分类专栏： .NET开发 JAVAScript 文章标签：浏览器 firefox function xhtml html border

本文链接：https://blog.csdn.net/lyflcear/article/details/4357522

版权

.NET开发同时被 2 个专栏收录

81 篇文章 0 订阅

订阅专栏

JAVAScript

12 篇文章 0 订阅

订阅专栏

遇到过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.οnmοuseοver=function() {clearInterval(MyMar)}
piclist.οnmοuseοut=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

lyflcear

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
不同浏览器下图片滚动效果的js

遇到过JS无法在火狐浏览器上实现IE的效果，昨天查看了一下相应的代码完成了这一功能的实现做一下简单的记录网上的资料很多但大多没有说明细节看到了峰之博文的一篇文章后才若有所思问题出现在那里。 var speed3=25//速度数值越大速度越慢var isIE = document.all && window.external; //判断是否非ieif(isIE==false)
复制链接

扫一扫