本特效效果模仿百度图片效果。效果图如下：
打开页面效果
鼠标放上去0.15秒，放大的层从小到大展开
鼠标移开后，弹出层消失
。页面代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<HTML xmlns="">
<HEAD>
<META content="text/html; charset=utf-8" http-equiv="Content-Type">
<TITLE>demo</TITLE>
<SCRIPT language="JavaScript" type="text/javascript" src="demo_"></SCRIPT>
<STYLE>
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,font,img,strong,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{margin:0;padding:0;}
a{ color:#fff; text-decoration:none;}
a img{ border:none;}
li{ list-style-type:none;}
body{ background:#000; color:#fff; font-size:12px; font:Arial,Verdana,"宋体"}
.wrapper{ overflow:hidden; width:1130px; margin:0 auto;}
.header{ overflow:hidden; padding:20px 0 50px;}
.main{ width:1000px; margin:0 auto 30px; overflow:hidden;}
#detial{ overflow:hidden; width:750px; padding-top:20px;}
.shopPic{ overflow:hidden; width:720px; float:right;}
.shopPic a{ float:left; display:inline-block;}
.detialItem{ overflow:hidden; margin-bottom:5px; width:720px;}
.itemTop{ overflow:hidden; line-height:40px; border-bottom:1px solid #fff; margin-bottom:20px;}
.itemTop h2{ float:left; margin-left:10px;}
.more{ float:right; background:#fff; color:#333; display:block; height:20px; line-height:20px; width:50px; text-align:center; margin-top:12px; margin-right:10px; font-family:'微软雅黑';}
.more:hover{ text-decoration:underline;}
.itemIfor{ float:left; width:150px; float:left; margin-left:23px;}
.picTitle{ font-size:14px; font-weight:bold; color:#A0BC1D; line-height:30px; padding:0 5px;}
.itemIfor p{ padding:0 5px; line-height:20px;}
.popup{width:300px; height:380px; background-color:#fff; border:solid 1px #ccc;}
#tempdiv{ overflow:hidden; display:none;position:absolute;}
</STYLE>
<META name="GENERATOR" content="MSHTML 9.00.8112.16441">
</HEAD>
<BODY>
<div class="wrapper">
<div class="main">
<div id="detial">
<div class="detialItem">
<div class="itemTop"><h2>列表1</h2><a href="#" class="more">More..</a></div>
<div class="itemIfor">
<a href="#"><img src="demo_" width="150" height="150" /></a>
<a href="#" class="picTitle">商品名称</a>
<p>￥111.00</p>
</div>
<div class="itemIfor">
<a href="#"><img src="demo_" width="150" height="150" /></a>
<a href="#" class="picTitle">商品名称</a>
<p>￥222.00</p>
</div>
<div class="itemIfor">
<a href="#"><img src="demo_" width="150" height="150" /></a>
<a href="#" class="picTitle">商品名称</a>
<p>￥333.00</p>
</div>
<div class="itemIfor">
<a href="#"><img src="demo_" width="150" height="150" /></a>
<a href="#" class="picTitle">商品名称</a>
<p>￥123.00</p>
</div>
</div>
<div class="detialItem">
<div class="itemTop"><h2>列表2</h2><a href="#" class="more">More..</a></div>
<div class="itemIfor">
<a href="#"><img src="demo_" width="150" height="150" /></a>
<a href="#" class="picTitle">商品名称</a>
<p>￥123.00</p>jquery在线图片
</div>
<div class="itemIfor">
<a href="#"><img src="demo_" width="150" height="150" /></a>
<a href="#" class="picTitle">商品名称</a>
<p>￥123.00</p>
</div>
<div class="itemIfor">
<a href="#"><img src="demo_" width="150" height="150" /></a>
<a href="#" class="picTitle">商品名称</a>
<p>￥123.00</p>
</div>
<div class="itemIfor">
<a href="#"><img src="demo_" width="150" height="150" /></a>
<a href="#" class="picTitle">商品名称</a>
<p>￥123.00</p>
</div>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论