jquery實(shí)現(xiàn)淘寶商品圖片局部放大
本篇博文用于簡單記錄圖片放大功能實(shí)現(xiàn),供大家參考,具體內(nèi)容如下
功能實(shí)現(xiàn)還存在一些小漏洞在文章結(jié)尾提出,希望各位指正
1、圖片放大初考慮將圖片轉(zhuǎn)換為字體圖片形式,然后進(jìn)行放大處理,但最終本人技術(shù)不過關(guān)無法實(shí)現(xiàn),后用width: 200%;進(jìn)行一般的圖片放大,所以當(dāng)圖片越大就存在一些失真;
2、圖片放大后的顯示為本次實(shí)現(xiàn)的關(guān)鍵,通過獲取鼠標(biāo)指針的位置從而獲取指針在圖片的那一個(gè)位置,再以當(dāng)前位置進(jìn)行圖片放大,放大后將圖片進(jìn)行偏移,偏移量以鼠標(biāo)指針在原圖的位置上獲取的left和top值乘以放大倍數(shù)就可以顯示局部放大的功能了
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="UTF-8"> ?? ??? ?<title></title> ?? ??? ?<script type="text/javascript" src="../js/jquery-1.10.2.js" ></script> ?? ??? ?<style> ?? ??? ??? ?*{margin: 0;padding: 0;} ?? ??? ??? ?.div1{ ?? ??? ??? ??? ?width: 450px; ?? ??? ??? ??? ?height: 300px; ?? ??? ??? ??? ?overflow: hidden; ?? ??? ??? ??? ?display: inline-block; ?? ??? ??? ?} ?? ??? ??? ?.div1>img{width: 100%;} ?? ??? ??? ?.div2{ ?? ??? ??? ??? ?width: 450px; ?? ??? ??? ??? ?height: 300px; ?? ??? ??? ??? ?border: 1px solid #A9A9A9; ?? ??? ??? ??? ?overflow: hidden; ?? ??? ??? ??? ?display: inline-block; ?? ??? ??? ??? ?position: relative; ?? ??? ??? ?} ?? ??? ??? ?.div2>img{ ?? ??? ??? ??? ?position: absolute; ?? ??? ??? ??? ?width: 200%; ?? ??? ??? ??? ?height: 200%; ?? ??? ??? ?} ?? ??? ??? ?.list1{ ?? ??? ??? ??? ?width: 70px; ?? ??? ??? ??? ?height: 50px; ?? ??? ??? ??? ?float: left; ?? ??? ??? ??? ?margin-left: 10px; ?? ??? ??? ?} ?? ??? ??? ?.list1>img{width: 100%;} ?? ??? ??? ?#zhezhao{ ?? ??? ??? ??? ?width: 100px; ?? ??? ??? ??? ?height: 100px; ?? ??? ??? ??? ?background: #BC8F8F; ?? ??? ??? ??? ?opacity: 0.7; ?? ??? ??? ??? ?display: none; ?? ??? ??? ??? ?position: absolute; ?? ??? ??? ?} ?? ??? ?</style> ?? ?</head> ?? ?<body> ?? ??? ?<div class="div1"> ?? ??? ??? ?<img src="../img/wall1.jpg" alt="" class="img1" /> ?? ??? ??? ?<div id="zhezhao"></div> ?? ??? ?</div> ?? ??? ?<div class="div2"></div> ?? ??? ?<div class="list"> ?? ??? ??? ?<div class="list1"> ?? ??? ??? ??? ?<img src="../img/wall2.jpg" alt="" class="listimg1" /> ?? ??? ??? ?</div>?? ? ?? ??? ??? ?<div class="list1"> ?? ??? ??? ??? ?<img src="../img/wall3.jpg" alt="" class="listimg2" /> ?? ??? ??? ?</div>?? ? ?? ??? ??? ?<div class="list1"> ?? ??? ??? ??? ?<img src="../img/wall4.jpg" alt="" class="listimg3" /> ?? ??? ??? ?</div>?? ? ?? ??? ??? ?<div class="list1"> ?? ??? ??? ??? ?<img src="../img/wall6.jpg" alt="" class="listimg4" /> ?? ??? ??? ?</div>?? ? ?? ??? ??? ?<div class="list1"> ?? ??? ??? ??? ?<img src="../img/wall5.jpg" alt="" class="listimg5" /> ?? ??? ??? ?</div> ?? ??? ?</div> ?? ??? ? ?? ??? ?<script> ?? ??? ??? ?$(function(){ ?? ??? ??? ??? ?$('.list1').mouseover(function(){ ?? ??? ??? ??? ??? ?$('.div1').children()[0].src = $(this).children()[0].src; ?? ??? ??? ??? ?}); ?? ??? ??? ??? ?$('.div1').mousemove(function(e){?? ??? ??? ??? ??? ? ?? ??? ??? ??? ??? ?$('#zhezhao').css({ ?? ??? ??? ??? ??? ??? ?left: e.clientX-50+'px', ?? ??? ??? ??? ??? ??? ?top: e.clientY-50+'px', ?? ??? ??? ??? ??? ??? ?display: 'block' ?? ??? ??? ??? ??? ?}); ?? ??? ??? ??? ??? ?var $img = $('.div1').children().eq(0); ?? ??? ??? ??? ??? ?$('.div2').empty(); ?? ??? ??? ??? ??? ?$('.div2').append($img.clone()); ?? ??? ??? ??? ??? ?$('.img1').css({ ?? ??? ??? ??? ??? ??? ??? ?left: -(e.clientX-50)*2+'px', ?? ??? ??? ??? ??? ??? ??? ?top: -(e.clientY-50)*2+'px' ?? ??? ??? ??? ??? ??? ?}); ?? ??? ??? ??? ??? ?if(50>e.clientX||e.clientX>450||50>e.clientY||e.clientY>300) { ?? ??? ??? ??? ??? ??? ?$('#zhezhao').css({ ?? ??? ??? ??? ??? ??? ??? ?display: 'none' ?? ??? ??? ??? ??? ??? ?}); ?? ??? ??? ??? ??? ?}else{ //(400<e.clientX&&e.clientX<450||250<e.clientY&&e.clientY<300)? ?? ??? ??? ??? ??? ??? ?$('#zhezhao').css({ ?? ??? ??? ??? ??? ??? ??? ?left: e.clientX-50+'px', ?? ??? ??? ??? ??? ??? ??? ?top: e.clientY-50+'px', ?? ??? ??? ??? ??? ??? ??? ?display: 'block' ?? ??? ??? ??? ??? ??? ?}); ?? ??? ??? ??? ??? ?} ?? ??? ??? ??? ?}); ?? ??? ??? ?}); ?? ??? ?</script> ?? ?</body> </html>
本功能在具體操作上還存在一些問題,當(dāng)鼠標(biāo)快速移開原圖區(qū)域時(shí),無法有效的監(jiān)聽到鼠標(biāo)移出區(qū)域的事件,在考慮使用移出事件時(shí),鼠標(biāo)懸浮于原圖上的遮罩層影響力鼠標(biāo)在原圖上的移出事件,無法很好的解決,希望各位幫忙移出事件。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享
- jQuery實(shí)現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法
- 基于Jquery插件開發(fā)之圖片放大鏡效果(仿淘寶)
- 用JQuery模仿淘寶的圖片放大鏡顯示效果
- jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- 基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
- jQuery當(dāng)鼠標(biāo)懸停時(shí)放大圖片的效果實(shí)例
- jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
相關(guān)文章
jquery實(shí)現(xiàn)非疊加式的搜索框提示效果
用JQUERY疊加兩個(gè)INPUT框來實(shí)現(xiàn)登陸中需要輸入的用戶名、密碼來實(shí)現(xiàn)提示與用戶的輸出,使用jquery在一個(gè)INPUT框中即可實(shí)現(xiàn)2014-01-01JQuery自定義事件的應(yīng)用 JQuery最佳實(shí)踐
本文主要介紹JQuery框架里面支持的自定義事件模型,通過實(shí)例說明什么時(shí)候可以利用事件模型進(jìn)行面向?qū)ο蟮腏S編程,以及利用“帶命名空間的事件處理函數(shù)”來避免unbind時(shí)影響別的事件訂閱。2010-08-08JQuery 風(fēng)格的HTML文本轉(zhuǎn)義
astinus開發(fā)過程中,我自己就在不斷的使用。有次貼了一些JS代碼進(jìn)去,于是頁面顯示錯(cuò)誤。顯然,把源代碼直接放進(jìn)html文本了——好吧,從05年轉(zhuǎn)去做網(wǎng)游以后,一直沒有正經(jīng)的做過web了。2009-07-07利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(同步顯示圖像位置信息)
本篇文章主要對jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(同步顯示圖像位置信息)的使用做了簡要分析說明。需要的朋友來看下吧,希望對大家有所幫助2016-12-12EasyUI 數(shù)據(jù)表格datagrid列自適應(yīng)內(nèi)容寬度的實(shí)現(xiàn)
這篇文章主要介紹了EasyUI 數(shù)據(jù)表格datagrid列自適應(yīng)內(nèi)容寬度的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07jQuery簡單實(shí)現(xiàn)兩級(jí)下拉菜單效果代碼
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)兩級(jí)下拉菜單效果代碼,基于jQuery遍歷簡單實(shí)現(xiàn)菜單效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09jQuery Validate插件自定義驗(yàn)證規(guī)則的方法
這篇文章主要介紹了jQuery Validate插件自定義驗(yàn)證規(guī)則的方法,f非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12jquery將一個(gè)表單序列化為一個(gè)對象的方法
將一個(gè)表單序列化為一個(gè)對象的方法有很多,感興趣的朋友可以了解下本文所介紹的這個(gè),希望對大家有所幫助2013-12-12