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/ ...
随机推荐
- 【转】Oracle imp 总是不停地重复闪烁
http://blog.itpub.net/7282477/viewspace-1003160/ 在dos下执行: imp username/password buffer=1000000 file= ...
- Spring Data REST PATCH请求 远程代码执行漏洞案例（CVE-2017-8046）
恶意的PATCH请求使用精心构造的JSON数据提交到spring-data-rest服务可以执行任意JAVA代码 1. 背景 Spring Data REST是Spring Data项目的一部分,可以 ...
- 3.基于梯度的攻击——PGD
PGD攻击原论文地址——https://arxiv.org/pdf/1706.06083.pdf 1.PGD攻击的原理 PGD(Project Gradient Descent)攻击是一种迭代攻击,可 ...
- 蓝桥杯 购物单(使用word协助)
标题: 购物单 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是有打折 ...
- 我的第二本译作《精通OpenStack》上架啦：书籍介绍和译者序
1. 书籍简介 英文书名:Mastering OpenStack Second Edition 作者:[德] 奥马尔-海德希尔(Omar Khedher)[印] 坚登-杜塔-乔杜里(Chanda Du ...
- 使用CSS达到文字首尾对齐效果
在制作表单的时候经常会遇到需要不同个数的文字首尾对齐,比如: <span>姓名:</span> <span>联系方式:</span> 姓名: 联系方式: ...
- Python学习笔记整理（python 3）
一.tuple(元组) tuple和list非常类似,但是tuple一旦初始化就不能修改,如: classmates = ('Michael', 'Bob', 'Tracy') 1 classmate ...
- day9面向对象,多线程2
一.获取全部qq成员头像 import os,requests,pymongo class Qqgroup(object):#定义一个类 #定义获取QQ群的请求rul,抓包获取 group_rul = ...
- 阿里云 Windows 2012 如果安装IIS
用可视化安装如果出错, 那就用 windows powershell 安装 https://help.aliyun.com/knowledge_detail/40959.html?spm=5176.1 ...
- C#即时释放内存
using System;using System.Diagnostics;using System.Runtime.InteropServices; [DllImport("kernel3 ...