- 时间：2022-03-17 15:44 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：基于Jquery的仿照flash放大图片效果代码
Html：
[url=css/zoomer.css]<title>Zoomer for jQuery</title>
<style type="text/css">
body {
font: Arial, Helvetica, sans-serif normal 10px;
margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
#page{
margin:0 auto;
position:relative;
width:850px;
font-family:verdana;
font-size:12px;
}
#content{
width:100%;
}
pre{
border:3px solid #ccc;
padding:5px;
font-size:12px;
font-family:arial;
}
.bold{font-weight:bold;}
.blue{color:blue;}
.red{color:red;}
#footer{
margin-top:5px;
text-align:center;
width:100%;
height:auto;
padding:5px;
background-color:#ccc;
}
#logo,#foot { margin-left: 10px; }
</style>
</head>
<body>
<div id="page">
<div id="content">
<div class="container">
<ul class="thumb">
<li><a href="#"><img src="imgs/robots.jpg" alt="Robots like cameras" /></a></li>
<li><a href="#"><img src="imgs/monster.jpg" alt="Monsters!" /></a></li>
<li><a href="#"><img src="imgs/santa.jpg" alt="Santa down under" /></a></li>
<li><a href="#"><img src="imgs/thumb6.jpg" alt="Sponguebob!" /></a></li>
<li><a href="#"><img src="imgs/thumb7.jpg" alt="Star Wars" /></a></li>
<li><a href="#"><img src="imgs/hulk.jpg" alt="Hulk Smash!" /></a></li>
<li><a href="#"><img src="imgs/dino.png" alt="Dinosaur time" /></a></li>
<li><a href="#"><img src="imgs/orange.jpg" alt="Orange car" /></a></li>
<li><a href="#"><img src="imgs/alien.jpg" alt="Aliens!" /></a></li>
<li><a href="#"><img src="imgs/supe.jpg" alt="It's Superman!" /></a></li>
<li><a href="#"><img src="imgs/garfield.jpg" alt="Where's my lasagne?" /></a></li>
<li><a href="#"><img src="imgs/bridge.jpg" alt="The bridge at Sunset" /></a></li>
<li><a href="#"><img src="imgs/peanuts.jpg" alt="Peanuts!" /></a></li>
<li><a href="#"><img src="imgs/thumb5.jpg" alt="1956 Yellow Car" /></a></li>
<li><a href="#"><img src="imgs/thumb4.jpg" alt="Ooooh. Pretty" /></a></li>
<li><a href="#"><img src="imgs/thumb3.jpg" alt="Lets build something" /></a></li>
<li><a href="#"><img src="imgs/thumb2.jpg" alt="Puppy love" /></a></li>
<li><a href="#"><img src="imgs/thumb1.jpg" alt="It's a Toy Story" /></a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/zoomer.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('ul.thumb li').Zoomer({ speedView: 200, speedRemove: 400, altAnim: true, speedTitle: 400, debug: false });
});
</script>
</body>
</html>
css:
ul.thumb {float: left;list-style: none;margin: 0; padding: 10px;width: 800px;background-color: white;}
ul.thumb li {margin: 0; padding: 5px;float: left;position: relative;width: 110px;height: 110px;}
ul.thumb li img {width: 100px; height: 100px;border: 1px solid #ddd;padding: 5px;background: #f0f0f0;position: absolute;left: 0; top: 0;-ms-interpolation-mode: bicubic; }
ul.thumb li img.hover {margin-top:15px;background:url(../imgs/thumb_bg.png) no-repeat center center;border: none;}
.title{position:absolute;width:185px;height:35px;margin:0;font-weight:900;background:url(../imgs/blue.png) no-repeat center center;padding:17px 0 0 0;text-align:center; color: #fff; }
js:
[url=http://demo.jb51.net/js/2011/ZoomerforjQuery/]http://demo.jb51.net/js/2011/ZoomerforjQuery/[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
