图片放大镜jquery.jqzoom.js使用实例附放大镜图标

1.jquery.jqzoom.js

//* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * jQZoom可以让你实现一个小型的放大镜窗口，关闭//到你网页上的一个或多个图像就可以轻松了////jqZoom 2.2版//作者文档Ing .伦齐马尔科(www .思维计划。it)//2007年12月05日首次发布//我正在找工作，接我吧！//mail :[email protected]/* * * * * * * * * * * * * * * * * * * * * * * * * function($){ $。fn。jqueryzoom=函数(选项){ var settings={ xzoom : 200，//缩放宽度默认widthyzoom: 200，//缩放差异默认widthoffset: 10，//缩放差异默认offsetposition: '右'，//缩放差异默认位置，偏移位置预加载： { 1 };if (options){$ .扩展（设置，选项);} var noalt=$(这个)。悬停(function () {var imageLeft=$(this)).偏移量()。向左；var imageTop=$(this).偏移量()。顶部；var imageWidth=$(this).儿童(' img ').获取(0)。offsetwitthvar imageHeight=$(this).儿童(' img ').获取(0)。偏右；noalt=$(this).儿童(' img ').attr(' alt ')；var bigimage=$(this).儿童(' img ').attr(' jqimg ')；$(这个)。儿童(' img ').attr('alt '，' ')；if ($('div.zoomdiv ').get().长度==0){$(this).在(' div class=' zoom div ' img class=' big img ' src=' big image ' '//div ')之后；$(这个)。追加(' div class=' jqZoomPup '/div ')；} if(设置。position==' right '){ if(imageLeft imageWidth设置。偏移设置。xzoom屏幕。宽度){ left pos=imageLeft-设置。偏移设置。xzoom} else { left pos=imageLeft imageWidth设置。偏移；} } else { left pos=imageLeft-settings。xzoom-设置。偏移；if(左侧位置0){左侧位置=imageLeft imageWidth设置。偏移；}}$('div.zoomdiv ').css({ top: imageTop，left : left pos })；$('div.zoomdiv ').宽度(设置。xzoom)；$('div.zoomdiv ').高度(设置。yzoom)；$('div.zoomdiv ').show()；if(！settings.lens){$(this).css(“”光标','十字准线');}$(document.body).鼠标移动(函数(e){ mouse=新鼠标事件(e))；/*$('div.jqZoomPup ').hide()；*/var bigwidth=$(' .大img ').获取(0)。offsetWidthvar八十八=$('。大img ').获取(0)。偏右；var scaley=' xvar scalex=' yif(isNaN(scalex)| isNaN(scaley)){ var scalex=(big width/imageWidth)；var scaley=(大大腿/imageHeight)；$('div.jqZoomPup ').宽度((设置。xzoom)/scalex)；$('div.jqZoomPup ').高度((设置。yzoom)/scaley)；if(设置。镜头){ $(' div。jqzoompup ').' CSS('可见','可见');} } xpos=鼠标。x-$(' div。jqzoompup ').width()/2-imageLeft；ypos=mouse.y - $('div.jqZoomPup ').height()/2-imageTop；if(设置。镜头){ xpos=(鼠标。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 ').高度()/2 imageTop)？0 : (mouse.y $('div.jqZoomPup ').height()/2 imageHeight imageTop)？(imageHeight - $('div.jqZoomPup ').高度()-2): ypos；} if(设置。镜头){ $(' div。jqzoompup ').css({ top: ypos，left : xpos })；} scrolly=ypos$('div.zoomdiv ').获取(0)。scroll ToP=scrolly * scaleyscrollx=xpos $(' div . zoomdiv ').获取(0)。scrolleft=(scrollx)* scalex；});}，function () {$(this).儿童(' img ').attr('alt '，noalt)；$(document.body).解除绑定(“鼠标移动”)；if(设置。镜头){ $(' div。jqzoompup ').移除();}$('div.zoomdiv ').移除();});计数=0;if (settings.preload){$('body ').追加(' div style=' display : none ' class=' jqPreload ' count ' ' sdsdsdsdssdsd/div ')；$(这个)。每个（函数(){var imagetopreload=$(this)).儿童(' img ').attr(' jqimg ')；var content=jQuery(' div。jqpreload ' count ' ').html()；jQuery('div.jqPreload' count ' ').html(内容img src=\ ' ' imagetopreload ' \ ')；});} } })(jQuery)；函数MouseEvent(e){ this。x=e . PageX这个。y=e . Pagey}2.jqzoom.css

/*jQzoom*/.jqzoom {边框：1 px实心# BBBfloat:left位置：相对；padding:0pxcursor:pointer指针指针；} div。zoomdiv { z-index : 999位置：绝对；top:0pxleft:0px宽度： 200像素高度： 200pxbackground : # ffffffborder :1 px固体# CCCCCC；display:none文本对齐：中心；飞越：隐藏；} div。jqzoompup { z-index : 999能见度：隐藏；位置：绝对；top:0pxleft:0px宽度： 50px高度： 50pxborder: 1px实心# aaa背景： #ffffff url(./images/zoomlens.gif)前50%不重复；opa city 3360 0.5-moz-opa city 3360 0.5；-khtml-opa市3360 0.5；filter: alpha(不透明度=50);}3.超文本标记语言代码

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title/title script src=' http : jquery-1。8 .2 .量滴js ' type=' text/JavaScript '/script script src='使用jqzoom*/$(function() {$(').' jqzoom ' .jqueryzoom({xzoom: 400，//放大图的宽度（默认是200)yzoom: 400，//放大图的高度（默认是200)offset: 10，//离原图的距离（默认是10)位置： '右'//放大图的定位（默认是右)预加载： 1 });});/script/head dydiv class=' jqzoom ' img src=' http : images/shoe 1 _ small。jpg ' style=' width :300 pxheight :300 px ' alt=' jqimg=' images/shoe 1 _ big。jpg ' id=' BigIMg '/div/body/html附件：放大镜图标