<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas</title>
<style>
.one-center-img{
position: relative;
width:1028px;
height:614px;
margin:43px 71px 43px 91px;
float: left;
}
#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.onload=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>
