打印

那位高手能破解beta.ninemsn.com.au的特效

d1media [楼主]

中级会员

帖子: 184
体力: 271
威望: 0
当前: 山东青岛
离线: 7 天

专长 网页设计,Flash,平面

1^# 大中小发表于 2007-2-8 15:11

http://beta.ninemsn.com.au/

那位高手能破解一下这个页面右下脚的“shopping”栏目上的JS+CSS的鼠标移上文字、图片和表格都变化的效果，谢谢！相信大家都会很感兴趣的！

http://www.d1media.com

TOP

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

wqzhu

新手上路

帖子: 18
体力: 41
威望: 0
离线: 352 天

2^# 大中小发表于 2007-2-8 17:10

图片变大了，表格自然也被撑开了！
图片变化是个逐步变大的过渡效果。
其实难度并不是很大的

TOP

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

Nicest

我为JS狂

高级会员

帖子: 361
体力: 705
威望: 3
离线: 3 天

3^# 大中小发表于 2007-2-8 17:54

看了一下,我分析一下:

对于整个框体,即装下这4个标签的div,有个css:超出隐藏

对于图片:是在放大之后也就是onmouseover的时候才是他的正常大小,在onmouseout的时候他是缩小的,你注意看图片的锯齿.还有,注意他的图片是等比例缩放的

对于文字:图片放大是需要一个过程的,也就是隔多少时间触发一个函数,在图片的大小=图片正常大小的时候停止掉这个触发函数的对象. 这个有很多参考,很简单.

注:在删除触发的同时标题变色,并在下面显示出另外的介绍.

当onmouseout的时候,其实就是上面写的过程的反向执行.先隐藏显示的文字-图片缩小-标题文字变色.

其实并不复杂. 至于这个tr或者li变大变小..其实我分析觉得一直都没有给tr或者li一个具体的高度.是根据里面内容高度而改变的,即图片的高度,和上面那位朋友说的一样

NewBlog: auntion.blogbus.com

TOP

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

lovelium

心飘逝

银牌会员

帖子: 1255
体力: 2165
威望: 11
当前: 广东深圳
离线: 6 天

专长 JS,C#,MSSQL

4^# 大中小发表于 2007-2-8 20:01

有时间试着写写代码！！哈哈。看看能不能搞定来咯

心飘逝 http://www.szrgb.net

TOP

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

d1media [楼主]

中级会员

帖子: 184
体力: 271
威望: 0
当前: 山东青岛
离线: 7 天

专长 网页设计,Flash,平面

5^# 大中小发表于 2007-2-9 08:10

希望大侠们能做个demo，供大家学习一下啊！多谢了！

http://www.d1media.com

TOP

lovelium

心飘逝

银牌会员

帖子: 1255
体力: 2165
威望: 11
当前: 广东深圳
离线: 6 天

专长 JS,C#,MSSQL

6^# 大中小发表于 2007-2-9 10:01

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
function   showposs(id)
  {
  if ( document.getElementById("image"+id).width<70){
      document.getElementById("image"+id).width=document.getElementById("image"+id).width+8;
      document.getElementById("image"+id).height=document.getElementById("image"+id).height+8;
  }
  }
function   showpos(id)
  {
  setTimeout("showposs('"+id+"')",80)
  }
function   showposji(id)
  {
  setTimeout("showpossmall('"+id+"')",100)
  }
function   showpossmall(id)
  {
  if ( document.getElementById("image"+id).width>40){
      document.getElementById("image"+id).width=document.getElementById("image"+id).width-8;
      document.getElementById("image"+id).height=document.getElementById("image"+id).height-8;
  }
  }
function guitag(id)
{
 for(var i=1;i<=5;i++)
 {
  if(i==id)
  {
  showpos(i)
  }
  else
  {
   if(i==5 || i==(id-1))
   {
    showpossmall(i)
   }
   else
   {
    showpossmall(i)
   }
  }
 }
}
</script>
</head>
<body>
<table width="300"  border="0" cellspacing="0" cellpadding="0">
  <tr onMouseMove="guitag(1)">
    <td height="23" align="center" bgcolor="#0099FF"><a href="http://www.cps800.com"><img src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="31" height="30" hspace="5" vspace="5" border="0" id="image1"></a></td>
    <td width="251" bgcolor="#0099FF">哈哈哈密瓜俣</td>
  </tr>
  <tr onMouseMove="guitag(2)">
    <td height="23" align="center" bgcolor="#00CCFF"><a href="http://www.cps800.com"><img src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="31" height="30" hspace="5" vspace="5" border="0" id="image2"></a></td>
    <td height="23" bgcolor="#00CCFF" >哈哈哈密瓜俣</td>
  </tr>
  <tr onMouseMove="guitag(3)">
    <td height="23" align="center" bgcolor="#0099FF"><a href="http://www.cps800.com"><img src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="31" height="30" hspace="5" vspace="5" border="0" id="image3"></a></td>
    <td height="23" bgcolor="#0099FF">哈哈哈密瓜俣</td>
  </tr>
  <tr onMouseMove="guitag(4)">
    <td height="23" align="center" bgcolor="#00CCFF"><a href="http://www.cps800.com"><img src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="31" height="30" hspace="5" vspace="5" border="0" id="image4"></a></td>
    <td height="23" bgcolor="#00CCFF">哈哈哈密瓜俣</td>
  </tr>
