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

學無先后，達者為師

網站首頁 編程語言 正文

jquery實現淘寶商品圖片局部放大_jquery

作者：商嘉航 ? 更新時間： 2022-06-02 編程語言

本篇博文用于簡單記錄圖片放大功能實現，供大家參考，具體內容如下

功能實現還存在一些小漏洞在文章結尾提出，希望各位指正

1、圖片放大初考慮將圖片轉換為字體圖片形式，然后進行放大處理，但最終本人技術不過關無法實現，后用width: 200%;進行一般的圖片放大，所以當圖片越大就存在一些失真；

2、圖片放大后的顯示為本次實現的關鍵，通過獲取鼠標指針的位置從而獲取指針在圖片的那一個位置，再以當前位置進行圖片放大，放大后將圖片進行偏移，偏移量以鼠標指針在原圖的位置上獲取的left和top值乘以放大倍數就可以顯示局部放大的功能了

<!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>

本功能在具體操作上還存在一些問題，當鼠標快速移開原圖區域時，無法有效的監聽到鼠標移出區域的事件，在考慮使用移出事件時，鼠標懸浮于原圖上的遮罩層影響力鼠標在原圖上的移出事件，無法很好的解決，希望各位幫忙移出事件。

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

欄目分類
最近更新