打印

（已解决）求助：这个上下滚动效果为什么不兼容FF，请大家帮忙，谢谢！

weiwater [楼主]

蓝色水滴

高级会员

帖子: 299
体力: 691
威望: 0
当前: 天津南开
离线: 5 天

1^# 大中小发表于 2008-6-30 17:50

<!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=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript">
// product roll code

</script>
</head>
<body>
<DIV 
            style="LEFT: 0px; OVERFLOW: hidden; WIDTH: 993px; POSITION: relative; TOP: 0px; HEIGHT: 38px">
			
            <DIV id=DropHit 
            style="LEFT: 0px; WIDTH: 993px; POSITION: absolute; TOP: 0px; HEIGHT: 38px; visibility: visible;"><img src="images/ad2.jpg" width="993" height="38" alt="图片三" />            </DIV>
						
						
						<DIV id=DropHit 
            style="LEFT: 0px; WIDTH: 993px; POSITION: absolute; TOP: 0px; HEIGHT: 38px; visibility: visible;"><img src="images/ad1.jpg" width="993" height="38" alt="图片二" /></DIV>
			 
						<DIV id=DropHit 
            style="LEFT: 0px; WIDTH: 993px; POSITION: absolute; TOP: 0px; HEIGHT: 38px; visibility: visible;"><img src="images/ad.jpg" width="993" height="38" alt="图片一" /></DIV>
						
</DIV>
<script type="text/javascript">DirectUp();</script>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 weiwater 于 2008-7-2 14:33 编辑 ]

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

hutia

诘屈聱牙

荣誉管理团队

帖子: 4728
体力: 14640
威望: 383
当前: 江苏苏州
离线: 15 天

专长 JS,PHP,ASP

2^# 大中小发表于 2008-6-30 19:54

这个貌似是很多年前的代码了，居然用了document.all等仅仅被IE支持的属性...所以当然不兼容其他任何非IE内核的浏览器了

hutia归来...
老婆的小店
hutia的个人站点 - 有问题去这里问我

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

macji

麦鸡

高级会员

帖子: 373
体力: 672
威望: 3
当前: 浙江杭州

专长 前端制作,JS,PHP

3^# 大中小发表于 2008-6-30 20:40