</table>
</body>
</html>

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

-----------------------------------------------------------------------------------------------------------------------------------
上班啦。随便搞了个。还是不理想，主要是触发延时那段不好。有时间再整整，哪位高手也帮帮改改！

-----------------------------------------------------------------------------------------------------------------------------------
唉。本周日也要上班，辛苦呀！

心飘逝 http://www.szrgb.net

TOP

mickeyboy

宝疙瘩

高级会员

帖子: 382
体力: 843
威望: 35
当前: 山西太原
离线: 15 天

专长 JS,JAVA,MySQL

7^# 大中小发表于 2007-2-9 10:20

这也不难啊？tab行为的变种。

无限级算法thread-2780498-1-6.html 2780498-1-1.html

TOP

d1media [楼主]

中级会员

帖子: 184
体力: 271
威望: 0
当前: 山东青岛
离线: 7 天

专长 网页设计,Flash,平面

8^# 大中小发表于 2007-2-9 10:30

lovelium 这个基本实现了，延迟和细节要是再精致一些就ok了！有时间改改吧！呵呵！这个周末我也要上班啊！苦啊！

http://www.d1media.com

TOP

soli

习惯寂寞

中级会员

帖子: 152
体力: 303
威望: 0
当前: 北京东城区
离线: 88 天

专长 主编,项目管理

9^# 大中小发表于 2007-2-9 12:10

