#myCanvas1 { position:absolute; width:514px; height:614px; left:0px; top:0px; background:rgba(255, 255, 255, 0); z-index: 4; cursor: pointer;}#my-left{ position:absolute; width:514px; height:614px; left:0px; top:0px; background:rgba(255, 255, 255, 0); cursor: pointer;}#my-right{ position:absolute; width:86px; height:66px; right:0px; top:256px; background:rgba(255, 255, 255, 0); cursor: pointer; display: none;}#myCanvas2 { position:absolute; width:514px; height:614px; left:514px; top:0px; background:rgba(255, 255, 255, 0); z-index: 4; cursor: pointer;} </style></head><body><div class="one-top"> <div class="zqs-container-1500"> <div class="one-top-logo"><img src="image/logo.png" alt="" class="logo"></div> <div class="one-top-nav"> <ul> <li><a href="">首页</a> </li> <li><a href="">业主中心</a> <span class="zqs-triangle-top"></span> <span class="zqs-icon-hot"></span> </li> <li><a href="">本地服务</a><span class="zqs-triangle-top"></span></li> <li><a href="">装修图库</a><span class="zqs-triangle-top"></span></li> <li><a class="one-top-nav-hover" href="">装修科普</a><span class="zqs-triangle-top"></span></li> <li><a href="">无忧服务</a><span class="zqs-triangle-top"></span></li> <li><a href="">关于装轻松</a><span class="zqs-triangle-top"></span></li> </ul> </div> <div class="one-top-login"> <button class="zqs-button">登录</button> <button class="zqs-button">注册</button> <span><i>客服电话：</i><b>400-993-8683</b></span> </div> </div></div><div class="zqs-container-1500"> <div class="one-crumbs"> <span class=""> 当前位置 : <a href="">装轻松网</a>> <a href="">装饰效果图</a>> <a href="">精品图册（套图）</a>> <a><cite>三居室110平米装饰设计</cite></a> </span> <div class="one-crumbs-img"> <a href=""><img src="image/crumbs-img.png" alt=""></a> </div> </div></div><div class="one-center zqs-container-1500"> <div class="one-center-left" id="one-center-left"> <div class="one-center-img" id="one-center-img"><!-- class="arrow-left"--> <img id="left_btn" src="image/big-left.png" style="display: none" > <!--<div class="myleft">--> <canvas id="myCanvas1" width=514 height=614> </canvas> <div id="my-left"></div> <!--</div>--> <canvas id="myCanvas2" width=514 height=614> </canvas> <div id="my-right"></div> <img id="right_btn" src="image/big-right.png" style="display: none"> <ul class="imagebg" id="imagebg"> <li data-sPic="image/small/1.jpg"> <img src="image/small/1.jpg"> </li> </ul> </div> </div></div><script src="js/jquery.min.js"></script><script> window.οnlοad=function(){ //原生js写一个hover函数 function bind(elem,ev,callback) { if(document.all) { elem.attachEvent("on"+ev,callback); }else{ elem.addEventListener(ev,callback,false); } } function unbind(elem,ev,callback) { if(typeof(callback)=="function") { if(document.all) { elem.detachEvent("on"+ev,callback); }else{ elem.removeEventListener(ev,callback,false); } }else{ if(document.all) { elem.detachEvent("on"+ev); }else{ elem.removeEventListener(ev,false); } } } function hover(elem,overCallback,outCallback){//实现hover事件 var isHover=false;//判断是否悬浮在上方 var preOvTime=new Date().getTime();//上次悬浮时间 function over(e){ var curOvTime=new Date().getTime(); isHover=true;//处于over状态 if(curOvTime-preOvTime>10) {//时间间隔超过10毫秒，认为鼠标完成了mouseout事件 overCallback(e,elem); } preOvTime=curOvTime; } function out(e) { var curOvTime=new Date().getTime(); preOvTime=curOvTime; isHover=false; setTimeout(function(){ if(!isHover) { outCallback(e,elem); } },10); } bind(elem,"mouseover",over); bind(elem,"mouseout",out); }; // 绘制图片坐标 function bigLeft() { var canvasLeft=document.querySelector("#myCanvas1"); var content = canvasLeft.getContext("2d"); var myLeft=document.querySelector("#my-left"); var imgLeft=document.querySelector("#left_btn"); var oneCenter=document.querySelector(".one-center"); var oneCenterImg=document.querySelector(".one-center-img"); var mouse = {}; var ww=86; var hh=66; //canvasLeft //鼠标的位置（距离浏览器的X和Y） function track_mouse(event) { event=event||window.event; var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;//分别兼容ie和chrome var scrollY=document.documentElement.scrollTop||document.body.scrollTop; var pageXx=event.pageX||(event.clientX+scrollX);//兼容火狐和其他浏览器 var pageYy=event.pageY||(event.clientY+scrollY); // var pageXx=event.pageX; // var pageYy=event.pageY; //my-left距离浏览器的X和Y=(oneCenter距离浏览器的X和Y)+(oneCenterImg距离浏览器的X和Y) var myLeftX=oneCenter.offsetLeft+oneCenterImg.offsetLeft; var myLeftY=oneCenter.offsetTop+oneCenterImg.offsetTop; var leftXX=pageXx-myLeftX; var topXX=pageYy-myLeftY; //鼠标放在图片的中点，应该加上图片的宽高的1/2 var canvasImgX=ww/2; var canvasImgY=hh/2; //鼠标距离canvas的X和Y (pageXx-myLeftX,pageYy-myLeftY) mouse.x = leftXX-canvasImgX; mouse.y = topXX-canvasImgY; console.log(mouse); //console.log(mouse.x, mouse.y,pageXx,pageYy,myLeftX,myLeftY,leftXX,topXX); content.clearRect(0,0,514,614); content.drawImage(imgLeft,mouse.x,mouse.y,ww,hh); } //鼠标移入移除hover事件 hover(canvasLeft,function(event){ //原始坐标 //content.drawImage(imgLeft,0,0,43,16); //鼠标移动监听事件// content.clearRect(0,0,514,614); canvasLeft.addEventListener('mousemove', track_mouse, false);// //获取鼠标位置 track_mouse(); },function(){ //清除画布 canvasLeft.height=canvasLeft.height; }); } function bigRight() { var canvasRight=document.querySelector("#myCanvas2"); var content = canvasRight.getContext("2d"); var myRight=document.querySelector("#my-right"); var imgRight=document.querySelector("#right_btn"); var oneCenter=document.querySelector(".one-center"); var oneCenterImg=document.querySelector(".one-center-img"); var mouse = {}; var ww=86; var hh=66; //canvasLeft //鼠标的位置（距离浏览器的X和Y） function track_mouse(event) { event=event||window.event; var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;//分别兼容ie和chrome var scrollY=document.documentElement.scrollTop||document.body.scrollTop; var pageXx=event.pageX||(event.clientX+scrollX);//兼容火狐和其他浏览器 var pageYy=event.pageY||(event.clientY+scrollY); // var pageXx=event.pageX; // var pageYy=event.pageY; //my-left距离浏览器的X和Y=(oneCenter距离浏览器的X和Y)+(oneCenterImg距离浏览器的X和Y) var myLeftX=oneCenter.offsetLeft+oneCenterImg.offsetLeft+514; var myLeftY=oneCenter.offsetTop+oneCenterImg.offsetTop; var leftXX=pageXx-myLeftX; var topXX=pageYy-myLeftY; //鼠标放在图片的中点，应该加上图片的宽高的1/2 var canvasImgX=ww/2; var canvasImgY=hh/2; //鼠标距离canvas的X和Y (pageXx-myLeftX,pageYy-myLeftY) mouse.x = leftXX-canvasImgX; mouse.y = topXX-canvasImgY; //console.log(mouse); // console.log(mouse.x, mouse.y,pageXx,pageYy,myLeftX,myLeftY,leftXX,topXX); content.clearRect(0,0,514,614); content.drawImage(imgRight,mouse.x,mouse.y,ww,hh); } //鼠标移入移除hover事件 hover(canvasRight,function(event){ //原始坐标 //content.drawImage(imgLeft,0,0,43,16); //鼠标移动监听事件 canvasRight.addEventListener('mousemove', track_mouse, false); //获取鼠标位置 track_mouse(); },function(){ //清除画布 canvasRight.height=canvasRight.height; }); } bigLeft(); bigRight(); }</script></body></html>
转载于:https://www.cnblogs.com/sqyambition/p/10579100.html
