淘宝图片放大镜js代码（淘宝主图放大镜尺寸）

今天给各位分享淘宝图片放大镜js代码的知识，其中也会对淘宝主图放大镜尺寸进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、jquery图片放大镜代码解析注释
• 2、求人图片加一段JS代码就像淘宝那样点进去图片可以放大
• 3、淘宝图片放大镜的代码jQuery
• 4、给一个图片设置放大镜。跟淘宝的放大镜一样，代码怎么做。

jquery图片放大镜代码解析注释

(function($){//定义作用域

$.fn.imagezoom=function(options){/*自定义插件imageszoom，options代表形参（属性自定义）*/

var settings={

xzoom: 350, /*放大图的宽度(默认是 350)*/

yzoom: 350, /*放大图的高度(默认是 350)*/

offset: 10, /*离原图的距离(默认是 10)*/

position: "right", /*放大图的定位(默认是 "right")*/

preload:1

};

if(options){

$.extend(settings,options);

}

var noalt='';

var self=this;

$(this).bind("mouseenter",function(ev){/*鼠标经过时添加一个事件处理程序*/

var imageLeft=$(this).offset().left;

var imageTop=$(this).offset().top;

var imageWidth=$(this).get(0).offsetWidth;

var imageHeight=$(this).get(0).offsetHeight;

var boxLeft=$(this).parent().offset().left;

var boxTop=$(this).parent().offset().top;

var boxWidth=$(this).parent().width();

var boxHeight=$(this).parent().height();

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

var bigimage=$(this).attr("rel");

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

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

$(document.body).append("div class='zoomDiv'img class='bigimg' src='"+bigimage+"'//div"+

"div class='zoomMask' /div");

}

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

if(boxLeft+boxWidth+settings.offset+settings.xzoomscreen.width){

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

}else{

leftpos=boxLeft+boxWidth+settings.offset;

}

}else{

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

if(leftpos0){

leftpos=imageLeft+imageWidth+settings.offset;

}

}

$("div.zoomDiv").css({top:boxTop,left:leftpos});

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

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

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

$(this).css('cursor','crosshair');/*光标呈现十字线*/

$(document.body).mousemove(function(e){/*当移动鼠标时*/

mouse=new MouseEvent(e);

if(mouse.ximageLeft||mouse.ximageLeft+imageWidth||mouse.yimageTop||mouse.yimageTop+imageHeight){

mouseOutImage();/*判断鼠标是否超出图片范围*/

return;

}

var bigwidth=$(".bigimg").get(0).offsetWidth;/*最大宽度*/

var bigheight=$(".bigimg").get(0).offsetHeight;/*最大高度*/

var scaley='x';/*x轴比例 */

var scalex='y';/*y轴比例 */

/*随鼠标移动显示大图*/

if(isNaN(scalex)|isNaN(scaley)){/*x、y轴比例不是数字时*/

var scalex=(bigwidth/imageWidth);

var scaley=(bigheight/imageHeight);

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

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

$("div.zoomMask").css('visibility','visible');/*规定元素可见*/

}

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

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

xposs=mouse.x-$("div.zoomMask").width()/2-imageLeft;

yposs=mouse.y-$("div.zoomMask").height()/2-imageTop;

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

? imageLeft:(mouse.x+$(".zoomMask").width()/2imageWidth+imageLeft)

? (imageWidth+imageLeft-$("div.zoomMask").width()):xpos;

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

? imageTop:(mouse.y+$("div.zoomMask").height()/2imageHeight+imageTop)

? (imageHeight+imageTop-$("div.zoomMask").height()):ypos;

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

$("div.zoomDiv").get(0).scrollLeft=xposs*scalex;

$("div.zoomDiv").get(0).scrollTop=yposs*scaley;

});

});

function mouseOutImage(){/*定义鼠标离开图片方法*/

$(self).attr("alt",noalt);

$(document.body).unbind("mousemove");/*移除在页面中鼠标指针事件*/

$("div.zoomMask").remove();/*移除所有的div.zoomMask*/

$("div.zoomDiv").remove();/*移除所有的div.zoomDiv*/

}

count=0;

if(settings.preload){

/*在boby元素的结尾（仍然在内部）插入指定内容*/

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

$(this).each(function(){/*规定为每个匹配元素规定运行的函数*/

var imagetopreload=$(this).attr("rel");/*图片预加载*/

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

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

});

}

}

})(jQuery);

function MouseEvent(e){/*记录鼠标x，y坐标*/

this.x=e.pageX;/*鼠标指针位置*/

this.y=e.pageY;

}

求人图片加一段JS代码就像淘宝那样点进去图片可以放大

function toBig(){

$("#图片所在元素的id").css(“height”,“放大多少px”);

$("#图片所在元素的id").css(“width”,“放大多少px”);

}

淘宝图片放大镜的代码jQuery

网上很多啊 一搜便是 你若要可以发你 但效果需和你页面设计有关

给一个图片设置放大镜。跟淘宝的放大镜一样，代码怎么做。

你好，可以使用jquery的插件：jqzoom来实现。

下载地址：

演示的代码如下:

【以下并非原创】

lt;htmlgt;

lt;headgt;

lt;titlegt;JQzoom Demolt;/titlegt;

lt;script src="../js/jquery-1.3.2.min.js" type="text/javascript"gt;lt;/scriptgt;

lt;script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"gt;lt;/scriptgt;

lt;link rel="stylesheet" href="../css/jqzoom.css" type="text/css"gt;

lt;style type"text/css"gt;

div.notes{

font-size:12px;

}

div.notes a{

color:#990000;

}

lt;/stylegt;

lt;script type="text/javascript"gt;

$(function() {

$(".jqzoom").jqzoom();

});

lt;/scriptgt;

lt;/headgt;

lt;bodygt;

lt;div id="content" style="margin-top:100px;margin-left:100px;"gt;

lt;a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki"gt;

lt;img src="kawasakigreen_small.jpg" title="kawasakigreen" style="border: 1px solid #666;"gt;

lt;/agt;lt;select style="position:absolute;left:400px;top:10px;"gt;lt;optiongt;sdsdsdslt;/optiongt;lt;/selectgt;

lt;brgt;

lt;div class="notes"gt;

lt;smallgt;created by Renzi Marcolt;/smallgt;

lt;a href="A href="" target=_blank data_ue_src="";lt;/A"gt;Hire melt;/agt;lt;brgt;

lt;a href="A href="" target=_blank data_ue_src="";lt;/A"gt;view all Demoslt;/agt;

lt;/divgt;

lt;/divgt;

lt;/bodygt;lt;/htmlgt;

下面主要演示Jqzoom的方法！推荐一下！

代码如下:

lt;script type="text/javascript"gt;

window.onload = function() {

$(".jqzoom").jqueryzoom({

xzoom: 250, //设置放大 DIV 长度（默认为 200）

yzoom: 250, //设置放大 DIV 高度（默认为 200）

offset: 10, //设置放大 DIV 偏移（默认为 10）

position: "right", //设置放大 DIV 的位置（默认为右边）

preload: 1,

lens: 1

});

}

lt;/scriptgt;

关于淘宝图片放大镜js代码和淘宝主图放大镜尺寸的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。