使用jqzoom插件实现图片放大镜效果

jqzoom插件实现图片放大镜效果。

图1.1jqzoom插件实现图片放大镜效果

1、引入jqurty和jqzoom插件

<script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script>
<script src="/js/common/jquery.jqzoom.js" type="text/javascript"></script>
2、应用官方网站给定的样式
/*jQzoom*/
.jqzoom{
    border:1px solid #BBB;
    float:left;
    position:relative;
    padding:0px;
    cursor:pointer;
}
div.zoomdiv {
	z-index:	999;
	position                : absolute;
	top:0px;
	left:0px;
	width                   : 200px;
	height                  : 200px;
	background: #ffffff;
	border:1px solid #CCCCCC;
	display:none;
	text-align: center;
	overflow: hidden;
}
div.jqZoomPup {
	z-index                 : 999;
	visibility              : hidden;
	position                : absolute;
	top:0px;
	left:0px;
	width                   : 50px;
	height                  : 50px;
	border: 1px solid #aaa;
	background: #ffffff url(/images/shopping/zoomlens.gif) 50% top  no-repeat;
	opacity: 0.5;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	filter: alpha(Opacity=50);
}

3、编写HTML代码

<div class="jqzoom">
    <img src="/images/shopping/pro_img/blue_one_small.jpg" style="width:300px; height:300px;" alt=""  jqimg="/images/shopping/pro_img/blue_one_big.jpg" id="bigImg"/>
</div>
其中,在HTML代码中添加该插件自定义的jqimg属性,值为大图的文件路径。

4、查看官方网站的API使用说明,可以写出如下JS代码

/*使用jqzoom*/
$(function() {
    $(".jqzoom").jqueryzoom({
        xzoom: 300, //放大图的宽度(默认是 200)
        yzoom: 300, //放大图的高度(默认是 200)
        offset: 10, //离原图的距离(默认是 10)
        position: "right", //放大图的定位(默认是 "right")
        preload: 1
    });
});

* 附件

附件1:jquery.jqzoom.js

//**************************************************************
// jQZoom allows you to realize a small magnifier window,close
// to the image or images on your web page easily.
//
// jqZoom version 2.2
// Author Doc. Ing. Renzi Marco(www.mind-projects.it)
// First Release on Dec 05 2007
// i'm looking for a job,pick me up!!!
// mail: renzi.mrc@gmail.com
//**************************************************************

