61.H5---利用canvas+原生js进行鼠标跟随绘图
<!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="data: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="data: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="data: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="data:image/big-right.png" style="display: none">
<ul class="imagebg" id="imagebg">
<li data-sPic="image/small/1.jpg">
<img src="data: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>
61.H5---利用canvas+原生js进行鼠标跟随绘图的更多相关文章
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 【js】鼠标跟随效果
1.实现思想 ①鼠标跟随效果,发生在鼠标移动的时候,故需要使用onmousemove事件 ②当页面内容多于1屏时,就需要考虑滚动距离的问题 ③想实现鼠标跟随的效果需要: 元素的left位置 = 鼠标当 ...
- H5利用canvas实现海报功能
最近接到一个需求,微信中用户上传图片生成海报.这个需求比较常规,实现思路也比较简单,通过利用用户的input输入,对所上传的图片进行处理,最后通过第三方库html2canvas合成对应的图片即可.思路 ...
- 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...
- js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题
项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...
- 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y
关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...
- canvas原生js写的贪吃蛇
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- js 30Dom应用
1.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口. 给open传网址 如果是外站就加个http <input type="button" value= ...
- Manjaro为包管理器pacman和yaourt\yay 添加多线程下载
用轻量级的axle代替了默认的wget来下载升级包. 1. paman添加多线程 编辑pacman.conf文件: vim /etc/pacman.conf 如果有类似xfercommand的话,注释 ...
- 【java】-- java并发包总结
1.同步容器类 1.1.Vector与ArrayList异同 1.Arraylist和Vector都是采用数组方式存储数据,都允许直接序号索引元素,所以查找速度快,但是插入数据等操作涉及到数组元素移动 ...
- TCP/IP协议、HTTP协议、SOCKET通讯详解
1.TCP连接TCP(Transmission Control Protocol) 传输控制协议.TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握确认建立一个连接.位码即tcp标志位 ...
- Docker操作笔记（三）数据管理
数据管理 一.数据卷 数据卷 是一个可供一个或多个容器使用的特殊目录,它绕过 UFS,可以提供很多有用的特性: 数据卷 可以在容器之间共享和重用 对 数据卷 的修改会立马生效 对 数据卷 的更新,不会 ...
- rsyslog 移植与配置方案介绍
rsyslog介绍 rsyslog是一个 syslogd 的多线程增强版.它提供高性能.极好的安全功能和模块化设计.虽然它基于常规的 syslogd,但 rsyslog 已经演变成了一个强大的工具,可 ...
- easyui commobox省市区县三级联动
1.前端代码 <div class="col-6 f-group"> <label class="col-4 left_red"> 省名 ...
- 新浪实时股票数据接口http://hq.sinajs.cn/list=股票代码
股票数据的获取目前有如下两种方法可以获取: 1. http/JavaScript接口取数据 2. web-service接口 1.http/JavaScript接口取数据1.1Sina股票数据接口以大 ...
- (50)Wangdao.com第七天_JavaScript 发展与简介
一个完整的JavaScript 应该由以下三部分组成: ECMAScript DOM,全称Browser Object Model,即浏览器对象模型,主要处理浏览器窗口和框架 BOM,全称Docume ...
- WinForm打包或部署
一.新建InstallShield项目 二. 三. 四. 五. 六. 七. 最后重新生成,安装包一般在E\Setup1\Setup1\Express\SingleImage\DiskImages\DI ...