求一個(gè)簡(jiǎn)單的點(diǎn)擊圖片放大縮小的JS代碼

1、準(zhǔn)備好需要用到的圖標(biāo)。

目前成都創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、馬關(guān)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

2、新建html文檔。

3、書寫hmtl代碼。div id=allbox?? ?div id=boxhome?? ??? ?img style="WIDTH: 107px; BOTTOM: 5px; HEIGHT: 176px; LEFT: 10px" id=imgSmallLeft class=imgBorder onClick="clearInterval(autoplay);moveD('l');"? ? 。

4、書寫并添加js代碼。script src="js/ntes_jslib_1.x.js"/scriptscript src="js/zzsc.js"/script。

5、代碼整體結(jié)構(gòu)。

6、查看效果。

jquery圖片放大鏡代碼解析注釋

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

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

var settings={

xzoom: 350, /*放大圖的寬度(默認(rèn)是 350)*/

yzoom: 350, /*放大圖的高度(默認(rèn)是 350)*/

offset: 10, /*離原圖的距離(默認(rèn)是 10)*/

position: "right", /*放大圖的定位(默認(rèn)是 "right")*/

preload:1

};

if(options){

$.extend(settings,options);

}

var noalt='';

var self=this;

$(this).bind("mouseenter",function(ev){/*鼠標(biāo)經(jīng)過時(shí)添加一個(gè)事件處理程序*/

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');/*光標(biāo)呈現(xiàn)十字線*/

$(document.body).mousemove(function(e){/*當(dāng)移動(dòng)鼠標(biāo)時(shí)*/

mouse=new MouseEvent(e);

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

mouseOutImage();/*判斷鼠標(biāo)是否超出圖片范圍*/

return;

}

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

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

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

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

/*隨鼠標(biāo)移動(dòng)顯示大圖*/

if(isNaN(scalex)|isNaN(scaley)){/*x、y軸比例不是數(shù)字時(shí)*/

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');/*規(guī)定元素可見*/

}

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(){/*定義鼠標(biāo)離開圖片方法*/

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

$(document.body).unbind("mousemove");/*移除在頁(yè)面中鼠標(biāo)指針事件*/

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

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

}

count=0;

if(settings.preload){

/*在boby元素的結(jié)尾（仍然在內(nèi)部）插入指定內(nèi)容*/

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

$(this).each(function(){/*規(guī)定為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)*/

var imagetopreload=$(this).attr("rel");/*圖片預(yù)加載*/

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

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

});

}

}

})(jQuery);

function MouseEvent(e){/*記錄鼠標(biāo)x，y坐標(biāo)*/

this.x=e.pageX;/*鼠標(biāo)指針位置*/

this.y=e.pageY;

}

怎么在網(wǎng)頁(yè)中實(shí)現(xiàn)圖片點(diǎn)擊變大？

1.引用JS

script type="text/javascript" src=""/script

script type="text/javascript" src=""/script

link href="" rel="stylesheet" type="text/css" /

/script

script type="text/javascript"

$(function() {

$('.showPic').lightBox();

});

/script

2.在連接中調(diào)用，class="showPic"是必要的

a href="" target="_blank" class="showPic" title="標(biāo)題:V6P08-V8P08-V1P08br尺寸:600x600 800x800 1000x1000mm"img src="" width="150" height="150" border="0"/a

3.js自已下載

分享標(biāo)題：jquery點(diǎn)擊放大圖片,點(diǎn)擊圖片實(shí)現(xiàn)放大圖片
文章網(wǎng)址：http://chinadenli.net/article49/dsiiphh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、小程序開發(fā)、網(wǎng)站營(yíng)銷、企業(yè)網(wǎng)站制作、面包屑導(dǎo)航、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)