JQuery 实现图片滑动效果
六 6, 2010 | wordpress 建站攻略 |
在众多博客中，大多数博客所放置图片的方式都是简单的图片加载实现的，整体看上去没有鲜活的感觉，现在大多数博住都是让放上去的图片带有滑动的效果使得避免整体看上去死板，那么怎么才能实现图片的滑动效果呢？且看。。。。。。
要实现这个效果就必须在原有主题的 HTML 及 CSS 上进行改动。
第一部分：修改 HTML
添加以下代码：
<div class="boxgrid caption">
<img src="images/ad.gif"/>
<div class="cover boxcaption">
<h3>标题</h3>
<p>详细信息</p>
</div>
</div>
第二部分：修改 CSS
把以下 CSS 元素添加到原有主题的 CSS 文件中：
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.caption .boxcaption {
top: 220;
left: 0;
}
这样就完成了么？当然没有，最重要的 JQuery 都还没有加上去呢！这里要注意下你只要加载1.2版本的 JQuery 库就可以了，加载太大的话反而浪费带宽资源，网站的整体速度也会随之降低。随后，就是把以下 JQuery 代码加入到主题中加以执行：
$(document).ready(function(){
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});
OK，现在算是正式完成了。还在等什么，赶紧去试试吧！
留下您的脚印