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

随机推荐

Spring Boot整合邮件发送
概述 Spring Boot下面整合了邮件服务器,使用Spring Boot能够轻松实现邮件发送:整理下最近使用Spring Boot发送邮件和注意事项: Maven包依赖 <dependenc ...
docker - 容器lxc
容器:是在用户空间进行隔离的组件叫做容器常用的容器有lxc ----libcontainer---runc 需要隔离的资源有: Rootfs:每个容器对应的一个目录做为根目录 User: Hostn ...
C# 默认访问修饰符
c# 中类,成员,枚举,结构等默认访问修饰符是? 根据MSDN文档有: [MSDN] Classes and structs that are not nested within other clas ...
django——面试题(已工作，暂停更新)
谈谈你对HTTP协议的认识. 什么是协议? 协议,是指通信的双方,在通信流程或内容格式上,共同遵守的标准. 什么是http协议? http协议,是互联网中最常见的网络通信标准. http协议的特点 ① ...
Petrozavodsk Summer-2016. Ural FU Dandelion Contest
A. Square Function 留坑. B. Guess by Remainder 询问$lcm(1,2,3,...,n)-1$即可一步猜出数. 计算$lcm$采用分治FFT即可,时间复杂度$O ...
github第一次引用开源的库
想要使用这个一个东西第一步就是在中添加上面那句话. 这个应该是俩种使用方法,一种用于java中一个用作控件引用此时就能使用我们引用的这个库了.
LeetCode第二题
题目描述: You are given two non-empty linked lists representing two non-negative integers. The digits ar ...
Spark on Yarn with HA
Spark 可以放到yarn上面去跑,这个毫无疑问.当Yarn做了HA的时候,网上会告诉你基本Spark测不需做太多的关注修改,实际不然. 除了像spark.yarn开头的相关配置外,其中一个很重要的 ...
Git服务器安装详解及安装遇到问题解决方案
git是一个不错的版本管理的工具.现在自己在搞一个简单的应用程序开发,想使用git来进行管理.在Google了配置文档后,还是受了N多的挫折.某些文档质量不高,浪费了好多时间...... 好,切入正题 ...
[LeetCode] Random Flip Matrix 随机翻转矩阵
You are given the number of rows n_rows and number of columns n_cols of a 2D binary matrix where all ...

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

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

随机推荐

热门专题