抠出来给大家玩玩。
没太多时间弄，楼主来整理一下吧：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META http-equiv=expires content=0>
<META http-equiv=keywords 
content="blueidea">
<META http-equiv=description 
content="blueidea">
<style type="text/css">
BODY {
	FONT-SIZE: 11px; COLOR: #656d77; LINE-HEIGHT: 16px; FONT-FAMILY: arial; TEXT-DECORATION: none
}
TD {
	FONT-SIZE: 11px; COLOR: #656d77; LINE-HEIGHT: 16px; FONT-FAMILY: arial; TEXT-DECORATION: none
}
INPUT {
	FONT-SIZE: 11px; COLOR: #656d77; LINE-HEIGHT: 16px; FONT-FAMILY: arial; TEXT-DECORATION: none
}
SELECT {
	FONT-SIZE: 11px; COLOR: #656d77; LINE-HEIGHT: 16px; FONT-FAMILY: arial; TEXT-DECORATION: none
}
TEXTAREA {
	FONT-SIZE: 11px; COLOR: #656d77; LINE-HEIGHT: 16px; FONT-FAMILY: arial; TEXT-DECORATION: none
}
A {
	FONT-SIZE: 11px; COLOR: #656d77; LINE-HEIGHT: 16px; FONT-FAMILY: arial; TEXT-DECORATION: none
}
DIV {
	FONT-SIZE: 11px; COLOR: #656d77; LINE-HEIGHT: 16px; FONT-FAMILY: arial; TEXT-DECORATION: none
}
BODY {
	BACKGROUND: #f1f5f6
}
BODY {
	FONT-SIZE: 11px; COLOR: #656d77; FONT-FAMILY: arial; TEXT-DECORATION: none
}
LI {
	LIST-STYLE-IMAGE: url(/img/bullet.gif)
}
UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 4px 0px 0px 17px; TEXT-INDENT: 0px; LINE-HEIGHT: 12px; PADDING-TOP: 0px
}
UL LI A {
	FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #656d77
}
UL LI A:hover {
	COLOR: #f13c01; TEXT-DECORATION: underline
}
A:hover {
	COLOR: #f13c01; TEXT-DECORATION: underline
}
.blue:hover {
	COLOR: #1da4cd; TEXT-DECORATION: none
}
.blue {
	COLOR: #1da4cd; TEXT-DECORATION: none
}
B A {
	COLOR: #1da4cd; TEXT-DECORATION: none
}
B A:hover {
	TEXT-DECORATION: underline
}
OL {
	MARGIN: 0px 0px 0px 25px
}
#cat_hl_13154 {
	BORDER-RIGHT: #e9e9e9 1px solid; BORDER-TOP: #e9e9e9 1px solid; OVERFLOW: hidden; BORDER-LEFT: #e9e9e9 1px solid; WIDTH: 292px; BORDER-BOTTOM: #e9e9e9 1px solid; POSITION: relative; TOP: 31px; HEIGHT: 201px
}
#cat_hl_15857 {
	BORDER-RIGHT: #e9e9e9 1px solid; BORDER-TOP: #e9e9e9 1px solid; OVERFLOW: hidden; BORDER-LEFT: #e9e9e9 1px solid; WIDTH: 292px; BORDER-BOTTOM: #e9e9e9 1px solid; POSITION: relative; TOP: 31px; HEIGHT: 201px
}
#cat_hl_13154 .title {
	WIDTH: 100%; PADDING-TOP: 4px
}
#cat_hl_13154 .magnified .title A {
	FONT-WEIGHT: bold; COLOR: #1da4cd
}
#cat_hl_13154 .text {
	DISPLAY: block; WIDTH: 210px
}
#cat_hl_13154 .image {
	BORDER-RIGHT: #e9e9e9 1px solid; BORDER-TOP: #e9e9e9 1px solid; FLOAT: left; BACKGROUND-IMAGE: url(/img/home/dotted_box_bg.gif); BORDER-LEFT: #e9e9e9 1px solid; MARGIN-RIGHT: 10px; BORDER-BOTTOM: #e9e9e9 1px solid
}
#cat_hl_13154 .odd {
	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FLOAT: left; MARGIN-BOTTOM: 1px; PADDING-BOTTOM: 5px; WIDTH: 100%; PADDING-TOP: 5px; BACKGROUND-COLOR: #f1f5f6
}
#cat_hl_13154 .even {
	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FLOAT: left; MARGIN-BOTTOM: 1px; PADDING-BOTTOM: 5px; WIDTH: 100%; PADDING-TOP: 5px; BACKGROUND-COLOR: #f1f5f6
}
</style>
<SCRIPT type=text/javascript>
function createNamespace(str)
{
    var a = str.split(".");
    var o = window;
    for(var i=0; i < a.length; i++)
    {
        if(!o[a[i]])
            o[a[i]] = {};
            
        o = o[a[i]];
    }
}
var isMoz=(typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined');
var isSaf= navigator.userAgent.toLowerCase().indexOf("safari") != -1;
var isIE = !isMoz && !isSaf;
createNamespace("NH");
createNamespace("NH.Anim");
createNamespace("NH.Util");
NH.closeOtherBlinds = function(currentElem, blindElems)
{
	for(var i = 0; i < blindElems.length; i++)
	{
		var blindElem = blindElems[i];
		if(blindElem != currentElem && blindElem.isOpen)
			blindElem.doBlind();
	}
}
NH.Anim.Blind = function(animElem, clickElem, isOpen)
{
	if(!animElem || !clickElem)
		return false;
		
	this.animElem = animElem;
	this.clickElem = clickElem;
	this.fnc = undefined; 
	this.animSpeed = 10; 
	this.isAnimating = false;
	if(this.clickElem.style && typeof(this.clickElem.style.cursor) == "string")
		this.clickElem.style.cursor = "pointer";
	this.hiddenDiv = undefined;
	
	NH.Util.attachEvent(this.clickElem, "onmouseup", NH.Util.createThisCallback(this, "doBlind", false));
	
	var parent = this.animElem.parentNode;
	this.hiddenDiv = parent.insertBefore(document.createElement("div"), this.animElem);
	
	parent.removeChild(this.animElem);
	this.hiddenDiv.appendChild(this.animElem);
	this.animElem.style.display = (this.isOpen) ? "block" : "none";
	this.hiddenDiv.style.overflow = "hidden";
	
	setInterval(NH.Util.createThisCallback(this, "doBlind", true), 100);
	
	this.doBlind = function(intervalCheck)
	{
		if(this.isAnimating || (intervalCheck && this.hiddenDiv.offsetHeight == this.animElem.offsetHeight))
			return false;
		this.isAnimating = true;
		var targetHeight;
		if(!intervalCheck)
		{
			if(this.fnc)
				this.fnc();
			NH.Util.swapClassName(this.animElem, "blind-on", "blind-off");
			NH.Util.swapClassName(this.clickElem, "blind-on", "blind-off");
			this.animElem.style.display = "block";
			this.hiddenDiv.style.height = this.isOpen ? this.animElem.offsetHeight : "0px";
			if(!this.hiddenDiv.style.width)
				this.hiddenDiv.style.width = this.animElem.offsetWidth;
			if(this.isOpen)
				targetHeight = 0
			else
				targetHeight = this.animElem.offsetHeight;
		}
		else
			targetHeight = this.animElem.offsetHeight;
		NH.Anim.sizeAnimation(this.hiddenDiv, this.hiddenDiv.offsetWidth, targetHeight, this.animSpeed, NH.Util.createThisCallback(this, "finishBlind", intervalCheck));
	}
	this.finishBlind = function(intervalCheck)
	{
		this.isAnimating = false;
		if(intervalCheck)
			return false;
		
		if(this.isOpen)
		{
			this.animElem.style.display = "none";
			this.isOpen = false;
		}
		else
			this.isOpen = true;
	}
	
	this.setIsOpen = function(isOpen)
	{
		this.isOpen = isOpen;
		
		if(this.animElem.className.match("blind-on") ||
			this.animElem.className.match("blind-off") ||
			this.clickElem.className.match("blind-on") ||
			this.clickElem.className.match("blind-off"))
		{
			NH.Util.removeClassName(this.animElem, "blind-on");
			NH.Util.removeClassName(this.animElem, "blind-off");
			NH.Util.removeClassName(this.clickElem, "blind-on");
			NH.Util.removeClassName(this.clickElem, "blind-off");
		}
		var className = isOpen ? "blind-on" : "blind-off";
		NH.Util.addClassName(this.animElem, className);
		NH.Util.addClassName(this.clickElem, className);
		
		this.animElem.style.display = (isOpen) ? "block" : "none";
	}
	
	this.setIsOpen(isOpen);
}
NH.Anim.Magnify = function(container, img, text, isMagnified)
{
	if(!container || !img || !text)
		return false;
	
	this.container = container;
	this.img = img;
	this.text = text;
	this.fnc = undefined; 
	this.animSpeed = 3; 
	
	this.isOpen = false;
	this.isMagnifying = false;
	this.isMinifying = false;
	this.originalImgWidth = parseInt(this.img.offsetWidth);
	this.originalImgHeight = parseInt(this.img.offsetHeight);
	
	NH.Util.attachEvent(this.container, "onmouseover", NH.Util.createThisCallback(this, "doMagnify"));
	
	this.init = function(isMagnified)
	{
		if(isMagnified)
		{
			this.isOpen = true;
			NH.Util.addClassName(this.container, "magnified");
		}
		else
		{
			this.img.style.width = (this.originalImgWidth / 2) + "px";
			this.img.style.height = (this.originalImgHeight / 2) + "px";
			this.text.style.display = "none";
			NH.Util.addClassName(this.container, "minified");
		}
	}
	this.init(isMagnified);
	
	this.doMagnify = function()
	{
		if(this.isOpen || this.isMagnifying)
			return false;
		
		this.isMagnifying = true;
		NH.Util.swapClassName(this.container, "magnified", "minified");
		NH.Anim.sizeAnimation(this.img, this.originalImgWidth, this.originalImgHeight, this.animSpeed, NH.Util.createThisCallback(this, "finishMagnify"));
		if(this.fnc)
			this.fnc.call();
	}
	
	this.finishMagnify = function()
	{
		this.isOpen = true;
		this.isMagnifying = false;
		this.text.style.display = "block";
		if(this.fnc)
			this.fnc.call();
	}
	
	this.doMinify = function()
	{
		if(!this.isOpen || this.isMinifying)
			return false;
		
		this.isMinifying = true;
		NH.Util.swapClassName(this.container, "magnified", "minified");
		
		NH.Anim.sizeAnimation(this.img, (this.originalImgWidth / 2), (this.originalImgHeight / 2), this.animSpeed, NH.Util.createThisCallback(this, "finishMinify"));
		this.text.style.display = "none";
	}
	this.finishMinify = function()
	{
		this.isOpen = false;
		this.isMinifying = false;
	}
}
NH.closeOtherMags = function(currentElem, magElems)
{
	for(var i = 0; i < magElems.length; i++)
	{
		var magElem = magElems[i];
		if(magElem != currentElem)
			magElem.doMinify();
	}
}
NH.Util.swapClassName = function(elem, style1, style2)
{
	if(!elem)
		return false;
	
	if(elem.className.match(style2))
	{
		NH.Util.removeClassName(elem, style2);
		NH.Util.addClassName(elem, style1);
	}
	else
	{
		NH.Util.removeClassName(elem, style1);
		NH.Util.addClassName(elem, style2);
	}
}
NH.Util.attachEvent = function(elem, evt, fnc)
{
	if(!elem)
		return false;
	
	if (!isIE)
	{
		if (evt.substr(0,2).toLowerCase() == "on")
			evt = evt.substr(2);
		elem.addEventListener(evt, fnc, false); 
	}
	else
		elem.attachEvent(evt, fnc);
}
NH.Anim.sizeAnimation = function(el, cx, cy, speed, fncComplete)
{
	var ptCur		= {x: NH.Anim.GetWidth(el), y: el.clientHeight};
	var ptTarg		= {x: cx, y: cy };
	
	function fncSize(x,y,i,c)
	{
		el.style.width	= x + "px";
		el.style.height = y + "px";
	}
	var dist = Math.max(Math.abs(ptTarg.x - ptCur.x), Math.abs(ptTarg.y - ptCur.y));
	
	new NH.Anim.translateAnimation(ptCur.x, ptCur.y, ptTarg.x, ptTarg.y, (speed) ? speed : 5, fncSize, fncComplete);
};
NH.Anim.translateAnimation = function(x1, y1, x2, y2, speed, fncMove, fncComplete)
{
	var idTimer;
	var path = NH.Anim.calcLinearPath(x1, y1, x2, y2, speed ? speed : 5);
		
	var iCur	= 0;
	
	this.moveElement = function()
	{
		var pt = path[iCur++];
		
		if(pt)
			fncMove(pt.x, pt.y, iCur, path.length);
		
		if (iCur >= path.length)
		{
			clearInterval(idTimer);
			
			if (fncComplete)
				fncComplete();
		}
	};
	
	idTimer = setInterval(NH.Util.createThisCallback(this, "moveElement"), 10);
};
NH.Anim.calcLinearPath = function(x1, y1, x2, y2, stepsize)
{
	var dist	= Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
	var steps	= dist / stepsize;
	
	var dx			= (x2 - x1) / steps;
	var dy			= (y2 - y1) / steps;
	
	var path=[];
	for(var i=0; i <= steps; i++)
	{
		path[i] = {x:x1, y:y1};
		
		x1 += dx;
		y1 += dy;
	}
	
	path[path.length] = {x:x2, y:y2};
	
	return path;
}
NH.Anim.GetWidth = function(el)
{
	return (el.clientWidth == undefined || el.clientWidth == 0) ? el.style.pixelWidth : el.clientWidth;
};
NH.Util.createCallback = function(fncName)
{
	var objects = fncName.split(".");
	var obj = window;
	for(var i = 0; i < objects.length; i++)
		obj = obj[objects[i]];
	
	var args = [];
	for(var i=1; i < arguments.length; i++)
	{
		args.push(arguments[i]);
	}
	
	return function()
	{
		var additionalArgs = [];
		for(var i=0; i < args.length; i++)
			additionalArgs.push(args[i]);
		
		for(var i=0; i < arguments.length; i++)
			additionalArgs.push(arguments[i]);
		if(obj)
			return obj.apply(undefined, additionalArgs);
	};
}
NH.Util.createThisCallback = function(obj, strFunc)
{
	var temp = obj;
	var args = [];
	for(var i=2; i < arguments.length; i++)
		args.push(arguments[i]);
		
	return function()
	{
		var additionalArgs = [];
		for(var i=0; i < args.length; i++)
			additionalArgs.push(args[i]);
		
		// Add args we were passed onto the end
		for(var i=0; i < arguments.length; i++)
			additionalArgs.push(arguments[i]);
		
		if (temp[strFunc])
			return temp[strFunc].apply(obj, additionalArgs);
	};
};
NH.Util.preventDefault = function(e)
{
	var event;
	var e = e || event;
	if(e && e.preventDefault)
	{
		e.stopPropagation();
		e.preventDefault();
	}
	else if(e)
		e.returnValue = false;
	return false;
};
NH.Util.preventInputSubmit = function(e)
{
	var event;
	var e = e || event;
	var code = e.which || e.keyCode;
	if (code == '13')
	{
		return NH.Util.preventDefault(e);
	}
};
String.prototype.truncate = function(num)
{
	if(this.length > num + 3)
		return this.substring(0, num) + "...";
	else
		return this;
}
//adds a class name ot an element without removing any that exist.
NH.Util.addClassName = function(elem, name)
{
	if(!elem)
		return false;
		
	if(!elem.className.match(name))
	{
		if(elem.className.length == 0)
			elem.className = name;
		else
			elem.className += " " + name;
	}
}
//removes a class name ot an element without removing any that exist.
NH.Util.removeClassName = function(elem, name)
{
	if(!elem)
		return false;
		
	if(elem.className.match(name))
	{
		if(elem.className == name)
			elem.className = "";
		else
			elem.className = elem.className.replace(" " + name, "");
	}
}
//shows loading for an element
NH.Anim.showLoading = function(elem)
{
	if(!elem)
		return false;
	
	//debugger;
	var width	= elem.offsetWidth;
	var height	= elem.offsetHeight;
	height -= 20;
	if (height < 30)
		height = 30;
	//var newE = elem.appendChild(document.createElement("div"));
	//newE.innerHTML = "LOADING";
	elem.innerHTML = "<div style='width:" + width + "px;height:" + height + "px;padding:10px;'><img src='/share/img/al1.gif' alt='Loading' width='16' height='16' /> Loading...</div>";
}
</SCRIPT>
<SCRIPT type=text/javascript>
function init_shoppingAnim()
{
	 var hl = document.getElementById("cat_hl_13154");
	 if(hl)
	 {
		 var spans = hl.getElementsByTagName("span");
		 var arr = [];
		 for(var i = 0; i < spans.length; i++)
		 {
			var span = spans[i];
			if(span.className != "odd" && span.className != "even")
				continue;
			
			var inner = span.getElementsByTagName("span");
			for(var j = 0; j < inner.length; j++)
			{
				var ispan = inner[j];
				if(ispan.className == "text")
					var text = ispan;
				if(ispan.className == "image")
				{
					var img = ispan.getElementsByTagName("img")[0];
				}
			}
			
			arr.push(new NH.Anim.Magnify(span, img, text, (i==0)));
		 }
		 for(var i = 0; i < arr.length; i++)
		 {
			arr[i].fnc = NH.Util.createCallback("NH.closeOtherMags", arr[i], arr);
		 }
	 }
}
</SCRIPT>
<META content="MSHTML 6.00.3790.2817" name=GENERATOR></HEAD>
<BODY style="MARGIN: 0px">
<SCRIPT type=text/javascript>
 if(typeof(init_shoppingAnim) == "function")
  NH.Util.attachEvent(window, "onload", init_shoppingAnim); //Needed to overcome a timing issue
</SCRIPT>
<NOSCRIPT><IMG height=1 alt="" src="http://beta.ninemsn.com.au/img/shopping/0.gif" width=1 
border=0> </NOSCRIPT>
      <DIV id=cat_hl_13154><SPAN class=odd><SPAN class=image><A 
onclick="AdTrack.t(this,'HL_NH_SHP_TAB1','1')" 
href="#"><IMG 
title=Televisions alt=Televisions src="http://beta.ninemsn.com.au/img/shopping/Television.gif" 
align=middle border=0></A></SPAN><SPAN class=title><A 
onclick="AdTrack.t(this,'HL_NH_SHP_TAB1','2')" 
href="#">Brand new 
  televisions</A></SPAN><SPAN class=text>Sensational range of new televisions 
    including plasma and LCD</SPAN></SPAN><SPAN class=even><SPAN class=image><A 
onclick="AdTrack.t(this,'HL_NH_SHP_TAB1','3')" 
href="#"><IMG 
title=Clinique alt=Clinique src="http://beta.ninemsn.com.au/img/shopping/Beauty.gif" align=middle 
border=0></A></SPAN><SPAN class=title><A 
onclick="AdTrack.t(this,'HL_NH_SHP_TAB1','4')" 
href="#">Clinique 
      beauty</A></SPAN><SPAN class=text>Stock-up on all your essential Clinique beauty 
        items today</SPAN></SPAN><SPAN class=odd><SPAN class=image><A 
onclick="AdTrack.t(this,'HL_NH_SHP_TAB1','5')" 
href="#"><IMG 
title="Kitchen appliances" alt="Kitchen appliances" 
src="http://beta.ninemsn.com.au/img/shopping/Kettle.gif" align=middle border=0></A></SPAN><SPAN 
class=title><A onClick="AdTrack.t(this,'HL_NH_SHP_TAB1','6')" 
href="#">Kitchen 
          appliances</A></SPAN><SPAN class=text>Find all your favourite kitchen appliances 
            at great prices</SPAN></SPAN><SPAN class=even><SPAN class=image><A 
onclick="AdTrack.t(this,'HL_NH_SHP_TAB1','7')" 
href="#"><IMG 
title="Nokia mobile phones" alt="Nokia mobile phones" 
src="http://beta.ninemsn.com.au/img/shopping/Mobile.gif" align=middle border=0></A></SPAN><SPAN 
class=title><A onClick="AdTrack.t(this,'HL_NH_SHP_TAB1','8')" 
href="#">Nokia 
              mobile phones</A></SPAN><SPAN class=text>Need a new mobile? Great selection of 
                Nokia's right here</SPAN></SPAN> </DIV>
<p>&nbsp;</p>
</BODY></HTML>

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

TOP

d1media [楼主]

中级会员

帖子: 184
体力: 271
威望: 0
当前: 山东青岛
离线: 7 天

专长 网页设计,Flash,平面

10^# 大中小发表于 2007-2-9 13:06

多谢楼上的，我研究一下先！

http://www.d1media.com

TOP

d1media [楼主]

中级会员

帖子: 184
体力: 271
威望: 0
当前: 山东青岛
离线: 7 天

专长 网页设计,Flash,平面

11^# 大中小发表于 2007-2-9 13:50

研究完毕，一切都已经明白了也整理好了！多谢几位了，特别是soli！呵呵！

http://www.d1media.com

TOP

hero4u

孤竹林

银牌会员

帖子: 1305
体力: 2437
威望: 14
当前: 湖南长沙
离线: 42 天

专长 前端制作,搜索,推广

12^# 大中小发表于 2007-2-9 15:04

这个效果蛮酷的么

体验游戏 game4power

TOP

lovelium

心飘逝

银牌会员

帖子: 1255
体力: 2165
威望: 11
当前: 广东深圳
离线: 6 天

专长 JS,C#,MSSQL

13^# 大中小发表于 2007-2-9 15:07

刚看了一下soli扣得。也看了看。不过我心中还是有自己的想法。就做了个。但是还是有问题。
希望高手帮我改改。告诉是什么问题。对于脚本还是初学。希望得到高手指点。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
  var oldWidth=31;//图小时的宽
  var oldHeight=30;//图小时的商
  var img_height=80;//此值为变大后的高
  var img_width=80;//此值为变大后的宽
  var speed=5;        //图一次变大的值
  var timerch=3;  //图多长时间变化一次
  var okch; 
 function  timer(id){
 if (document.getElementById("image"+id).width<img_height){
  okch=setInterval("image_test('"+id+"')",timerch);
  }
 }
 function  timer2(id){
 if (document.getElementById("image"+id).width>oldWidth){
  okch=setInterval("image_def('"+id+"')",timerch);
  }
 }
 function image_test(id){
 if (document.getElementById("image"+id).width<img_width){
  document.getElementById("image"+id).width=document.getElementById("image"+id).width+speed;
  document.getElementById("image"+id).height=document.getElementById("image"+id).height+speed;
  }
  else{
   clearInterval(okch)
   document.getElementById("td"+id).style.display=""
  }
 }
  function image_def(id){
  if (document.getElementById("image"+id).width>oldWidth){
     document.getElementById("td"+id).style.display="none"
  document.getElementById("image"+id).width=document.getElementById("image"+id).width-speed;
  document.getElementById("image"+id).height=document.getElementById("image"+id).height-speed;
  }
  else{
   clearInterval(okch)
  }
 }
</script>
<style type="text/css">

</style>
</head>
<body>
<table width="300"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="23" align="center" bgcolor="#0099FF"><a href="http://www.cps800.com"><img src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="30" height="30" hspace="5" vspace="5" border="0" id="image1"></a></td>
    <td width="251" bgcolor="#0099FF" class="ft12px" onMouseOver="timer(1)" onMouseOut="timer2(1)">哈哈哈密瓜哈哈哈密瓜哈哈哈密瓜<br>
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="td1" style="display:none ">
        <tr>
          <td>第一个显示的</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="23" align="center" bgcolor="#00CCFF"><a href="http://www.cps800.com"><img src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="31" height="30" hspace="5" vspace="5" border="0" id="image2"></a></td>
    <td height="23" bgcolor="#00CCFF" class="ft12px"  onMouseOver="timer(2)" onMouseOut="timer2(2)">哈哈哈密瓜哈哈哈密瓜哈哈哈密瓜<br>
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="td2" style="display:none ">
        <tr>
          <td>第二个显示的</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="23" align="center" bgcolor="#0099FF"><a href="http://www.cps800.com"><img src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="31" height="30" hspace="5" vspace="5" border="0" id="image3"></a></td>
    <td height="23" bgcolor="#0099FF" class="ft12px" onMouseOver="timer(3)" onMouseOut="timer2(3)">哈哈哈密瓜哈哈哈密瓜哈哈哈密瓜<br>
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="td3" style="display:none ">
        <tr>
          <td>第三个显示的</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="23" align="center" bgcolor="#00CCFF"><a href="http://www.cps800.com"><img src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="31" height="30" hspace="5" vspace="5" border="0" id="image4"></a></td>
    <td height="23" bgcolor="#00CCFF" class="ft12px" onMouseOver="timer(4)" onMouseOut="timer2(4)">哈哈哈密瓜v哈哈哈密瓜<br>
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="td4" style="display:none ">
        <tr>
          <td>第四个显示的</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

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

-----------------------------------------------------------------------------------------------------------
啊。忘记说是哪里的问题了。主要是当鼠标滑向下个TD时就出问题。如果横向滑到外面就没事。是不是ID的问题。恳请高手指点！

[ 本帖最后由 lovelium 于 2007-2-9 15:09 编辑 ]

心飘逝 http://www.szrgb.net

TOP

boooooy

初级会员

帖子: 142
体力: 138
威望: 0
离线: 84 天

14^# 大中小发表于 2007-2-9 16:09

那位高手在顺便看看它网站另一个地方的效果怎么弄得？

TOP

runidea2007

中级会员

帖子: 172
体力: 326
威望: 0
当前: 辽宁大连
离线: 146 天

15^# 大中小发表于 2007-2-12 10:17

这么好的东西一定顶上去

TOP

Jiaxin

初级会员

帖子: 45
体力: 75
威望: 0
离线: 54 天

16^# 大中小发表于 2007-2-22 23:37

很酷的效果，经常这种效果一般都用Flash。

TOP

marvellous

金翅擘海

荣誉管理团队

帖子: 11748
体力: 26864
威望: 140
当前: 北京朝阳区

17^# 大中小发表于 2007-2-23 00:58

onmouse之后反应速度太慢

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
  var oldWidth=31;//图小时的宽
  var oldHeight=30;//图小时的商
  var img_height=80;//此值为变大后的高
  var img_width=80;//此值为变大后的宽
  var speed=5;        //图一次变大的值
  var timerch=1;  //图多长时间变化一次
  var okch; 
 function  timer(id){
 if (document.getElementById("image"+id).width<img_height){
  okch=setInterval("image_test('"+id+"')",timerch);
  }
 }
 function  timer2(id){
 if (document.getElementById("image"+id).width>oldWidth){
  okch=setInterval("image_def('"+id+"')",timerch);
  }
 }
 function image_test(id){
 if (document.getElementById("image"+id).width<img_width){
  document.getElementById("image"+id).width=document.getElementById("image"+id).width+speed;
  document.getElementById("image"+id).height=document.getElementById("image"+id).height+speed;
  }
  else{
   clearInterval(okch)
   document.getElementById("td"+id).style.display=""
  }
 }
  function image_def(id){
  if (document.getElementById("image"+id).width>oldWidth){
     document.getElementById("td"+id).style.display="none"
  document.getElementById("image"+id).width=document.getElementById("image"+id).width-speed;
  document.getElementById("image"+id).height=document.getElementById("image"+id).height-speed;
  }
  else{
   clearInterval(okch)
  }
 }
</script>
<style type="text/css">

</style>
</head>
<body style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=blue,endColorStr=white);">
<table width="300"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="23" align="center" bgcolor="#0099FF" style="filter:progid:DXImageTransform.microsoft.gradient
(gradienttype=1,startColorStr=brown,endColorStr=white);"><a href="http://www.cps800.com"><img 
src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="30" height="30" hspace="5" vspace="5" border="0" 
id="image1"></a></td>
    <td width="251" bgcolor="#0099FF" class="ft12px" onMouseOver="timer(1)" onMouseOut="timer2(1)" 
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=pink);">人生本无意义
，我是女人。<br>
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="td1" style="display:none ">
        <tr>
          <td>第一个显示的</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="23" align="center" bgcolor="#00CCFF" style="filter:progid:DXImageTransform.microsoft.gradient
