日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

jquery實(shí)現(xiàn)淘寶商品圖片局部放大_jquery

作者：商嘉航 ? 更新時(shí)間： 2022-06-02 編程語(yǔ)言

本篇博文用于簡(jiǎn)單記錄圖片放大功能實(shí)現(xiàn)，供大家參考，具體內(nèi)容如下

功能實(shí)現(xiàn)還存在一些小漏洞在文章結(jié)尾提出，希望各位指正

1、圖片放大初考慮將圖片轉(zhuǎn)換為字體圖片形式，然后進(jìn)行放大處理，但最終本人技術(shù)不過(guò)關(guān)無(wú)法實(shí)現(xiàn)，后用width: 200%;進(jìn)行一般的圖片放大，所以當(dāng)圖片越大就存在一些失真；

2、圖片放大后的顯示為本次實(shí)現(xiàn)的關(guān)鍵，通過(guò)獲取鼠標(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>

本功能在具體操作上還存在一些問(wèn)題，當(dāng)鼠標(biāo)快速移開(kāi)原圖區(qū)域時(shí)，無(wú)法有效的監(jiān)聽(tīng)到鼠標(biāo)移出區(qū)域的事件，在考慮使用移出事件時(shí)，鼠標(biāo)懸浮于原圖上的遮罩層影響力鼠標(biāo)在原圖上的移出事件，無(wú)法很好的解決，希望各位幫忙移出事件。

原文鏈接：https://blog.csdn.net/qq_39176249/article/details/83751534

欄目分類(lèi)
最近更新