建站资讯

模板代建微信小程序_js仿淘宝商品扩大预览功用

作者:admin 发布时间:2021-01-12
js仿淘宝商品放大预览功能       本文主要介绍了js仿淘宝商品放大预览功能的实例。具有很好的参考价值。下面跟着小编一起来看下吧

效果图:

代码如下:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Title /title 
 style 
 *{padding:0; margin:0;}
 #img1{width:300px; height:200px;}
 #sp1{width:60px; height:40px; position: absolute; left:0; top:0; background: rgba(62, 55, 58, 0.4)
 #img2{width:2250px; height:1500px; position: absolute;}
 div{width:450px; height:300px; position: absolute; left:310px; top:0; overflow: hidden; border:2px solid black; display: none;}
 /style 
 script 
 window.onload=function(){
 var img1 = document.getElementById('img1');
 var img2 = document.getElementById('img2');
 var sp = document.getElementById('sp1');
 var oBox = document.getElementById('box');
 sp. unction(){
 oBox.style.display='block';
 sp.onmouseout=function(){
 oBox.style.display='none';
 document.onmousemove=function(ev){
 var x = (ev.clientX || event.clientX)-sp.offsetWidth/2;
 var y = (ev.clientY || event.clientY)-sp.offsetHeight/2;
 if((ev.clientX || event.clientX) sp.offsetWidth/2){
 x = 0;
 if((ev.clientX || event.clientX) img1.offsetWidth-sp.offsetWidth/2){
 x = img1.offsetWidth-sp.offsetWidth;
 if((ev.clientY || event.clientY) sp.offsetHeight/2){
 y = 0;
 }if((ev.clientY || event.clientY) img1.offsetHeight-sp.offsetHeight/2){
 y = img1.offsetHeight-sp.offsetHeight;
 if((ev.clientX || event.clientX) 300 (ev.clientY || event.clientY) 200) {
 sp.style.left = x + 'px';
 sp.style.top = y + 'px';
 img2.style.left = -x * (img2.offsetWidth / img1.offsetWidth) + 'px';
 img2.style.top = -y * (img2.offsetHeight / img1.offsetHeight) + 'px';
 /script 
 /head 
 body 
 img src="timg image quality=80 size=b9999_10000 sec=37 di=244fe324db033fc826de48e90d2373f0 imgtype=0 src=http%3A%2F%%2F2016%2F0328%2F025%2F5.jpg%2521960.jpg
" alt="" id="img1" 
 span id="sp1" /span 
 div id="box" 
 img src="timg image quality=80 size=b9999_10000 sec=37 di=244fe324db033fc826de48e90d2373f0 imgtype=0 src=http%3A%2F%%2F2016%2F0328%2F025%2F5.jpg%2521960.jpg
" alt="" id="img2" 
 /div 
 /body 
 /html 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!



收缩