(gradienttype=1,startColorStr=deeppink,endColorStr=white);"><a href="http://www.cps800.com"><img 
src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="31" height="30" hspace="5" vspace="5" border="0" 
id="image2"></a></td>
    <td height="23" bgcolor="#00CCFF" class="ft12px"  onMouseOver="timer(2)" onMouseOut="timer2(2)" 
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=gold);">唯见长江天际
流<br>
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="td2" style="display:none ">
        <tr>
          <td>第二个显示的</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="23" align="center" bgcolor="#0099FF" style="filter:progid:DXImageTransform.microsoft.gradient
(gradienttype=1,startColorStr=green,endColorStr=white);"><a href="http://www.cps800.com"><img 
src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="31" height="30" hspace="5" vspace="5" border="0" 
id="image3"></a></td>
    <td height="23" bgcolor="#0099FF" class="ft12px" onMouseOver="timer(3)" onMouseOut="timer2(3)" 
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=blue);">大约在那个啥
<br>
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="td3" style="display:none ">
        <tr>
          <td>第三个显示的</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="23" align="center" bgcolor="#00CCFF" style="filter:progid:DXImageTransform.microsoft.gradient
(gradienttype=1,startColorStr=pink,endColorStr=white);"><a href="http://www.cps800.com"><img 
src="http://www.cps800.com/subject/summary/image/sumbanner.gif" width="31" height="30" hspace="5" vspace="5" border="0" 
id="image4"></a></td>
    <td height="23" bgcolor="#00CCFF" class="ft12px" onMouseOver="timer(4)" onMouseOut="timer2(4)" 
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=skyblue);">健康上网忠
告：适度上网益脑，沉迷网络伤身；合理安排时间，享受健康生活。<br>
      <table width="100%"  border="0" cellpadding="0" cellspacing="0" id="td4" style="display:none ">
        <tr>
          <td>第四个显示的</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

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

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

