jQ场景局部放大效果特效代码

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

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

以下是 jQ场景局部放大效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>jQ场景局部放大效果</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<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" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<noscript>
			<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
		</noscript>
		<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css' />
    </head>
    <body>
		<div class="container">

			<h1>jQ场景局部放大效果</h1>
			<div id="zt-container" class="zt-container">
				<div class="zt-item" data-id="zt-item-1">
					<img class="zt-current" src="images/image3.jpg" />
					<div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="15" data-speed="850" data-delay="50" style="top:138px;left:151px;width:100px; height:30px;"></div>
				</div>
				<div class="zt-item" data-id="zt-item-2">
					<img class="zt-current" src="images/image3_1.jpg" />
					<div class="zt-tag" data-dir="1" data-link="zt-item-3" data-zoom="10" data-speed="850" data-delay="100" style="top:201px;left:544px;width:50px;height:30px;"></div>
					<div class="zt-tag" data-dir="1" data-link="zt-item-4" data-zoom="2" data-speed="550" data-delay="0" style="top:155px;left:10px;width:150px;height:100px;"></div>
					<div class="zt-tag" data-dir="1" data-link="zt-item-5" data-zoom="15" data-speed="850" data-delay="0" style="top:15px;left:10px;width:90px;height:50px;"></div>
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="15" data-speed="700" data-delay="0"></div>
				</div>		
				<div class="zt-item" data-id="zt-item-3">
					<img class="zt-current" src="images/image3_3.jpg" />
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-2" data-zoom="10" data-speed="650" data-delay="20"></div>
				</div>			
				<div class="zt-item" data-id="zt-item-4">
					<img class="zt-current" src="images/image3_2.jpg" />
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-2" data-zoom="2" data-speed="550" data-delay="0"></div>
				</div>
				<div class="zt-item" data-id="zt-item-5">
					<img class="zt-current" src="images/image3_5.jpg" />
					<div class="zt-tag" data-dir="1" data-link="zt-item-6" data-zoom="8" data-speed="650" data-delay="0" style="top:330px;left:238px;width:40px;height:30px;"></div>
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-2" data-zoom="15" data-speed="700" data-delay="0"></div>
				</div>
				<div class="zt-item" data-id="zt-item-6">
					<img class="zt-current" src="images/image3_6.jpg" />
					<div class="zt-tag" data-dir="1" data-link="zt-item-7" data-zoom="2" data-speed="550" data-delay="0" style="top:10px;left:109px;width:240px;height:180px;"></div>
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-5" data-zoom="8" data-speed="650" data-delay="0"></div>
				</div>
				<div class="zt-item" data-id="zt-item-7">
					<img class="zt-current" src="images/image3_7.jpg" />
					<div class="zt-tag" data-dir="1" data-link="zt-item-8" data-zoom="3" data-speed="550" data-delay="0" style="top:377px;left:152px;width:125px;height:70px;"></div>
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-6" data-zoom="2" data-speed="550" data-delay="0"></div>
				</div>
				<div class="zt-item" data-id="zt-item-8">
					<img class="zt-current" src="images/image3_8.jpg" />
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-7" data-zoom="3" data-speed="550" data-delay="0"></div>
				</div>
			</div>
			<div class="more">
				<ul>
					<li>More examples:</li>
					<li class="selected"><a href="index.html">Example 1</a></li>
					<li><a href="index2.html">Example 2</a></li>
					<li><a href="index3.html">Example 3</a></li>
					<li><a href="index4.html">Example 4</a></li>
					<li><a href="index5.html">Example 5</a></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/jquery.zoomtour.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#zt-container').zoomtour();
			});
		</script></body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>jQ场景局部放大效果</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<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" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<noscript>
			<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
		</noscript>
		<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
		<link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css' />
    </head>
    <body>
		<div class="container">

			<h1>jQ场景局部放大效果</h1>
			<div id="zt-container" class="zt-container">
				<div class="zt-item" data-id="zt-item-1">
					<img class="zt-current" src="images/image1.jpg" />
					<div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="14" data-speed="950" data-delay="150" style="top:69px;left:65px;"></div>
					<div class="zt-tag" data-dir="1" data-link="zt-item-3" data-zoom="6" data-speed="850" data-delay="20" style="width:150px;height:111px;top:241px;left:135px;"></div>
					<div class="zt-tag" data-dir="1" data-link="zt-item-4" data-zoom="9" data-speed="800" data-delay="70" style="top:227px;left:346px;"></div>
					<div class="zt-tag" data-dir="1" data-link="zt-item-5" data-zoom="12" data-speed="800" data-delay="150" style="top:73px;left:410px;"></div>
					</div>
				<div class="zt-item" data-id="zt-item-2">
					<img class="zt-current" src="images/image1_1.jpg" />
					<div class="zt-tag" data-dir="1" data-link="zt-item-6" data-zoom="6" data-speed="950" data-delay="150" style="top:348px;left:459px;"></div>
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="14" data-speed="750" data-delay="80"></div>
					</div>
				<div class="zt-item" data-id="zt-item-3">
					<img class="zt-current" src="images/image1_2.jpg" />
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="6" data-speed="550" data-delay="20"></div>
					</div>
				<div class="zt-item" data-id="zt-item-4">
					<img class="zt-current" src="images/image1_3.jpg" />
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="9" data-speed="700" data-delay="70"></div>
					</div>
				<div class="zt-item" data-id="zt-item-5">
					<img class="zt-current" src="images/image1_4.jpg" />
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="12" data-speed="700" data-delay="10"></div>
					</div>
				<div class="zt-item" data-id="zt-item-6">
					<img class="zt-current" src="images/image1_5.jpg" />
					<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-2" data-zoom="12" data-speed="700" data-delay="20"></div>
				</div>
			</div>
			<div class="more">
				<ul>
					<li>More examples:</li>
					<li><a href="index.html">Example 1</a></li>
					<li class="selected"><a href="index2.html">Example 2</a></li>
					<li><a href="index3.html">Example 3</a></li>
					<li><a href="index4.html">Example 4</a></li>
					<li><a href="index5.html">Example 5</a></li>
				</ul>
			</div>
		</div>
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/jquery.zoomtour.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#zt-container').zoomtour();	
			});
		</script>
    </body>
