打印

紧急求救：JS如何控制对象移动。

BadJohnny [楼主]

比亚多

银牌会员

帖子: 1029
体力: 1577
威望: 1
当前: 西藏拉萨
离线: 11 天

专长 网页设计,前端制作,策划

1^# 大中小发表于 2007-7-15 01:56

如附图所示：

有一个绿色框内，包含了很多个白色的分类区域，如CLASS1,CLASS2.................这个将用ASP动态生成，我想当点击底下向右的箭头时，整个绿色框内的CLASS1,CLASS2向左移动，然后CLASS3,CLASS4从右移动到线框内，当到头了，点击箭头不起作用。这样的效果用JS怎么实现，最好要有移动过程的那个效果。FLASH里经常见，但现在想做成JS的，客户要的，说FLASH不适合搜索引擎收录，KAO，难为小弟我了，有高手能实现吗？

效果如http://www.sxsjly.com/图片栏目的那个FLASH。会的朋友可以简单的写个模型都行，可以抽象成一个链接的onClick事件触发了一个DIV在X轴位置变化，原理一样就行。
如果不清楚的话，也欢迎讨论。

求助大家了！如果能搞定，如果是西安的朋友绝对好好请你吃一顿。

[ 本帖最后由 BadJohnny 于 2007-7-15 02:01 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

hoyard.com

TOP

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

BadJohnny [楼主]

比亚多

银牌会员

帖子: 1029
体力: 1577
威望: 1
当前: 西藏拉萨
离线: 11 天

专长 网页设计,前端制作,策划

2^# 大中小发表于 2007-7-15 02:24

估计太晚了，高手们都休息了，等明天吧

hoyard.com

TOP

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

aobert

中级会员

帖子: 134
体力: 246
威望: 1
离线: 40 天

3^# 大中小发表于 2007-7-15 15:17

<html>
	<style>
	
	</style>
	<body>
		<div id="father">
			<table id="mother" style="width:900px;position:relative;left:0px;margin-left:0px">
				<tbody>
					<tr>
						<td class="child">class1</td>
						<td class="child">class2</td>
						<td class="child">class3</td>
						<td class="child">class4</td>
						<td class="child">class5</td>
						<td class="child">class6</td>
						<td class="child">class7</td>
						<td class="child">class8</td>
						<td class="child">class9</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div><button onclick="scrollx('left')"><==</button><button onclick="scrollx('right')">==></button><div>
	</body>
</html>
<script>
	var allscroll
	allscroll=true
	function scrollx(direc)
	{
		var targetleft,targetele,targetchild,childwidth,step,steplen
		step=0
		childwidth=100//子容器宽度,table和td的宽度必须根据这个设定好。
		targetele=document.getElementById("mother")
		targetchild=targetele.childNodes[0].childNodes[0].childNodes
		targetleft=parseInt(targetele.style.marginLeft)
		var len
		if (direc=="left") 
		   {
		   	if ((-targetleft)<(targetchild.length-1)*childwidth)//这里决定在最后第几个元素处停止滚动
		   	{len=-childwidth}
		   	else
		   	{len=0}
		   }
		else
		   {
		   	if (targetleft!=0)
		   	{len=childwidth}
		   	else
		   	{len=0}
		   }
		step=parseInt(len/50)//滚动的步长
		steplen=Math.abs(step)
		if (allscroll==true && len!=0) 
		{allscroll=false;var stopscroll=setInterval(scrollmove,30)}//刷新的速度
		function scrollmove()
		{
			targetele.style.marginLeft=parseInt(targetele.style.marginLeft)+step+"px"
			steplen+=Math.abs(step)
			if (steplen>Math.abs(1*len))//一次滚动多少元素
			{
				clearInterval(stopscroll)
				allscroll=true
			}
		}
	}
</script>

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

具体使用时样式的边框宽度什么的都要考虑进去效果才不会乱。

[ 本帖最后由 aobert 于 2007-7-15 15:20 编辑 ]

TOP

掌握加薪筹码 IT薪资宝典给您答案！

BadJohnny [楼主]

比亚多

银牌会员

帖子: 1029
体力: 1577
威望: 1
当前: 西藏拉萨
离线: 11 天

专长 网页设计,前端制作,策划

4^# 大中小发表于 2007-7-15 17:32

高手，真是太谢谢你了！就是要这个。

hoyard.com

TOP

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

aobert

中级会员

帖子: 134
体力: 246
威望: 1
离线: 40 天

5^# 大中小发表于 2007-7-16 11:40

那。。。偶滴饭捏？

TOP

heroguang

初级会员

帖子: 65
体力: 124
威望: 0
当前: 北京海淀区
离线: 1 天

专长 前端制作,JS,网络

6^# 大中小发表于 2008-9-23 13:20

ff不好使呀

搜达足球

TOP

cloudgamer

高级会员

帖子: 473
体力: 982
威望: 2
当前: 广东佛山
离线: 1 天

7^# 大中小发表于 2008-9-23 14:57

http://www.fs12345.com/album/photo.asp?id=54
参考一下

TOP

takuma888

银牌会员

帖子: 685
体力: 1230
威望: 0
当前: 湖北武汉
离线: 10 天

专长 前端制作,.NET

8^# 大中小发表于 2008-9-23 18:34

使用时可以随意通过css调整大小,程序可以自适应.

兼容IE6,IE7,FF,Google

<!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>活动的展示窗</title>
<style type="text/css">
#box{width:500px;height:120px;border:#00FF00 10px ridge;overflow:hidden}
.bigbox{overflow:hidden;}
.smallbox{width:auto!important width:140px;min-width:140px;height:100px;border:#FFFF00 8px ridge;float:left;display:inline;overflow:visible;}
</style>
<script language="javascript" type="text/javascript">
var box,scrollIndex=0,sbArr=new Array();
function $(id){return document.getElementById(id)}
window.onload=function(){
	box=$("box");
	var bb=box.firstChild;
	var tmp=bb.getElementsByTagName("div");
	var allWidth=0;
	for (var n=0;n<tmp.length;n++){
		if(tmp[n].className=="smallbox"){
			sbArr.push(tmp[n]);
			sbArr[sbArr.length-1].scrollFlag=allWidth;
			allWidth=allWidth+sbArr[sbArr.length-1].offsetWidth;
		}
	}
	resize(bb);
}
function resize(o){
	var width=0,height=0;
	for (var n=0;n<sbArr.length;n++){
		width=width+sbArr[n].offsetWidth;
		if (sbArr[n].offsetHeight>height) height=sbArr[n].offsetHeight;
	}
	o.style.width=width+"px";
	o.style.height=height+"px";
}
function goPrevious(){
	if (--scrollIndex<0) scrollIndex=0;
	moveBox(sbArr[scrollIndex].scrollFlag);
}
function goNext(){
	if (sbArr[scrollIndex+1].scrollFlag>=box.scrollWidth-box.clientWidth){
		moveBox(box.scrollWidth-box.clientWidth);
		if (box.scrollLeft!=box.scrollWidth-box.clientWidth) ++scrollIndex;
	}else{
		if (++scrollIndex>sbArr.length-1) scrollIndex=sbArr.length-1;
		moveBox(sbArr[scrollIndex].scrollFlag);
	}
}
function moveBox(scrollFlag){
	clearTimeout(box.getAttribute("ta"));
	if (Math.abs(scrollFlag-box.scrollLeft)<1){
		box.scrollLeft=scrollFlag;
	}else{
		var ta=parseInt((scrollFlag-box.scrollLeft)/8+1);
		if (Math.abs(ta)<0.5) ta=ta>0?0.5:-0.5;
		box.scrollLeft=box.scrollLeft+ta;
		box.setAttribute("ta",setTimeout(function(){moveBox(scrollFlag)},10));
	}
}
</script>
</head>
<body>
<div id="box"><div class="bigbox">
<div class="smallbox">content1</div>
<div class="smallbox">content2</div>
<div class="smallbox">content3</div>
<div class="smallbox">content4</div>
<div class="smallbox">content5</div>
<div class="smallbox">content6</div>
<div class="smallbox">content7</div>
<div class="smallbox">content8</div>
<div class="smallbox">content9</div>
</div></div>
<a onclick="goPrevious()" href="javascript:">左移</a>
<a onclick="goNext()" href="javascript:">右移</a>
</body>
</html>

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

[ 本帖最后由 takuma888 于 2008-9-24 01:02 编辑 ]

前端设计 javascirpt

TOP

amix2115

新手上路

帖子: 14
体力: 33
威望: 0
当前: 北京西城区

9^# 大中小发表于 2008-9-23 20:49

8楼的代码不错

TOP

blackpreal

新手上路

帖子: 5
体力: 15
威望: 0
当前: 江苏淮安
离线: 4 天

10^# 大中小发表于 2008-9-23 21:49

我试试a换不换行

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

TOP

blackpreal

新手上路

帖子: 5
体力: 15
威望: 0
当前: 江苏淮安
离线: 4 天

11^# 大中小发表于 2008-9-23 21:52

有问题

IE换行而谷歌不换行

TOP