themy

血色

中级会员

帖子: 146
体力: 375
威望: 0
离线: 4 天

专长 UE,策划

18^# 大中小发表于 2007-2-23 03:18

楼主给出的这个网页还有很多东西值得学习呢，像顶部的菜单。。感谢

Eureka ! the nice url

TOP

十字花下

花匠

中级会员

帖子: 447
体力: 329
威望: 4
当前: 北京海淀区
离线: 1 天

专长 JS,UE,产品设计

19^# 大中小发表于 2007-6-21 09:00

原来SupeSite的softsea模版就是学的这个网站，hoho

花匠

TOP

weiya

新手上路

帖子: 10
体力: 30
威望: 0
离线: 72 天

20^# 大中小发表于 2007-6-21 10:30

顶了！很棒的效果！

TOP

623webmaster

瑞恩D40

中级会员

帖子: 195
体力: 364
威望: 0
离线: 8 天

21^# 大中小发表于 2007-6-21 10:41

marvellous
貌似不光是时间延迟这么点问题吧，抖得我厉害

｜Ryanli designer

TOP

jdoni

初级会员

帖子: 54
体力: 124
威望: 0
离线: 10 天

22^# 大中小发表于 2007-6-21 11:44

呵呵，原来以为没有效果。几分钟以后狂抖，晕了。

TOP

Madgogo

新手上路

帖子: 4
体力: 13
威望: 0
离线: 502 天

23^# 大中小发表于 2007-6-21 11:58

恩恩～大家都是高手

TOP

pisces2006

新手上路

帖子: 15
体力: 21
威望: 0
当前: 广东广州
离线: 333 天

24^# 大中小发表于 2007-6-21 15:22

TD抖得太厉害了！还是DIV正常一点！呵呵

TOP

Evance

剑侠狗

金牌会员

帖子: 5902
体力: 3276
威望: 0
当前: 浙江杭州
离线: 1 天

25^# 大中小发表于 2007-6-21 18:25

引用:

原帖由 十字花下 于 2007-6-21 09:00 发表
原来SupeSite的softsea模版就是学的这个网站，hoho

不是学
是抄袭..

我曾经得过精神分裂症，但现在我们已经康复了。