</html>

JS代码(jquery.zoomtour.js):

(function($){
	vartag={
	saveInitialData:function( $tag ){
	$tag.data({
	width:$tag.width(),height:$tag.height(),left:$tag.position().left,top:$tag.position().top}
).addClass( $tag.data('link') );
}
,rotate:function( $tag,cache ){
	// element's centervar center={
	x:$tag.position().left + $tag.width() / 2,y:$tag.position().top + $tag.height() / 2}
;
	var quadrant= tag.getElementQuadrant( center,cache );
	// distance from element's center to the quadrants originvar dist_element;
	switch( quadrant ){
	case 1:dist_element = Math.sqrt( Math.pow( ( center.x - 0 ),2 ) + Math.pow( ( center.y - 0 ),2 ) );
	break;
	case 2:dist_element = Math.sqrt( Math.pow( ( center.x - cache.ztdim.x ),2 ) + Math.pow( ( center.y - 0 ),2 ) );
	break;
	case 3:dist_element = Math.sqrt( Math.pow( ( center.x - 0 ),2 ) + Math.pow( ( center.y - cache.ztdim.y ),2 ) );
	break;
	case 4:dist_element = Math.sqrt( Math.pow( ( center.x - cache.ztdim.x ),2 ) + Math.pow( ( center.y - cache.ztdim.y ),2 ) );
	break;
}
var anglefactor = 25;
	var angle= ( ( cache.dist_center - dist_element ) / cache.dist_center ) * anglefactor;
	switch( quadrant ){
	case 1:$tag.data( 'rotate',angle ).transform({
	'rotate':angle + 'deg'}
);
	break;
	case 2:$tag.data( 'rotate',-angle ).transform({
	'rotate':-angle + 'deg'}
);
	break;
	case 3:$tag.data( 'rotate',-angle ).transform({
	'rotate':-angle + 'deg'}
);
	break;
	case 4:$tag.data( 'rotate',angle ).transform({
	'rotate':angle + 'deg'}
);
	break;
}
}
,getElementQuadrant:function( c,cache ){
	if( c.x <= cache.ztdim.x / 2 && c.y <= cache.ztdim.y / 2 )return 1;
	else if( c.x > cache.ztdim.x / 2 && c.y <= cache.ztdim.y / 2 )return 2;
	else if( c.x <= cache.ztdim.x / 2 && c.y >= cache.ztdim.y / 2 )return 3;
	else if( c.x > cache.ztdim.x / 2 && c.y > cache.ztdim.y / 2 )return 4;
}
}
,viewport={
	zoom:function( $ztcontainer,$tag,cache,settings ){
	var $ztitem= $tag.closest('div.zt-item'),ztitemid= $ztitem.data('id'),$ztimage= $ztitem.children('img.zt-current'),zoomfactor= $tag.data('zoom'),speedfactor= $tag.data('speed'),imgdelayfactor= $tag.data('delay'),link= $tag.data('link'),dir= $tag.data('dir'),$new_ztitem= $ztcontainer.find('div.' + link),$new_ztitemimage= $new_ztitem.find('img.zt-current'),zoomAnimation= true;
	if( !link ) return false;
	if( zoomfactor === undefined || speedfactor === undefined || imgdelayfactor === undefined || dir === undefined )zoomAnimation = false;
	( dir === 1 ) ?viewport.zoomin( $tag,$ztitem,ztitemid,$ztimage,zoomfactor,speedfactor,imgdelayfactor,zoomAnimation,$new_ztitem,$new_ztitemimage,cache,settings ):viewport.zoomout( $tag,$ztitem,ztitemid,$ztimage,zoomfactor,speedfactor,imgdelayfactor,zoomAnimation,$new_ztitem,$new_ztitemimage,cache,settings );
}
,zoomin:function( $tag,$ztitem,ztitemid,$ztimage,zoomfactor,speedfactor,imgdelayfactor,zoomAnimation,$new_ztitem,$new_ztitemimage,cache,settings ){
	var el_l= $tag.data('left') + $tag.data('width') / 2,el_t= $tag.data('top') + $tag.data('height') / 2;
	$.fn.applyStyle= ( zoomAnimation ) ? $.fn.animate:$.fn.css;
	$ztimage.applyStyle({
	width:cache.ztdim.x * zoomfactor + 'px',height:cache.ztdim.y * zoomfactor + 'px',left:- ( ( zoomfactor * ( 2 * el_l ) ) - ( 2 * el_l ) ) / 2 + 'px',top:- ( ( zoomfactor * ( 2 * el_t ) ) - ( 2 * el_t ) ) / 2 + 'px'}
,$.extend( true,[],{
	duration:speedfactor}
) );
	// hide all the other tags (for the current item)$ztitem.children('div.zt-tag').hide();
	var imgAnimationCss={
	width:cache.ztdim.x + 'px',height:cache.ztdim.y + 'px',left:'0px',top:'0px',opacity:1}
;
	if( settings.rotation && !cache.ieLte8 )imgAnimationCss.rotate= '0deg';
	var newztimg= $new_ztitemimage.attr('src');
	var tagCss={
	position:'absolute',width:$tag.data('width'),height:$tag.data('height'),left:$tag.data('left'),top:$tag.data('top')}
;
	if( settings.rotation && !cache.ieLte8 )tagCss.rotate= $tag.data('rotate') + 'deg';
	$ztitem.append($('<img src="' + newztimg + '" class="zt-temp"></img>').css( tagCss ).delay(imgdelayfactor).applyStyle( imgAnimationCss,$.extend( true,[],{
	duration:speedfactor,easing:settings.zoominEasing,complete:function(){
	viewport.zoominCallback( $(this),$new_ztitem,$ztitem,$ztimage,cache );
}
}
) ));
	if( !zoomAnimation )viewport.zoominCallback( $ztitem.find('img.zt-temp'),$new_ztitem,$ztitem,$ztimage,cache );
}
,zoominCallback:function( $zttemp,$new_ztitem,$ztitem,$ztimage,cache ){
	$(this).remove();
	$new_ztitem.show().children('div.zt-tag').show();
	$ztitem.hide();
	$ztimage.css({
	width:cache.ztdim.x + 'px',height:cache.ztdim.y + 'px',left:'0px',top:'0px'}
);
	cache.animTour= false;
}
,zoomout:function( $tag,$ztitem,ztitemid,$ztimage,zoomfactor,speedfactor,imgdelayfactor,zoomAnimation,$new_ztitem,$new_ztitemimage,cache,settings ){
	var $originalTag= $new_ztitem.children( 'div.' + ztitemid ),o_tag_w= $originalTag.data('width'),o_tag_h= $originalTag.data('height'),o_tag_l= $originalTag.data('left'),o_tag_t= $originalTag.data('top'),o_tag_r= $originalTag.data('rotate'),el_l= o_tag_l + o_tag_w / 2,el_t= o_tag_t + o_tag_h / 2;
	$.fn.applyStyle= ( zoomAnimation ) ? $.fn.animate:$.fn.css;
	$new_ztitemimage.css({
	width:cache.ztdim.x * zoomfactor + 'px',height:cache.ztdim.y * zoomfactor + 'px',left:- ( ( zoomfactor * ( 2 * el_l ) ) - ( 2 * el_l ) ) / 2 + 'px',top:- ( ( zoomfactor * ( 2 * el_t ) ) - ( 2 * el_t ) ) / 2 + 'px'}
);
	$ztitem.hide();
	var $new_ztitem_tags = $new_ztitem.children('div.zt-tag');
	$new_ztitem_tags.hide();
	$new_ztitem.show();
	var expandCss={
	width:cache.ztdim.x + 'px',height:cache.ztdim.y + 'px',left:'0px',top:'0px',opacity:1}
;
	if( settings.rotation && !cache.ieLte8 )expandCss.rotate= '0deg';
	var imgAnimationCss={
	width:o_tag_w + 'px',height:o_tag_h + 'px',left:o_tag_l + 'px',top:o_tag_t + 'px',opacity:0}
;
	if( settings.rotation && !cache.ieLte8 )imgAnimationCss.rotate= o_tag_r + 'deg';
	$new_ztitem.append($('<img src="' + $ztimage.attr('src') + '" class="zt-temp"></img>').css( expandCss ))var $zttemp = $new_ztitem.find('img.zt-temp');
	$zttemp.applyStyle( imgAnimationCss,$.extend( true,[],{
	duration:speedfactor,complete:function(){
	$(this).remove();
}
}
) );
	if( !zoomAnimation )$zttemp.remove();
	$new_ztitemimage.delay( imgdelayfactor ).applyStyle({
	width:cache.ztdim.x + 'px',height:cache.ztdim.y + 'px',left:'0px',top:'0px'}
,$.extend( true,[],{
	duration:speedfactor,easing:settings.zoomoutEasing,complete:function(){
	viewport.zoomoutCallback( $new_ztitem_tags,cache );
}
}
) );
	if( !zoomAnimation )viewport.zoomoutCallback( $new_ztitem_tags,cache );
}
,zoomoutCallback:function( $new_ztitem_tags,cache ){
	$new_ztitem_tags.show();
	cache.animTour= false;
}
}
,methods={
	init:function( options ){
	if( this.length ){
	var settings ={
	rotation:true,// if true the tags are rotatedzoominEasing:'',// zoom out animation easing. ex:easeOutBounce,easeOutBackzoomoutEasing:''// zoom out animation easing.}
;
	return this.each(function(){
	// if options exist,lets merge them with our default settingsif ( options ){
	$.extend( settings,options );
}
var $ztcontainer= $(this),// the container's items / images$ztitems= $ztcontainer.children('div.zt-item'),// large images$ztimages= $ztitems.children('img.zt-current'),// the tags$zttags= $ztitems.children('div.zt-tag'),// some values we will need later..cache={
	// container's width & heightztdim:{
	x:$ztcontainer.width(),y:$ztcontainer.height()}
,// check if the browser is <= IE8ieLte8:($.browser.msie && parseInt($.browser.version) <= 8),// true if currently animatinganimTour:false}
;
	// add a loading image until all the images are loadedvar $loading= $('<div class="zt-loading"></div>').prependTo( $ztcontainer );
	// add the class with value "id" to each one of the items. We will need this later to access the items.$ztitems.each( function(){
	var $ztitem= $(this);
	$ztitem.addClass( $ztitem.data('id') );
}
);
	// distance from the container's center to one of its corners// this will be needed to calculate how much we rotate each tagif( settings.rotation && !cache.ieLte8 )cache.dist_center= Math.sqrt( Math.pow( ( cache.ztdim.x / 2 ),2 ) + Math.pow( ( cache.ztdim.y / 2 ),2 ) );
	$zttags.each(function(){
	var $tag= $(this);
	// save each tag's widh height left and toptag.saveInitialData( $tag );
	// rotate the tagsif( settings.rotation && !cache.ieLte8 && !$tag.hasClass('zt-tag-back') )tag.rotate( $tag,cache );
}
).hide();
	// hide the tags// show the first item$ztitems.not(':first').hide();
	// preload all large imagesvar loaded= 0,totalImages= $ztimages.length;
	$ztimages.each( function(){
	$('<img>').load( function(){
	++loadedif( loaded === totalImages ){
	// show all large images (just the first will be visible)$ztimages.show();
	// hide the loading image$loading.hide();
	// show the tags$zttags.show();
	// clicking one tag,zooms in / out$zttags.bind('click.zoomtour',function( e ){
	if( cache.animTour ) return false;
	cache.animTour= true;
	var $tag= $(this);
	viewport.zoom( $ztcontainer,$tag,cache,settings );
}
);
	// hide / show tags on mouse hover$ztcontainer.bind('mouseenter.zoomtour',function( e ){
	if( !cache.animTour )$zttags.show();
}
).bind('mouseleave.zoomtour',function( e ){
	if( !cache.animTour )$zttags.hide();
}
);
}
}
).attr( 'src',$(this).attr('src') );
}
);
}
);
}
}
}
;
	$.fn.zoomtour = function(method){
	if ( methods[method] ){
	return methods[method].apply( this,Array.prototype.slice.call( arguments,1 ));
}
else if ( typeof method === 'object' || ! method ){
	return methods.init.apply( this,arguments );
}
else{
	$.error( 'Method ' + method + ' does not exist on jQuery.zoomtour' );
}
}
;
}
)(jQuery);

