那位高手能破解beta.ninemsn.com.au的特效 [复制链接]

帖子: 192
体力: 610
威望: 0
居住地: 山东省青岛市

发表于 2007-2-8 15:11:31 |显示全部楼层

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

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

http://www.d1media.com

西部数码顶级域名注册商39元抢注！

wqzhu　

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

帖子: 18
体力: 46
威望: 0

发表于 2007-2-8 17:10:44 |显示全部楼层

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

Nicest　

我为JS狂

帖子: 362
体力: 705
威望: 3

发表于 2007-2-8 17:54:18 |显示全部楼层

看了一下,我分析一下:

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

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

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

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

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

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

NewBlog: auntion.blogbus.com

lovelium　

心飘逝

帖子: 1464
体力: 4043
威望: 11
居住地: 广东省深圳市

发表于 2007-2-8 20:01:28 |显示全部楼层

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

无忧团团无忧
三原色 szrgb.net

d1media　楼主

帖子: 192
体力: 610
威望: 0
居住地: 山东省青岛市

发表于 2007-2-9 08:10:57 |显示全部楼层

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

http://www.d1media.com

lovelium　

心飘逝

帖子: 1464
体力: 4043
威望: 11
居住地: 广东省深圳市

发表于 2007-2-9 10:01:00 |显示全部楼层

<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>

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

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

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

无忧团团无忧
三原色 szrgb.net

mickeyboy　

宝疙瘩

帖子: 382
体力: 850
威望: 35
居住地: 山西省太原市

发表于 2007-2-9 10:20:00 |显示全部楼层

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

Extjs,JQuery
ibatis,glassfish
Dream,Eclipse

d1media　楼主

帖子: 192
体力: 610
威望: 0
居住地: 山东省青岛市

发表于 2007-2-9 10:30:35 |显示全部楼层

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

http://www.d1media.com

soli　

习惯寂寞

帖子: 151
体力: 310
威望: 0

发表于 2007-2-9 12:10:13 |显示全部楼层

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

<!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>

<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>

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

d1media　楼主

帖子: 192
体力: 610
威望: 0
居住地: 山东省青岛市

发表于 2007-2-9 13:06:18 |显示全部楼层

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

http://www.d1media.com

d1media　楼主

帖子: 192
体力: 610
威望: 0
居住地: 山东省青岛市

发表于 2007-2-9 13:50:44 |显示全部楼层

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

http://www.d1media.com

hero4u　

孤竹林

帖子: 1305
体力: 3444
威望: 14
居住地: 湖南省长沙市

发表于 2007-2-9 15:04:51 |显示全部楼层

这个效果蛮酷的么

体验游戏 game4power

lovelium　

心飘逝

帖子: 1464
体力: 4043
威望: 11
居住地: 广东省深圳市

发表于 2007-2-9 15:07:16 |显示全部楼层

刚看了一下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;

<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 编辑 ]

无忧团团无忧
三原色 szrgb.net

boooooy　

初级会员

帖子: 140
体力: 143
威望: 0

发表于 2007-2-9 16:09:28 |显示全部楼层

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

runidea2007　

帖子: 177
体力: 701
威望: 0
居住地: 辽宁省大连市

发表于 2007-2-12 10:17:01 |显示全部楼层

这么好的东西一定顶上去

Jiaxin　

初级会员

帖子: 45
体力: 130
威望: 0

发表于 2007-2-22 23:37:22 |显示全部楼层

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

marvellous　

金翅擘海

钻石会员

帖子: 16559
体力: 37158
威望: 143

发表于 2007-2-23 00:58:14 |显示全部楼层

onmouse之后反应速度太慢

<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>

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

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

themy　

血色

帖子: 172
体力: 851
威望: 0

发表于 2007-2-23 03:18:14 |显示全部楼层

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

Eureka ! the nice url

十字花下　

花匠

帖子: 570
体力: 894
威望: 4
居住地: 北京市昌平区

发表于 2007-6-21 09:00:39 |显示全部楼层

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

ITFeed 电商资讯

weiya　

新手上路 

帖子: 10
体力: 35
威望: 0

发表于 2007-6-21 10:30:35 |显示全部楼层

顶了！很棒的效果！

623webmaster　

瑞恩D40

帖子: 196
体力: 579
威望: 0

发表于 2007-6-21 10:41:31 |显示全部楼层

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

｜Ryanli designer

jdoni　

初级会员

帖子: 55
体力: 132
威望: 0

发表于 2007-6-21 11:44:38 |显示全部楼层

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

Madgogo　

帖子: 4
体力: 18
威望: 0

发表于 2007-6-21 11:58:46 |显示全部楼层

恩恩～大家都是高手

pisces2006　

帖子: 15
体力: 26
威望: 0
居住地: 广东省广州市

发表于 2007-6-21 15:22:21 |显示全部楼层

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

Evance　

剑侠狗

钻石会员

帖子: 11580
体力: 7079
威望: 1
居住地: 浙江省杭州市

发表于 2007-6-21 18:25:49 |显示全部楼层

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

不是学
是抄袭..

带着智商说话
布拉格

huqiu2　

帖子: 86
体力: 378
威望: 0

发表于 2007-9-20 11:00:59 |显示全部楼层

的确是个不错的效果~
谢谢上面各位的辛苦~

bbon　

帖子: 176
体力: 709
威望: 0
居住地: 江苏省南京市

