普通的CSS Hover最多就换一下背景图,不是很好看~我们利用jquery给它加上一些淡入的效果~
在这里看到这个例子,我想我还是自己练习一下吧·~效果可以看http://dragoninteractive.com/网站~,挺帅的~
实现原理
通过一个两张不同的图片,两个不同的层重叠在一起,顶层暂时透明,当鼠标移上去时,顶层由透明变成不透明,鼠标离开反之。
准备工作
用PS做一张图~如下图,注意记下高度是多少。我这张图的高度是两个40px的图
下面写代码
html结构:
1 |
|
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代码出现了
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $("#logo").append("<span class='hover'></span>");//添加一个标签用来和灰图重叠起来 $(".hover").css('opacity', 0);//先不显示 $(".hover").parent().hover( function(){ $(".hover").stop().animate({opacity: '1'},1000); }, function(){ $(".hover").stop().animate({opacity: '0'},1000); }); </script>