以下是 jQuery图片列表动画显示特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery图片列表动画显示效果，属于站长常用代码" />
<title>jQuery图片列表动画显示效果</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.1.4.2.min.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="common">
<ul>
<li class="listbox mr20">
<div class="listimg"> <a href="#" title="WordPress中文博客主题Truepixel" target="_blank"><img src="images/01.jpg" class="attachment-thumbnail wp-post-image" alt="WordPress中文博客主题Truepixel" /></a>
<div class="summary">
<div class="summarytxt">
<p>适用于图文博客，含计数器、图片延迟特效、水印、远程图片、邮件订阅、微博等功能</p>
</div>
</div>
</div>
<div class="listinfo">
<div class="listtitle"><a href="#" title="WordPress中文博客主题Truepixel" target="_blank">WordPress中文博客主题Truepixel</a></div>
<div class="listtag"><a href="#" rel="tag">博客</a><a href="#" rel="tag">杂志</a></div>
<div class="listdate">2020-08-25</div>
<div class="listview">6253</div>
<div class="listcomment">16</div>
<div class="listdemo"><a href="#" rel="external nofollow" target="_blank">演示</a></div>
</div>
</li>
<li class="listbox mr20">
<div class="listimg"> <a href="#" title="WordPress中文博客主题Truepixel" target="_blank"><img src="images/02.jpg" class="attachment-thumbnail wp-post-image" alt="WordPress中文博客主题Truepixel" /></a>
<div class="summary">
<div class="summarytxt">
<p>适用于图文博客，含计数器、图片延迟特效、水印、远程图片、邮件订阅、微博等功能</p>
</div>
</div>
</div>
<div class="listinfo">
<div class="listtitle"><a href="#" title="WordPress中文博客主题Truepixel" target="_blank">WordPress中文博客主题Truepixel</a></div>
<div class="listtag"><a href="#" rel="tag">博客</a><a href="#" rel="tag">杂志</a></div>
<div class="listdate">2020-08-25</div>
<div class="listview">6253</div>
<div class="listcomment">16</div>
<div class="listdemo"><a href="#" rel="external nofollow" target="_blank">演示</a></div>
</div>
</li>
<li class="listbox mr20">
<div class="listimg"> <a href="#" title="WordPress中文博客主题Truepixel" target="_blank"><img src="images/03.jpg" class="attachment-thumbnail wp-post-image" alt="WordPress中文博客主题Truepixel" /></a>
<div class="summary">
<div class="summarytxt">
<p>适用于图文程图片、邮件订阅、微博等功能</p>
</div>
</div>
</div>
<div class="listinfo">
<div class="listtitle"><a href="#" title="WordPress中文博客主题Truepixel" target="_blank">WordPress中文博客主题Truepixel</a></div>
<div class="listtag"><a href="#" rel="tag">博客</a><a href="#" rel="tag">杂志</a></div>
<div class="listdate">2020-08-25</div>
<div class="listview">6253</div>
<div class="listcomment">16</div>
<div class="listdemo"><a href="#" rel="external nofollow" target="_blank">演示</a></div>
</div>
</li>
<li class="listbox mr20">
<div class="listimg"> <a href="#" title="WordPress中文博客主题Truepixel" target="_blank"><img src="images/04.jpg" class="attachment-thumbnail wp-post-image" alt="WordPress中文博客主题Truepixel" /></a>
<div class="summary">
<div class="summarytxt">
<p>适用于图文博客，含计数器、图片延迟特效、水印、远程图片、邮件订阅、微博等功能</p>
</div>
</div>
</div>
<div class="listinfo">
<div class="listtitle"><a href="#" title="WordPress中文博客主题Truepixel" target="_blank">WordPress中文博客主题Truepixel</a></div>
<div class="listtag"><a href="#" rel="tag">博客</a><a href="#" rel="tag">杂志</a></div>
<div class="listdate">2020-08-25</div>
<div class="listview">6253</div>
<div class="listcomment">16</div>
<div class="listdemo"><a href="#" rel="external nofollow" target="_blank">演示</a></div>
</div>
</li>
</ul>
</div>
<!-- 代码 结束 -->
</body>
</html>
JS代码(lrtk.js):
//����ͼ�� www.lanrentuku.com��$(document).ready(function(){
$('.listimg').hover(function(){
$(".summary",this).stop().animate({
top:'110px'}
,{
queue:false,duration:180}
);
}
,function(){
$(".summary",this).stop().animate({
top:'165px'}
,{
queue:false,duration:180}
);
}
);
}
);
CSS代码(lrtk.css):
*{margin:0;padding:0;}
body{padding-top:50px;background:#e6e6e6;font-family:Tahoma,Helvetica,Arial,sans-serif;font-size:14px;color:#666;text-decoration:none;}
a{font-family:Tahoma,Helvetica,Arial,sans-serif;font-size:14px;color:#666;text-decoration:none;outline:none;}
img,.searchtxt,.searchbtn,.pinglun input.submit{border:0;}
ol,ul,li{list-style:none;}
dl,dt,dd,ul,li{margin:0;padding:0;}
input,textarea{outline:none;}
html,body,form,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none;font-weight:normal;}
.common{margin:0 auto;width:1200px;position:relative;}
.common ul li{margin-left:20px;}
.clear{clear:both;}
.summary{background:#333;}
.listbox{float:left;margin-bottom:20px;padding:10px;_padding:10px 10px 8px 10px;background:#f6f6f6;width:260px;height:240px;position:relative;}
.listimg{float:left;width:260px;height:165px;position:relative;overflow:hidden;}
.listimg img{background:#333;width:260px;height:165px;top:0;left:0;position:absolute;}
.summary{width:260px;height:165px;top:165px;left:0;position:absolute;}
.summarytxt{margin:5px 10px;width:250px;height:auto;line-height:22px;font-size:12px;color:#cfcfcf;}
.listinfo{_margin-bottom:3px;padding-left:10px;width:250px;line-height:22px;font-size:12px;}
.listinfo a{font-size:12px;}
.listtitle{float:left;margin-top:8px;_margin-top:-2px;width:250px;font-size:14px;}
.listtitle a{font-size:14px;}
.listtitle a:hover{color:#f55555;}
.listtag{float:left;padding-left:18px;background:url(../images/taglist.gif) 0 5px no-repeat;width:232px;color:#999;}
.listtag a{margin:0 8px 0 0;margin:2px 8px -2px 0\9;_margin:0 8px 0 0;color:#999;}
.listtag a:hover{color:#2ad2bb;}
.listdate{float:left;margin-right:13px;padding-left:18px;background:url(../images/time.gif) 0 5px no-repeat;color:#999;}
.listview{float:left;margin-right:13px;padding-left:24px;background:url(../images/view.gif) 0 5px no-repeat;color:#999;}
.listcomment{float:left;margin-right:13px;padding-left:20px;background:url(../images/comment.gif) 0 5px no-repeat;color:#999;}
.listdemo a{float:left;margin-top:0;margin-top:2px\9;_margin-top:0;color:#999;white-space:nowrap;}
.listdemo a:hover{color:#2ad2bb;}
分享到QQ
分享到微博
微信扫一扫