发表于 2007-9-20 13:59:03 |显示全部楼层

不错哦

研究下

bbon.cn

chnama　

银牌会员

帖子: 376
体力: 2085
威望: 0

发表于 2007-9-20 14:06:17 |显示全部楼层

这种东西难的是创意,而不是实现的技术

ajax在线翻译
http://www.cq130.net:85/

bestsuke　

帖子: 26
体力: 48
威望: 0
居住地: 浙江省杭州市

发表于 2007-9-20 14:13:00 |显示全部楼层

这个类似于鱼眼（fish eye）的效果。

caiying2007　

荣誉管理

帖子: 2981
体力: 12722
威望: 10

发表于 2007-9-20 22:41:17 |显示全部楼层

有点不舒服:

<!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: 12px; COLOR: #656d77; LINE-HEIGHT: 16px; TEXT-DECORATION: none
	BACKGROUND: #f1f5f6
}
A {
	FONT-SIZE: 12px; COLOR: #656d77; LINE-HEIGHT: 16px; FONT-FAMILY: arial; TEXT-DECORATION: none
}
DIV {
	FONT-SIZE: 12px; COLOR: #656d77; LINE-HEIGHT: 16px; FONT-FAMILY: arial; TEXT-DECORATION: none
}
A:hover {
	COLOR: #f13c01; TEXT-DECORATION: underline
}
#cat_mouse {
	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_mouse .title {
	WIDTH: 100%; PADDING-TOP: 4px
}
#cat_mouse .magnified .title A {
	FONT-WEIGHT: bold; COLOR: #1da4cd
}
#cat_mouse .text {
	DISPLAY: block; WIDTH: 210px
}
#cat_mouse .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_mouse .even {
	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FLOAT: left; MARGIN-BOTTOM: 1px; PADDING-BOTTOM: 5px; WIDTH: 100%; PADDING-TOP: 5px; BACKGROUND-COLOR: #f1f5f6
}
</style>
<META content="MSHTML 6.00.3790.2817" name=GENERATOR></HEAD>
<BODY style="MARGIN: 0px">

<DIV id=cat_mouse>
	<SPAN class=even>
		<SPAN class=image><A href="#"><IMG title="" alt="" src="http://beta.ninemsn.com.au/img/shopping/Television.gif" align=middle border=0></A></SPAN>
		<SPAN class=title><A href="#">大家都会<br>很感兴趣的1</A></SPAN>
		<SPAN class=text>1-鼠标移上变化的效果！</SPAN>
	</SPAN>
			
	<SPAN class=even>
		<SPAN class=image><A href="#"><IMG title="" alt="" src="http://beta.ninemsn.com.au/img/shopping/Beauty.gif" align=middle border=0></A></SPAN>
		<SPAN class=title><A  href="#">大家都会<br>很感兴趣的2</A></SPAN>
		<SPAN class=text>2-鼠标移上变化的效果！</SPAN>
	</SPAN>
	
	<SPAN class=even>
		<SPAN class=image><A href="#"><IMG title="" alt="" src="http://beta.ninemsn.com.au/img/shopping/Kettle.gif" align=middle border=0></A></SPAN>
		<SPAN class=title><A href="#">大家都会<br>很感兴趣的3</A></SPAN>
		<SPAN class=text>3-鼠标移上变化的效果！</SPAN>
	</SPAN>
	
	<SPAN class=even>
		<SPAN class=image><A href="#"><IMG title="" alt="" src="http://beta.ninemsn.com.au/img/shopping/Mobile.gif" align=middle border=0></A></SPAN>
		<SPAN class=title><A href="#">大家都会<br>很感兴趣的4</A></SPAN>
		<SPAN class=text>4-鼠标移上变化的效果！</SPAN>
	</SPAN> 
</DIV>
<script>
var min_height=20;
var max_height=60;

var obj_div=document.getElementById("cat_mouse").childNodes
var obj_now
init()
function init(){
for (var i=0;i<obj_div.length;i++){
	obj_div[i].id="c_m_"+i
	obj_div[i].onmouseover=function(){show_big(this)}
	obj_div[i].childNodes[0].childNodes[0].childNodes[0].style.height=min_height
	obj_div[i].childNodes[4].style.display="none"
	
}
	obj_div[0].childNodes[0].childNodes[0].childNodes[0].style.height=max_height
	obj_div[0].childNodes[4].style.display="block"
}

var t,sw=0
var shoe_sw=obj_div[0].id
function show_big(o){
if (sw==0 && shoe_sw!=o.id){
	
	var obj=o.childNodes[0].childNodes[0].childNodes[0]
	var obj_old=document.getElementById(shoe_sw).childNodes[0].childNodes[0].childNodes[0]
	var h=0;
	sw=1;
	setTimeout (dmove,200)
	function dmove(){
		h+=4; 
		if(h>=(max_height-min_height)){
	document.getElementById(shoe_sw).childNodes[4].style.display="none"
	o.childNodes[4].style.display="block"
			obj.style.height=max_height;
			obj_old.style.height=min_height;
			clearTimeout(t);
			shoe_sw=o.id;
			sw=0
		}
		else{
			obj.style.height=(min_height+h)+'px';
			obj_old.style.height=(max_height+10-h)+'px';
		t=setTimeout(dmove,1);
		}
	}
}
}

</script>

</BODY></HTML>

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