屏幕左上角的标志如何随着鼠标滑过而逐渐改变颜色?我认为它是用 jquery 完成的。如果您不知道代码,您能给我指点可以的教程吗?谢谢。
http://www.shopdev.co.uk/blog/ http://www.shopdev.co.uk/blog/
更新:
谢谢大家,我已经发布了下面代码的工作版本,
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// load the logo transition
$("#logo span").css("opacity","0");
$("#logo span").css("display","block");
// logo animation
$("#logo").hover(function() {
$("#logo span").stop().animate({opacity:1},'slow');
}, function() {
$("#logo span").stop().animate({opacity:0},'slow');
});
});
</script>
<style type="text/css">
#logo span{
background: url(logo2.gif) no-repeat scroll center bottom;
width:257px;
height:75px;
position:absolute;
}
img{
border:0;
}
</style>
</head>
<body>
<div id="logo"><a href="#"><span></span><img src="logo.gif"/></a></div>
</body>
</html>
您是否尝试查看该页面的源代码?这是不透明度的变化。
// load the logo transition
$("#logo span").css("opacity","0");
$("#logo span").css("display","block");
// logo animation
$("#logo").hover(function() {
$("#logo span").stop().animate({opacity:1},'slow');
}, function() {
$("#logo span").stop().animate({opacity:0},'slow');
});
因此,一张图像覆盖另一张图像,前面的图像逐渐淡入淡出。不是颜色变化。
请注意代码上方的警告:
// whoah there... This source code is copyright ShopDev. By all means, use this website as a source of inspiration - just don't plagiarize! //
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)