以下是 适合做图片类网站的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=utf-8" />
<title>适合做图片类网站的jQuery特效</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="common">
<ul>
<li class="listbox mr20">
<div class="listimg">
<a href="/"><img src="images/260x165.jpg" class="attachment-thumbnail wp-post-image" alt="图片特效,网页特效,js特效,jquery特效" /></a>
<div class="summary">
<div class="summarytxt">
<p>适合做图片类网站的特效，鼠标经过弹出标题，效果很不错</p>
</div>
</div>
</div>
<div class="listinfo">
<div class="listtitle"><a href="/">适合做图片类网站的特效</a></div>
<div class="listtag"><a href="/" rel="tag">图片特效</a><a href="/" rel="tag">网页特效</a></div>
<div class="listdate">2015-06-18</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="/"><img src="images/260x165.jpg" class="attachment-thumbnail wp-post-image" alt="图片特效,网页特效,js特效,jquery特效" /></a>
<div class="summary">
<div class="summarytxt">
<p>适合做图片类网站的特效，鼠标经过弹出标题，效果很不错</p>
</div>
</div>
</div>
<div class="listinfo">
<div class="listtitle"><a href="/">适合做图片类网站的特效</a></div>
<div class="listtag"><a href="/" rel="tag">图片特效</a><a href="/" rel="tag">网页特效</a></div>
<div class="listdate">2015-06-18</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="/"><img src="images/260x165.jpg" class="attachment-thumbnail wp-post-image" alt="图片特效,网页特效,js特效,jquery特效" /></a>
<div class="summary">
<div class="summarytxt">
<p>适合做图片类网站的特效，鼠标经过弹出标题，效果很不错</p>
</div>
</div>
</div>
<div class="listinfo">
<div class="listtitle"><a href="/">适合做图片类网站的特效</a></div>
<div class="listtag"><a href="/" rel="tag">图片特效</a><a href="/" rel="tag">网页特效</a></div>
<div class="listdate">2015-06-18</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="/"><img src="images/260x165.jpg" class="attachment-thumbnail wp-post-image" alt="图片特效,网页特效,js特效,jquery特效" /></a>
<div class="summary">
<div class="summarytxt">
<p>适合做图片类网站的特效，鼠标经过弹出标题，效果很不错</p>
</div>
</div>
</div>
<div class="listinfo">
<div class="listtitle"><a href="/">适合做图片类网站的特效</a></div>
<div class="listtag"><a href="/" rel="tag">图片特效</a><a href="/" rel="tag">网页特效</a></div>
<div class="listdate">2015-06-18</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="/"><img src="images/260x165.jpg" class="attachment-thumbnail wp-post-image" alt="图片特效,网页特效,js特效,jquery特效" /></a>
<div class="summary">
<div class="summarytxt">
<p>适合做图片类网站的特效，鼠标经过弹出标题，效果很不错</p>
</div>
</div>
</div>
<div class="listinfo">
<div class="listtitle"><a href="/">适合做图片类网站的特效</a></div>
<div class="listtag"><a href="/" rel="tag">图片特效</a><a href="/" rel="tag">网页特效</a></div>
<div class="listdate">2015-06-18</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="/"><img src="images/260x165.jpg" class="attachment-thumbnail wp-post-image" alt="图片特效,网页特效,js特效,jquery特效" /></a>
<div class="summary">
<div class="summarytxt">
<p>适合做图片类网站的特效，鼠标经过弹出标题，效果很不错</p>
</div>
</div>
</div>
<div class="listinfo">
<div class="listtitle"><a href="/">适合做图片类网站的特效</a></div>
<div class="listtag"><a href="/" rel="tag">图片特效</a><a href="/" rel="tag">网页特效</a></div>
<div class="listdate">2015-06-18</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 class="clear"></div>
</div>
<script type="text/javascript" src="js/jquery.1.4.2.min.js"></script>
<script type="text/javascript">
$(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});
});
});
</script>
</body>
</html>
CSS代码(style.css):
*{margin:0;padding:0;}
*html{background-image:url(../other/.com/wp-content/themes/youzhuti/about:blank);background-attachment:fixed;}
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;}
.clear{clear:both;}
.common{margin:0 auto;width:900px;position:relative;}
/* summary */
.summary{background:#333;}
.listbox{float:left;margin-bottom:20px;margin-right:20px;display:inline;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
分享到微博
微信扫一扫
