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/ ...

随机推荐

PHP unicode与普通字符串的相互转化
unicode转字符串方法一:json /** * unicode转字符串,通过json转化 * @param $str * @return string */ function unicode_d ...
Linux远程登录ssh免密码配置方法（仅供参考）
这篇文章主要介绍了linux远程登录ssh免密码配置方法,需要的朋友可以参考下(http://www.0834-3659999.com) 一.情景公司刚上几台Linux,现在要把主机之间都能远程ss ...
HihoCoder1338 A Game (区间DP)
<题目链接> 题目大意: 两个人轮流从一个序列中取数,他们都面临同样的二选一决策:是拿走最左边的数,还是拿走最右边的数?问先手最多能够得到的分数是多少. 解题分析: 一道比较经典的DP,因 ...
docker 安装mongo
1.docker安装参考docker官网教程 2.docker中获取mongo镜像 sudo pull mongo 3.通过run命令新建/启动容器,容器名称为mongo,本地宿主机如果27017端口 ...
js 对时间进行判断现在的时间是否在后台给的开始时间和结束时间内（时间格式为：2018-09-03 09:20:30）
function status(item){ let now = Date.parse(new Date()); let startString = Date.parse(new Date(Date. ...
python进阶篇
python进阶篇 import 导入模块 sys.path:获取指定模块搜索路径的字符串集合,可以将写好的模块放在得到的某个路径下,就可以在程序中import时正确找到. import sys ...
swift中单例类的创建
1.最经典的 class TheOneAndOnlyKraken { static let sharedInstance = TheOneAndOnlyKraken() private ...
CSS3 三次贝塞尔曲线(cubic-bezier)
例子:transition:all 1s cubic-bezier(.21,.2,.65,.1) 最近在看animation模块,其中animation-timing-function 和 trans ...
微信昵称有特殊符号怎么保存到mysql库里？
微信昵称有特殊符号怎么保存到mysql库里? mysql库怎么保存emoji表情? 这里提供 1 种稳妥有效的方法: // 入库之前,使用 Base64 编码 String nickname = re ...
颠覆传统的Word进阶
第1课视频:无所不能的多样“替换”,为你换来大把时间第2课视频:长文档的排版,又快又美又专业 - 之快第3课视频:长文档的排版,又快又美又专业 - 之好第4课视频:长文档的排版,又快又没有专业 ...

61.H5---利用canvas+原生js进行鼠标跟随绘图

61.H5---利用canvas+原生js进行鼠标跟随绘图的更多相关文章

随机推荐

热门专题