基于Jquery的仿照flash放大图片效果代码

时间：2021-05-17 08:40:45|栏目：jquery|点击：次

Html：

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
 
<link rel="stylesheet" type="text/css" href="css/zoomer.css" media="screen" /> 
 
<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:

复制代码代码如下:

 
(function ($) { 
 
$.fn.Zoomer = function (b) { 
 
var c = $.extend({ speedView: 200, speedRemove: 400, altAnim: false, speedTitle: 400, debug: false }, b); 
 
var d = $.extend(c, b); 
 
function e(s) { 
 
if (typeof console != "undefined" && typeof console.debug != "undefined") 
 
{ console.log(s) } else { alert(s) } 
 
} 
 
if (d.speedView == undefined || d.speedRemove == undefined || d.altAnim == undefined || d.speedTitle == undefined) { 
 
e('speedView: ' + d.speedView); 
 
e('speedRemove: ' + d.speedRemove); 
 
e('altAnim: ' + d.altAnim); 
 
e('speedTitle: ' + d.speedTitle); 
 
return false 
 
} 
 
if (d.debug == undefined) { 
 
e('speedView: ' + d.speedView); 
 
e('speedRemove: ' + d.speedRemove); 
 
e('altAnim: ' + d.altAnim); 
 
e('speedTitle: ' + d.speedTitle); 
 
return false 
 
} 
 
if (typeof d.speedView != "undefined" || typeof d.speedRemove != "undefined" || typeof d.altAnim != "undefined" || typeof d.speedTitle != "undefined") { 
 
if (d.debug == true) { 
 
e('speedView: ' + d.speedView); 
 
e('speedRemove: ' + d.speedRemove); 
 
e('altAnim: ' + d.altAnim); 
 
e('speedTitle: ' + d.speedTitle) 
 
} 
 
$(this).hover(function () { 
 
$(this).css({ 'z-index': '10' }); 
 
$(this).find('img').addClass("hover").stop().animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '175px', height: '181px', padding: '20px' }, d.speedView); 
 
if (d.altAnim == true) { 
 
var a = $(this).find("img").attr("alt"); if (a.length != 0) { 
 
$(this).prepend('<span class="title">' + a + '</span>'); 
 
$('.title').animate({ marginLeft: '-42px', marginTop: '90px' }, d.speedTitle).css({ 'z-index': '10', 'position': 'absolute', 'float': 'left' }) 
 
} 
 
} 
 
}, function () { 
 
$(this).css({ 'z-index': '0' }); 
 
$(this).find('img').removeClass("hover").stop().animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, d.speedRemove); 
 
$(this).find('.title').remove() 
 
}) 
 
} 
 
} 
 
})(jQuery);

在线演示:http://demo.jb51.net/js/2011/ZoomerforjQuery/

上一篇：jquery实现excel导出的方法

栏目：jquery

下一篇：jquery获取所有选中的checkbox实现代码

本文标题：基于Jquery的仿照flash放大图片效果代码

本文地址：http://www.codeinn.net/misctech/123181.html

更多jquery

jquery

基于Jquery的仿照flash放大图片效果代码

阅读排行

推荐教程