首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

商品展示图片放大 拍拍网店 小弟我目前采用的效果代码

2012-06-29 
商品展示图片放大 拍拍网店 我目前采用的效果代码htmlheadtitleJavaScript打造很酷的图片放大效果实

商品展示图片放大 拍拍网店 我目前采用的效果代码
<html><head><title>JavaScript打造很酷的图片放大效果实例代码 - www.webdm.cn</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
*{margin:0; padding:0;} 

#container{width:400px; height:400px;}

img.obj
{
width:100px; height:100px;
float:left; margin-left:20px; display:inline;
margin-top:20px;opacity:0.6;filter:alpha(opacity=60); border:2px solid black;
}

img.obj:hover
{
width:200px; height:200px; margin-right:-50px;  margin-left:-30px;  opacity:0.8;filter:alpha(opacity=80);
border:2px dotted black; margin-top:-30px;margin-bottom:-50px; position:relative;
}

#screen span {
position:absolute;
overflow:hidden;
border:#FFF solid 1px;
background:red;
}
#screen img{
position:absolute;
left:-32px;
top:-32px;
cursor: pointer;
}
#caption, #title{
color: #FFF;
font-family: georgia, 'times new roman', times, veronica, serif;
font-size: 1em;
text-align: center;
}
#caption b {
font-size: 2em;
}
</style>
</head><body>
<div id="container">
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" /></a>
<a href="javascript:"><img src="http://images.cnblogs.com/cnblogs_com/Cson/290336/r_cat1.jpg" /></a>
</div>
<script type="text/javascript"><!--
// starter
load();
//-->
</script>
</body>
</html>
//下面这个cnblog的另外一个图片展示 也不错http://www.cnblogs.com/rubylouvre/archive/2009/09/21/1570797.html

热点排行