Zblog利用Jquery实现鼠标滑过图片时透明度渐变特效

利用jQuery可以在zblogPHP网站中实现很多炫酷特效，比如说这篇文章中要介绍的鼠标滑动到图片上面，图片透明度降低，颜色变淡，鼠标移开则重新恢复原色的特效，和鼠标悬停到图片上时，图片变得清晰的特效。

加载jquery

1、外部调用：

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>

2、本地调用：（首先上传JS文件至主题目录下SCRIPT文件夹内）

<script src="{$host}zb_system/script/jquery.min.js" type="text/javascript"></script>

实现鼠标滑过图片时透明度渐变

<script type="text/javascript"> 
$(function () {
$('img').hover(
function() {
$(this).fadeTo("fast", 0.8);},
function() {$(this).fadeTo("fast", 1);
});
});
</script>

实现鼠标悬停到图片上时，图片变得清晰

效果刚好和上面的相反。

<script type="text/javascript">
$(function() {
$('img').animate({"opacity": .5 });
$('img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
}, function() {
$(this).stop().animate({ "opacity": .5 });
});
});
</script>

将以上代码放到header.php文件的</head>之前。

怎么样？调试成功以后，网站是不是变得很炫酷？当然，若您不想占用太多资源，也可以按条件筛选仅在指定页面实现此效果。