Jquery-based code for enlarging picture effects imitating flash

Jquery-based code for enlarging picture effects imitating flash_jquery

WBOY

Release： 2016-05-16 18:09:25

Original

1205 people have browsed it

Html：

复制代码代码如下:

Zoomer for jQuery

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(''   a   ''); 
$('.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/