____________________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css" media="all">
/* <![CDATA[ */
ul{margin:0; width:110px; padding:5px; height:220px; border:solid 1px #000; overflow:hidden}
ul li{list-style:none; width:100px; height:100px; line-height:100px; text-align:center; background:#eee; border:solid 5px #fff;}
/* ]]>*/
</style>
</head>
<body>
<div> 
<ul id="div">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<script type="text/javascript">
/* <![CDATA[ */
function simplescroll(c, config) {
	this.config = config ? config : {start_delay:30, speed: 30, delay:30, scrollItemCount:1};
	this.container = document.getElementById(c);
	this.pause = false;
	var _this = this;
	
	this.init = function() {
		_this.scrollTimeId = null;
		setTimeout(_this.start,_this.config.start_delay);
	}
	
	this.start = function() {
		var d = _this.container;
		var line_height = d.getElementsByTagName('li')[0].offsetHeight;
		if(d.scrollHeight-d.offsetHeight>=line_height) _this.scrollTimeId = setInterval(_this.scroll,_this.config.speed)
	};
	
	this.scroll = function() {
		if(_this.pause)return;
		var d = _this.container;d.scrollTop+=2;
		var line_height = d.getElementsByTagName('li')[0].offsetHeight;
		if(d.scrollTop%(line_height*_this.config.scrollItemCount)<=1){
			d.scrollTop=0;
			for(var i=0;i<_this.config.scrollItemCount;i++){d.appendChild(d.getElementsByTagName('li')[0]);}
			clearInterval(_this.scrollTimeId);
			setTimeout(_this.start,_this.config.delay);
		}
	}
	
	this.container.onmouseover=function(){_this.pause = true;}
	this.container.onmouseout=function(){_this.pause = false;}
}
var div = new simplescroll('div', {start_delay:30, speed:30, delay:30, scrollItemCount:2});
div.init();
/* ]]>*/
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

麦鸡Macji

TOP

activeTechPros 共享IT行业薪资信息 | 《疯狂的程序员》劲爆上市

weiwater [楼主]

蓝色水滴

高级会员

帖子: 299
体力: 691
威望: 0
当前: 天津南开
离线: 5 天

4^# 大中小发表于 2008-7-1 09:53

回复 macji 在 3# 的帖子

谢谢你给出的效果，可是这个是连续滚动的，我想要那种每滚动一屏都会暂停一下的效果，能实现吗？

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

macji

麦鸡

高级会员

帖子: 373
体力: 672
威望: 3
当前: 浙江杭州

专长 前端制作,JS,PHP

5^# 大中小发表于 2008-7-1 12:46

var div = new simplescroll('div', {start_delay:30, speed:30, delay:1000, scrollItemCount:2});

看参数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css" media="all">
/* <![CDATA[ */
ul{margin:0; width:110px; padding:5px; height:220px; border:solid 1px #000; overflow:hidden}
ul li{list-style:none; width:100px; height:100px; line-height:100px; text-align:center; background:#eee; border:solid 5px #fff;}
/* ]]>*/
</style>
</head>
<body>
<div> 
<ul id="div">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<script type="text/javascript">
/* <![CDATA[ */
function simplescroll(c, config) {
	this.config = config ? config : {start_delay:30, speed: 30, delay:30, scrollItemCount:1};
	this.container = document.getElementById(c);
	this.pause = false;
	var _this = this;
	
	this.init = function() {
		_this.scrollTimeId = null;
		setTimeout(_this.start,_this.config.start_delay);
	}
	
	this.start = function() {
		var d = _this.container;
		var line_height = d.getElementsByTagName('li')[0].offsetHeight;
		if(d.scrollHeight-d.offsetHeight>=line_height) _this.scrollTimeId = setInterval(_this.scroll,_this.config.speed)
	};
	
	this.scroll = function() {
		if(_this.pause)return;
		var d = _this.container;d.scrollTop+=2;
		var line_height = d.getElementsByTagName('li')[0].offsetHeight;
		if(d.scrollTop%(line_height*_this.config.scrollItemCount)<=1){
			d.scrollTop=0;
			for(var i=0;i<_this.config.scrollItemCount;i++){d.appendChild(d.getElementsByTagName('li')[0]);}
			clearInterval(_this.scrollTimeId);
			setTimeout(_this.start,_this.config.delay);
		}
	}
	
	this.container.onmouseover=function(){_this.pause = true;}
	this.container.onmouseout=function(){_this.pause = false;}
}
var div = new simplescroll('div', {start_delay:30, speed:30, delay:1000, scrollItemCount:2});
div.init();
/* ]]>*/
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

麦鸡Macji

TOP

weiwater [楼主]

蓝色水滴

高级会员

帖子: 299
体力: 691
威望: 0
当前: 天津南开
离线: 5 天

6^# 大中小发表于 2008-7-1 15:12

哦，非常感谢！

TOP

weiwater [楼主]

蓝色水滴

高级会员

帖子: 299
体力: 691
威望: 0
当前: 天津南开
离线: 5 天

7^# 大中小发表于 2008-7-2 14:25

为什么我把JS部分存成一个.js文件外部引用这个效果就不好用了呢？

TOP

weiwater [楼主]

蓝色水滴

高级会员

帖子: 299
体力: 691
威望: 0
当前: 天津南开
离线: 5 天

8^# 大中小发表于 2008-7-2 14:34

问题解决了。谢谢Macji。

[ 本帖最后由 weiwater 于 2008-7-2 14:35 编辑 ]

TOP