欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年03月31日 08:56:49   作者:商嘉航  
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)淘寶商品圖片局部放大,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本篇博文用于簡單記錄圖片放大功能實(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論