CSS代码(style.css):

.zt-container{width:601px;height:450px;position:relative;overflow:hidden;margin:20px auto;background:#fff;border:7px solid #fff;-moz-box-shadow:1px 1px 3px #ddd;-webkit-box-shadow:1px 1px 3px #ddd;box-shadow:1px 1px 3px #ddd;}
img.zt-current{position:absolute;display:none;}
img.zt-temp{position:absolute;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
.zt-tag{position:absolute;z-index:10;border:2px solid #fff;background:transparent url(../images/tag.png) repeat top left;width:50px;height:37px;cursor:pointer;-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.7);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.7);box-shadow:1px 1px 2px rgba(0,0,0,0.7);}
.zt-tag-back{width:30px;height:20px;left:50%;bottom:0px;margin-left:-16px;background:#fff url(../images/back.png) no-repeat center center;-moz-border-radius:5px 5px 0px 0px;-webkit-border-radius:5px 5px 0px 0px;border-radius:5px 5px 0px 0px;border:1px solid #fff;border-bottom:none;}
.zt-loading{position:absolute;width:50px;height:50px;top:50%;left:50%;margin:-25px 0 0 -25px;opacity:0.8;z-index:99999;-moz-border-radius:10px 10px 10px 10px;-webkit-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;background:#fff url(../images/ajax-loader.gif) no-repeat center center;}

CSS代码(styleNoJS.css):

.zt-container{width:601px;height:auto;position:relative;overflow:visible;}
.zt-container img{position:relative;}
.zt-tag{display:none;}
img.zt-current{display:block;}

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