(function($){

		$.fn.jqueryzoom = function(options){

		var settings = {
				xzoom: 200,		//zoomed width default width
				yzoom: 200,		//zoomed div default width
				offset: 10,		//zoomed div default offset
				position: "right" ,//zoomed div default position,offset position is to the right of the image
				lens:1, //zooming lens over the image,by default is 1;
				preload: 1

			};

			if(options) {
				$.extend(settings, options);
			}

		    var noalt='';

		    $(this).hover(function(){
                
		    var imageLeft = $(this).offset().left;                
		    var imageTop = $(this).offset().top;

               
		    var imageWidth = $(this).children('img').get(0).offsetWidth;
		    var imageHeight = $(this).children('img').get(0).offsetHeight;


            noalt= $(this).children("img").attr("alt");

		    var bigimage = $(this).children("img").attr("jqimg");

            $(this).children("img").attr("alt",'');

		    if($("div.zoomdiv").get().length == 0){

		    $(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");


		    $(this).append("<div class='jqZoomPup'> </div>");

		    }


		    if(settings.position == "right"){

            if(imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width){

            leftpos = imageLeft  - settings.offset - settings.xzoom;

            }else{

		    leftpos = imageLeft + imageWidth + settings.offset;
            }
		    }else{
		    leftpos = imageLeft - settings.xzoom - settings.offset;
		    if(leftpos < 0){

            leftpos = imageLeft + imageWidth  + settings.offset;

		    }

		    }

		    $("div.zoomdiv").css({ top: imageTop,left: leftpos });

		    $("div.zoomdiv").width(settings.xzoom);

		    $("div.zoomdiv").height(settings.yzoom);

            $("div.zoomdiv").show();

            if(!settings.lens){
              $(this).css('cursor','crosshair');
			}




				   $(document.body).mousemove(function(e){



                   mouse = new MouseEvent(e);

                   /*$("div.jqZoomPup").hide();*/


				    var bigwidth = $(".bigimg").get(0).offsetWidth;

				    var bigheight = $(".bigimg").get(0).offsetHeight;

				    var scaley ='x';

				    var scalex= 'y';


				    if(isNaN(scalex)|isNaN(scaley)){

				    var scalex = (bigwidth/imageWidth);

				    var scaley = (bigheight/imageHeight);




				    $("div.jqZoomPup").width((settings.xzoom)/scalex );

		    		$("div.jqZoomPup").height((settings.yzoom)/scaley);

                    if(settings.lens){
                    $("div.jqZoomPup").css('visibility','visible');
					}

				   }

                    

                    xpos = mouse.x - $("div.jqZoomPup").width()/2 - imageLeft;

                    ypos = mouse.y - $("div.jqZoomPup").height()/2 - imageTop ;

                    if(settings.lens){

                    xpos = (mouse.x - $("div.jqZoomPup").width()/2 < imageLeft ) ? 0 : (mouse.x + $("div.jqZoomPup").width()/2 > imageWidth + imageLeft ) ?  (imageWidth -$("div.jqZoomPup").width() -2)  : xpos;

					ypos = (mouse.y - $("div.jqZoomPup").height()/2 < imageTop ) ? 0 : (mouse.y + $("div.jqZoomPup").height()/2  > imageHeight + imageTop ) ?  (imageHeight - $("div.jqZoomPup").height() -2 ) : ypos;

                    }


                    if(settings.lens){

                    $("div.jqZoomPup").css({ top: ypos,left: xpos });

                    }



					scrolly = ypos;

					$("div.zoomdiv").get(0).scrollTop = scrolly * scaley;

					scrollx = xpos;

					$("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;


				    });
		    },function(){

               $(this).children("img").attr("alt",noalt);
		       $(document.body).unbind("mousemove");
		       if(settings.lens){
		       $("div.jqZoomPup").remove();
		       }
		       $("div.zoomdiv").remove();

		    });

        count = 0;

		if(settings.preload){

		$('body').append("<div style='display:none;' class='jqPreload"+count+"'>sdsdssdsd</div>");

		$(this).each(function(){

        var imagetopreload= $(this).children("img").attr("jqimg");

        var content = jQuery('div.jqPreload'+count+'').html();

        jQuery('div.jqPreload'+count+'').html(content+'<img src=\"'+imagetopreload+'\">');

		});

		}

		}

})(jQuery);

function MouseEvent(e) {
      this.x = e.pageX;
      this.y = e.pageY;
}
附件2:放大镜图标(zoomlens.gif)



  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
/* * JQZoom Evolution 1.0.1 - Javascript Image magnifier * * Copyright (c) Engineer Renzi Marco(www.mind-projects.it) * * $Date: 12-12-2008 * * ChangeLog: * * $License : GPL,so any change to the code you should copy and paste this section,and would be nice to report this to me(renzi.mrc@gmail.com). */ (function($) { $.fn.jqzoom = function(options) { var settings = { zoomType: 'standard', //standard/reverse/innerzoom zoomWidth: 400, //zoomed width default width zoomHeight: 400, //zoomed div default width xOffset: 10, //zoomed div default offset yOffset: 0, position: "right" ,//zoomed div default position,offset position is to the right of the image lens:true, //zooming lens over the image,by default is 1; lensReset : false, imageOpacity: 0.2, title : true, alwaysOn: false, showEffect: 'show', hideEffect: 'hide', fadeinSpeed: 'fast', fadeoutSpeed: 'slow', preloadImages :true, showPreload: true, preloadText : 'Loading zoom', preloadPosition : 'center' //bycss }; //extending options options = options || {}; $.extend(settings, options); return this.each(function() { var a = $(this); var aTitle = a.attr('title'); //variabile per memorizzare il titolo href $(a).removeAttr('title'); $(a).css('outline-style','none'); var img = $("img", this); var imageTitle = img.attr('title'); img.removeAttr('title'); //variabile per memorizzare il titolo immagine var smallimage = new Smallimage( img ); var smallimagedata = {}; //imageborder var btop = 0; var bleft = 0; var loader = null; //variabile per memorizzare oggetto loader loader = new Loader(); var ZoomTitle = (trim(aTitle).length > 0) ? aTitle : (trim(imageTitle).length > 0) ? imageTitle : null; //setting zoomtitle var ZoomTitleObj = new zoomTitle(); var largeimage = new Largeimage( a[0].href ); var lens = new Lens(); var lensdata = {}; //lensborder var largeimageloaded = false; var scale = {}; //rapporto tra immagine grande e piccola scale.x/scale.y var stage = null; // quadrato che mostra l'immagine ingrandita var running = false; // running = true quando si verifica l'evento che mostra lo zoom(adesso mouseover). var mousepos = {}; var firstime = 0; var preloadshow = false; var isMouseDown = false; var dragstatus = false //loading smallimagedata smallimage.loadimage(); //ritorna false al click dell href $(this).click(function(){return false;}); //se settato alwaysOn attivo lo Zoom e lo mostro. //attivo al mouseover $(this).hover(function(e) { mousepos.x = e.pageX; mousepos.y = e.pageY; activate(); },function() { deactivate(); }); //ALWAYS ON if(settings.alwaysOn) { setTimeout(function(){activate();},150); } function activate() { if ( !running ) { //finding border smallimage.findborder(); running = true; //rimuovo il titolo al mouseover imageTitle = img.attr('title'); img.removeAttr('title'); aTitle = a.attr('title'); $(a).removeAttr('title'); //se non c?creo l'oggetto largeimage if (!largeimage || $.browser.safari) { largeimage = new Largeimage( a[0].href ); } //se l'immagine grande non ?stata caricata la carico if(!largeimageloaded || $.browser.safari) { largeimage.loadimage(); }else { //after preload if(settings.zoomType != 'innerzoom') { stage = new Stage(); stage.activate(); } lens = new Lens; lens.activate(); } //hack per MAC /* if($.browser.safari) { if(settings.zoomType != 'innerzoom') //se innerzoom non mostro la finestra dello zoom { stage = new Stage(); stage.activate(); } if($('div.jqZoomPup').length <= 0) { lens = new Lens(); } //if(settings.zoomType == 'innerzoom'){lens = new Lens()}; lens.activate(); (settings.alwaysOn) ? lens.center() : lens.setposition(null); } */ a[0].blur(); //alert($('div.jqZoomPup').length); return false; } } function deactivate() { if(settings.zoomType == 'reverse' && !settings.alwaysOn) { img.css({'opacity' : 1}); } if(!settings.alwaysOn) { //resetting parameters running = false; largeimageloaded = false; $(lens.node).unbind('mousemove'); lens.remove(); if($('div.jqZoomWindow').length >0) { stage.remove(); } if($('div.jqZoomTitle').length > 0) { ZoomTitleObj.remove(); } //resetting title img.attr('title',imageTitle); a.attr('title',aTitle); $().unbind(); a.unbind('mousemove'); //resetto il parametro che mi dice che ?la prima volta che mostor lo zoom firstime = 0; //remove ieiframe if(jQuery('.zoom_ieframe').length > 0) { jQuery('.zoom_ieframe').remove(); } }else { if(settings.lensReset) { switch(settings.zoomType) { case 'innerzoom': largeimage.setcenter(); break; default: lens.center(); break; } } } //non so se serve da provare if(settings.alwaysOn) { activate(); } }; //smallimage function Smallimage( image ) { this.node = image[0]; this.loadimage = function() { this.node.src = image[0].src; }; this.findborder = function() { var bordertop = ''; bordertop = $(img).css('border-top-width'); btop = ''; var borderleft = ''; borderleft = $(img).css('border-left-width'); bleft = ''; /*if($.browser.msie) { var temp = bordertop.split(' '); bordertop = temp[1]; var temp = borderleft.split(' '); borderleft = temp[1]; }*/ if(bordertop) { for(i=0;i<3;i++) { var x = []; x = bordertop.substr(i,1); if(isNaN(x) == false) { btop = btop +''+ bordertop.substr(i,1); }else { break; } } } if(borderleft) { for(i=0;i<3;i++) { if(!isNaN(borderleft.substr(i,1))) { bleft = bleft + borderleft.substr(i,1) }else { break; } } } btop = (btop.length > 0) ? eval(btop) : 0; bleft = (bleft.length > 0) ? eval(bleft) : 0; } this.node.onload = function() { //setto il cursor e la posizione dell'href a.css({'cursor':'crosshair','display':'block'}); if(a.css('position')!= 'absolute' && a.parent().css('position')) { a.css({'cursor':'crosshair','position':'relative','display':'block'}); } if(a.parent().css('position') != 'absolute') { a.parent().css('position','relative'); //a.css('position','relative'); } else{ //a.css('position','relative'); } if($.browser.safari || $.browser.opera) { $(img).css({position:'absolute',top:'0px',left:'0px'}); } /*if(a.css('position')!= 'absolute' && a.parent().css('position')) { a.css({'cursor':'crosshair','position':'relative','display':'block'}); } if(a.parent().css('position') != 'absolute') { alert('in'); a.parent().css('position','relative'); //a.css('position','relative'); } else{ //a.css('position','relative'); }*/ /* if(a.parent().css('position') != 'relative' && a.css('position') != 'absolute') { a.css({'cursor':'crosshair','position':'relative','display':'block'}); }*/ //al docuemnt ready viene caricato l'src quindi viene azionato l'onload e carico tutti i dati smallimagedata.w = $( this ).width(); smallimagedata.h = $( this ).height(); //non viene fatta assegnazione alla variabile globale smallimagedata.h = $( this ).height(); smallimagedata.pos = $( this ).offset(); smallimagedata.pos.l = $( this ).offset().left; smallimagedata.pos.t = $( this ).offset().top; smallimagedata.pos.r = smallimagedata.w + smallimagedata.pos.l; smallimagedata.pos.b = smallimagedata.h + smallimagedata.pos.t; //per sicurezza setto l'altezza e la width dell'href a.height(smallimagedata.h); a.width(smallimagedata.w); //PRELOAD IMAGES if(settings.preloadImages) { largeimage.loadimage(); } }; return this; }; //Lens function Lens() { //creating element and adding class this.node = document.createElement("div"); $(this.node).addClass('jqZoomPup'); this.node.onerror = function() { $( lens.node ).remove(); lens = new Lens(); lens.activate() ; }; //funzione privata per il caricamento dello zoom this.loadlens = function() { switch(settings.zoomType) { case 'reverse': this.image = new Image(); this.image.src = smallimage.node.src; // fires off async this.node.appendChild( this.image ); $( this.node ).css({'opacity' : 1}); break; case 'innerzoom': this.image = new Image(); this.image.src = largeimage.node.src; // fires off async this.node.appendChild( this.image ); $( this.node ).css({'opacity' : 1}); break default: break; } switch(settings.zoomType) { case 'innerzoom': lensdata.w = smallimagedata.w; lensdata.h = smallimagedata.h; break; default: lensdata.w = (settings.zoomWidth)/scale.x; lensdata.h = (settings.zoomHeight)/scale.y; break; } $( this.node ).css({ width: lensdata.w + 'px', height: lensdata.h + 'px', position: 'absolute', /*cursor: 'crosshair',*/ display: 'none', //border: '1px solid blue' borderWidth: 1+'px' }); a.append(this.node); } return this; }; Lens.prototype.activate = function() { //carico la lente this.loadlens(); switch(settings.zoomType) { case 'reverse': img.css({'opacity' : settings.imageOpacity}); (settings.alwaysOn) ? lens.center() : lens.setposition(null); //lens.center(); //bindo ad a il mousemove della lente a.bind( 'mousemove', function(e) { mousepos.x = e.pageX; mousepos.y = e.pageY; lens.setposition( e ); }); break; case 'innerzoom': // lens = new Lens(); // lens.activate(); $( this.node ).css({top : 0 ,left: 0}); if(settings.title) { ZoomTitleObj.loadtitle(); } largeimage.setcenter(); a.bind( 'mousemove', function(e) { mousepos.x = e.pageX; mousepos.y = e.pageY; largeimage.setinner( e ); /*if(settings.zoomType == 'innerzoom' && running) { $(a).mousemove(function(){ if($('div.jqZoomPup').length <= 0) { lens = new Lens(); lens.activate(); } }); }*/ /*if($('div.jqZoomPup').length <= 0) { lens = new Lens(); lens.activate(); }*/ }); break; default: /*$(document).mousemove(function(e){ if(isMouseDown && dragstatus != false){ lens.setposition( e ); } }); lens.center() dragstatus = 'on' $(document).mouseup(function(e){ if(isMouseDown && dragstatus != false){ isMouseDown = false; dragstatus = false; } }); $(this.node).mousedown(function(e){ $('div.jqZoomPup').css("cursor", "move"); $(this.node).css("position", "absolute"); // set z-index $(this.node).css("z-index", parseInt( new Date().getTime()/1000 )); if($.browser.safari) { $(a).css("cursor", "move"); } isMouseDown = true; dragstatus = 'on'; lens.setposition( e ); }); */ (settings.alwaysOn) ? lens.center() : lens.setposition(null); //bindo ad a il mousemove della lente $(a).bind( 'mousemove', function(e) { mousepos.x = e.pageX; mousepos.y = e.pageY; lens.setposition( e ); }); break; } return this; }; Lens.prototype.setposition = function( e) { if(e) { mousepos.x = e.pageX; mousepos.y = e.pageY; } if(firstime == 0) { var lensleft = (smallimagedata.w)/2 - (lensdata.w)/2 ; var lenstop = (smallimagedata.h)/2 - (lensdata.h)/2 ; //ADDED $('div.jqZoomPup').show() if(settings.lens) { this.node.style.visibility = 'visible'; } else { this.node.style.visibility = 'hidden'; $('div.jqZoomPup').hide(); } //ADDED firstime = 1; }else { var lensleft = mousepos.x - smallimagedata.pos.l - (lensdata.w)/2 ; var lenstop = mousepos.y - smallimagedata.pos.t -(lensdata.h)/2 ; } //a sinistra if(overleft()) { lensleft = 0 + bleft; }else //a destra if(overright()) { if($.browser.msie) { lensleft = smallimagedata.w - lensdata.w + bleft + 1 ; }else { lensleft = smallimagedata.w - lensdata.w + bleft - 1 ; } } //in alto if(overtop()) { lenstop = 0 + btop ; }else //sotto if(overbottom()) { if($.browser.msie) { lenstop = smallimagedata.h - lensdata.h + btop + 1 ; }else { lenstop = smallimagedata.h - lensdata.h - 1 + btop ; } } lensleft = parseInt(lensleft); lenstop = parseInt(lenstop); //setto lo zoom ed un eventuale immagine al centro $('div.jqZoomPup',a).css({top: lenstop,left: lensleft }); if(settings.zoomType == 'reverse') { $('div.jqZoomPup img',a).css({'position': 'absolute','top': -( lenstop - btop +1) ,'left': -(lensleft - bleft +1) }); } this.node.style.left = lensleft + 'px'; this.node.style.top = lenstop + 'px'; //setto l'immagine grande largeimage.setposition(); function overleft() { return mousepos.x - (lensdata.w +2*1)/2 - bleft < smallimagedata.pos.l; } function overright() { return mousepos.x + (lensdata.w + 2* 1)/2 > smallimagedata.pos.r + bleft ; } function overtop() { return mousepos.y - (lensdata.h + 2* 1)/2 - btop < smallimagedata.pos.t; } function overbottom() { return mousepos.y + (lensdata.h + 2* 1)/2 > smallimagedata.pos.b + btop; } return this; }; //mostra la lente al centro dell'immagine Lens.prototype.center = function() { $('div.jqZoomPup',a).css('display','none'); var lensleft = (smallimagedata.w)/2 - (lensdata.w)/2 ; var lenstop = (smallimagedata.h)/2 - (lensdata.h)/2; this.node.style.left = lensleft + 'px'; this.node.style.top = lenstop + 'px'; $('div.jqZoomPup',a).css({top: lenstop,left: lensleft }); if(settings.zoomType == 'reverse') { /*if($.browser.safari){ alert('safari'); alert(2*bleft); $('div.jqZoomPup img',a).css({'position': 'absolute','top': -( lenstop - btop +1) ,'left': -(lensleft - 2*bleft) }); }else {*/ $('div.jqZoomPup img',a).css({'position': 'absolute','top': -(lenstop - btop + 1) ,'left': -( lensleft - bleft +1) }); //} } largeimage.setposition(); if($.browser.msie) { $('div.jqZoomPup',a).show(); }else { setTimeout(function(){$('div.jqZoomPup').fadeIn('fast');},10); } }; //ritorna l'offset Lens.prototype.getoffset = function() { var o = {}; o.left = parseInt(this.node.style.left) ; o.top = parseInt(this.node.style.top) ; return o; }; //rimuove la lente Lens.prototype.remove = function() { if(settings.zoomType == 'innerzoom') { $('div.jqZoomPup',a).fadeOut('fast',function(){/*$('div.jqZoomPup img').remove();*/$(this).remove();}); }else { //$('div.jqZoomPup img').remove(); $('div.jqZoomPup',a).remove(); } }; Lens.prototype.findborder = function() { var bordertop = ''; bordertop = $('div.jqZoomPup').css('borderTop'); //alert(bordertop); lensbtop = ''; var borderleft = ''; borderleft = $('div.jqZoomPup').css('borderLeft'); lensbleft = ''; if($.browser.msie) { var temp = bordertop.split(' '); bordertop = temp[1]; var temp = borderleft.split(' '); borderleft = temp[1]; } if(bordertop) { for(i=0;i<3;i++) { var x = []; x = bordertop.substr(i,1); if(isNaN(x) == false) { lensbtop = lensbtop +''+ bordertop.substr(i,1); }else { break; } } } if(borderleft) { for(i=0;i<3;i++) { if(!isNaN(borderleft.substr(i,1))) { lensbleft = lensbleft + borderleft.substr(i,1) }else { break; } } } lensbtop = (lensbtop.length > 0) ? eval(lensbtop) : 0; lensbleft = (lensbleft.length > 0) ? eval(lensbleft) : 0; } //LARGEIMAGE function Largeimage( url ) { this.url = url; this.node = new Image(); /*if(settings.preloadImages) { preload.push(new Image()); preload.slice(-1).src = url ; }*/ this.loadimage = function() { if(!this.node) this.node = new Image(); this.node.style.position = 'absolute'; this.node.style.display = 'none'; this.node.style.left = '-5000px'; this.node.style.top = '10px'; loader = new Loader(); if(settings.showPreload && !preloadshow) { loader.show(); preloadshow = true; } document.body.appendChild( this.node ); this.node.src = this.url; // fires off async } this.node.onload = function() { this.style.display = 'block'; var w = Math.round($(this).width()); var h = Math.round($(this).height()); this.style.display = 'none'; //setting scale scale.x = (w / smallimagedata.w); scale.y = (h / smallimagedata.h); if($('div.preload').length > 0) { $('div.preload').remove(); } largeimageloaded = true; if(settings.zoomType != 'innerzoom' && running){ stage = new Stage(); stage.activate(); } if(running) { //alert('in'); lens = new Lens(); lens.activate() ; } //la attivo if($('div.preload').length > 0) { $('div.preload').remove(); } } return this; } Largeimage.prototype.setposition = function() { this.node.style.left = Math.ceil( - scale.x * parseInt(lens.getoffset().left) + bleft) + 'px'; this.node.style.top = Math.ceil( - scale.y * parseInt(lens.getoffset().top) +btop) + 'px'; }; //setto la posizione dell'immagine grande nel caso di innerzoom Largeimage.prototype.setinner = function(e) { this.node.style.left = Math.ceil( - scale.x * Math.abs(e.pageX - smallimagedata.pos.l)) + 'px'; this.node.style.top = Math.ceil( - scale.y * Math.abs(e.pageY - smallimagedata.pos.t)) + 'px'; $('div.jqZoomPup img',a).css({'position': 'absolute','top': this.node.style.top,'left': this.node.style.left }); }; Largeimage.prototype.setcenter = function() { this.node.style.left = Math.ceil(- scale.x * Math.abs((smallimagedata.w)/2)) + 'px'; this.node.style.top = Math.ceil( - scale.y * Math.abs((smallimagedata.h)/2)) + 'px'; $('div.jqZoomPup img',a).css({'position': 'absolute','top': this.node.style.top,'left': this.node.style.left }); }; //STAGE function Stage() { var leftpos = smallimagedata.pos.l; var toppos = smallimagedata.pos.t; //creating element and class this.node = document.createElement("div"); $(this.node).addClass('jqZoomWindow'); $( this.node ) .css({ position: 'absolute', width: Math.round(settings.zoomWidth) + 'px', height: Math.round(settings.zoomHeight) + 'px', display: 'none', zIndex: 10000, overflow: 'hidden' }); //fa il positionamento switch(settings.position) { case "right": leftpos = (smallimagedata.pos.r + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width) ? (smallimagedata.pos.l + smallimagedata.w + Math.abs(settings.xOffset)) : (smallimagedata.pos.l - settings.zoomWidth - Math.abs(settings.xOffset)); topwindow = smallimagedata.pos.t + settings.yOffset + settings.zoomHeight; toppos = (topwindow < screen.height && topwindow > 0) ? smallimagedata.pos.t + settings.yOffset : smallimagedata.pos.t; break; case "left": leftpos = (smallimagedata.pos.l - Math.abs(settings.xOffset) - settings.zoomWidth > 0) ? (smallimagedata.pos.l - Math.abs(settings.xOffset) - settings.zoomWidth) : (smallimagedata.pos.l + smallimagedata.w + Math.abs(settings.xOffset)); topwindow = smallimagedata.pos.t + settings.yOffset + settings.zoomHeight; toppos = (topwindow < screen.height && topwindow > 0) ? smallimagedata.pos.t + settings.yOffset : smallimagedata.pos.t; break; case "top": toppos = (smallimagedata.pos.t - Math.abs(settings.yOffset) - settings.zoomHeight > 0) ? (smallimagedata.pos.t - Math.abs(settings.yOffset) - settings.zoomHeight) : (smallimagedata.pos.t + smallimagedata.h + Math.abs(settings.yOffset)); leftwindow = smallimagedata.pos.l + settings.xOffset + settings.zoomWidth; leftpos = (leftwindow < screen.width && leftwindow > 0) ? smallimagedata.pos.l + settings.xOffset : smallimagedata.pos.l; break; case "bottom": toppos = (smallimagedata.pos.b + Math.abs(settings.yOffset) + settings.zoomHeight < $('body').height()) ? (smallimagedata.pos.b + Math.abs(settings.yOffset)) : (smallimagedata.pos.t - settings.zoomHeight - Math.abs(settings.yOffset)); leftwindow = smallimagedata.pos.l + settings.xOffset + settings.zoomWidth; leftpos = (leftwindow < screen.width && leftwindow > 0) ? smallimagedata.pos.l + settings.xOffset : smallimagedata.pos.l; break; default: leftpos = (smallimagedata.pos.l + smallimagedata.w + settings.xOffset + settings.zoomWidth < screen.width) ? (smallimagedata.pos.l + smallimagedata.w + Math.abs(settings.xOffset)) : (smallimagedata.pos.l - settings.zoomWidth - Math.abs(settings.xOffset)); toppos = (smallimagedata.pos.b + Math.abs(settings.yOffset) + settings.zoomHeight < screen.height) ? (smallimagedata.pos.b + Math.abs(settings.yOffset)) : (smallimagedata.pos.t - settings.zoomHeight - Math.abs(settings.yOffset)); break; } this.node.style.left = leftpos + 'px'; this.node.style.top = toppos + 'px'; return this; } Stage.prototype.activate = function() { if ( !this.node.firstChild ) this.node.appendChild( largeimage.node ); if(settings.title) { ZoomTitleObj.loadtitle(); } document.body.appendChild( this.node ); switch(settings.showEffect) { case 'show': $(this.node).show(); break; case 'fadein': $(this.node).fadeIn(settings.fadeinSpeed); break; default: $(this.node).show(); break; } $(this.node).show(); if ($.browser.msie && $.browser.version < 7) { this.ieframe = $('<iframe class="zoom_ieframe" frameborder="0" src="#"></iframe>') .css({ position: "absolute", left:this.node.style.left,top:this.node.style.top,zIndex: 99,width:settings.zoomWidth,height:settings.zoomHeight }) .insertBefore(this.node); }; largeimage.node.style.display = 'block'; } Stage.prototype.remove = function() { switch(settings.hideEffect) { case 'hide': $('.jqZoomWindow').remove(); break; case 'fadeout': $('.jqZoomWindow').fadeOut(settings.fadeoutSpeed); break; default: $('.jqZoomWindow').remove(); break; } } function zoomTitle() { this.node = jQuery('<div />') .addClass('jqZoomTitle') .html('' + ZoomTitle +''); this.loadtitle = function() { if(settings.zoomType == 'innerzoom') { $(this.node) .css({position: 'absolute', top: smallimagedata.pos.b +3, left: (smallimagedata.pos.l+1), width:smallimagedata.w }) .appendTo('body'); }else { $(this.node).appendTo(stage.node); } }; } zoomTitle.prototype.remove = function() { $('.jqZoomTitle').remove(); } function Loader() { this.node = document.createElement("div"); $(this.node).addClass('preload'); $(this.node).html(settings.preloadText);//appendo il testo $(this.node ) .appendTo("body") .css('visibility','hidden'); this.show = function() { switch(settings.preloadPosition) { case 'center': loadertop = smallimagedata.pos.t + (smallimagedata.h - $(this.node ).height())/2; loaderleft = smallimagedata.pos.l + (smallimagedata.w - $(this.node ).width())/2; break; default: var loaderoffset = this.getoffset(); loadertop = !isNaN(loaderoffset.top) ? smallimagedata.pos.t + loaderoffset.top : smallimagedata.pos.t + 0; loaderleft = !isNaN(loaderoffset.left) ? smallimagedata.pos.l + loaderoffset.left : smallimagedata.pos.l + 0; break; } //setting position $(this.node).css({ top: loadertop , left: loaderleft , position: 'absolute', visibility:'visible' }); } return this; } Loader.prototype.getoffset = function() { var o = null; o = $('div.preload').offset(); return o; } }); } })(jQuery); function trim(stringa) { while (stringa.substring(0,1) == ' '){ stringa = stringa.substring(1, stringa.length); } while (stringa.substring(stringa.length-1, stringa.length) == ' '){ stringa = stringa.substring(0,stringa.length-1); } return stringa; }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pan_junbiao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值