jQ缩放图片悬停效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQ缩放图片悬停效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jquery缩放图片悬停效果</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css?v=1">
    <script src="js/jquery.min.js"></script>
    <script src="js/hover.zoom.js"></script>
    <script>
        $(function() {
            $('#blue').hoverZoom(); // Default
            $('#green').hoverZoom({
                overlayColor: '#90bd2e',
                zoom: 50
            });
            $('#pink').hoverZoom({
                overlayColor: '#bd2e75',
                zoom: 0
            });
            /* USAGE
            
            $('#pink').hoverZoom({
                overlay: true, // false to turn off (default true)
                overlayColor: '#2e9dbd', // overlay background color
                overlayOpacity: 0.7, // overlay opacity
                zoom: 25, // amount to zoom (px)
                speed: 300 // speed of the hover
            });
            
            */
        }); 
    </script>
    
</head>
<body>
    <div id="container">
        <div id="main">
            <div class="block">
                <a href="#" class="zoom" id="blue"><img src="images/thumbnail-1.jpg" alt="thumbnail" /></a>
            </div>
            <div class="block">
                <a href="#" class="zoom" id="green"><img src="images/thumbnail-2.jpg" alt="thumbnail" /></a>
            </div>
            <div class="block last">
                <a href="#" class="zoom" id="pink"><img src="images/thumbnail-3.jpg" alt="thumbnail" /></a>
            </div>
        </div>
    </div>
</body>
</html>

JS代码(hover.zoom.js):

(function($){
	$.fn.extend({
	hoverZoom:function(settings){
	var defaults ={
	overlay:true,overlayColor:'#2e9dbd',overlayOpacity:0.7,zoom:25,speed:300}
;
	var settings = $.extend(defaults,settings);
	return this.each(function(){
	var s = settings;
	var hz = $(this);
	var image = $('img',hz);
	image.load(function(){
	if(s.overlay === true){
	$(this).parent().append('<div class="zoomOverlay" />');
	$(this).parent().find('.zoomOverlay').css({
	opacity:0,display:'block',backgroundColor:s.overlayColor}
);
}
var width = $(this).width();
	var height = $(this).height();
	$(this).fadeIn(1000,function(){
	$(this).parent().css('background-image','none');
	hz.hover(function(){
	$('img',this).stop().animate({
	height:height + s.zoom,marginLeft:-(s.zoom),marginTop:-(s.zoom)}
,s.speed);
	if(s.overlay === true){
	$(this).parent().find('.zoomOverlay').stop().animate({
	opacity:s.overlayOpacity}
,s.speed);
}
}
,function(){
	$('img',this).stop().animate({
	height:height,marginLeft:0,marginTop:0}
,s.speed);
	if(s.overlay === true){
	$(this).parent().find('.zoomOverlay').stop().animate({
	opacity:0}
,s.speed);
}
}
);
}
);
}
);
}
);
}
}
);
}
)(jQuery);

CSS代码(style.css):

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
body,html{width:100%;height:70%;background:#eee url(bg.jpg);}
#container{width:960px;height:100%;margin:0 auto;position:relative}
#main{width:960px;position:absolute;top:50%;left:0;margin:-85px 0 0 0;}
.block{width:293px;height:170px;float:left;margin:0 40px 0 0;}
.last{margin-right:0;}
.zoom{width:293px;height:170px;display:block;position:relative;overflow:hidden;border:1px solid #ddd;background:#fff url(loader.gif) no-repeat center;}
.zoom img{display:none}
.zoomOverlay{position:absolute;top:0;left:0;bottom:0;right:0;display:none;background-image:url(zoom.png);background-repeat:no-repeat;background-position:center;}
p,p a{font-size:12px;color:#666;}

附件:下载该文件资源,减少时间成本(增值服务)