JQUERY实现背景图渐显(淡入淡出)

普通的CSS Hover最多就换一下背景图,不是很好看~我们利用jquery给它加上一些淡入的效果~ 在这里看到这个例子,我想我还是自己练习一下吧·~效果可以看http://dragoninteractive.com/网站~,挺帅的~

实现原理

通过一个两张不同的图片,两个不同的层重叠在一起,顶层暂时透明,当鼠标移上去时,顶层由透明变成不透明,鼠标离开反之。

准备工作

用PS做一张图~如下图,注意记下高度是多少。我这张图的高度是两个40px的图 下面写代码
html结构:

css代码:

#logo{
		margin:0 auto;
		position:relative;/*相对定位,为了下面hover的绝对定位*/
		background:url(fatkun.png) left top no-repeat;/*设置背景图*/
		width:150px;
		height:40px;/*注意这里高度*/
		display:block;
		text-indent:-9999px;
	}
	#logo .hover{/*为JQ准备*/
		background:url(fatkun.png) left bottom no-repeat;/*background-position和上面不同*/
		position:absolute;/*为了使两张图片重叠在一起*/
		top:0;
		left:0;
		height:40px;
		width:150px;
	}

最后最重要的JQuery代码出现了


我做的例子在这里:http://fatkun.com/demo/jquery-animate-background/ 到学期末了~~考试就要来了~更新减缓·~2010,祝各位朋友新年快乐。

updatedupdated2023-12-062023-12-06