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

随机推荐

Ubuntu16.04安装VS Code
1. 官网下载VS Code安装包, 如名字为 vscodename.deb 2. 在 vscodename.deb 所在的文件夹打开 Terminal,输入 sudo dpkg -i vscoden ...
【国庆】记一次mysqld_safe引发mysql进程故障
今天是举国欢庆的日子,但是Mariadb密码忘记了,于是巴拉巴拉的执行"mysqld_safe --skip-grant-tables &"这个神技能,打算跳过密码验证,直 ...
3.RNN推导
1.基本RNN结构这几天想入门NLP,所以开始了解RNN以及一系列变体.首先RNN最原始的结构如下图(图是按自己的理解用visio画的,有错麻烦提一下), 首先我们来说明一下各个符号的定义: 各个变 ...
P1341 无序字母对欧拉回路
题目描述给定n个各不相同的无序字母对(区分大小写,无序即字母对中的两个字母可以位置颠倒).请构造一个有n+1个字母的字符串使得每个字母对都在这个字符串中出现. 输入输出格式输入格式: 第一行输入一 ...
HttpWebRequest简单使用
HttpWebRequest简单使用摘要 HttpWebRequest类对WebRequest中定义的属性和方法提供支持,也对使用户能够直接与使用HTTP的服务器交互的附加属性和方法提供支持. 创 ...
Auth模块、Forms组件
Auth模块 auth模块是Django自带的用户认证模块: 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这 ...
Python 之map、filter、reduce
MAP 1.Python中的map().filter().reduce() 这三个是应用于序列的内置函数,这个序列包括list.tuple.str. 格式: 1>map(func,swq1[,s ...
React_生命周期
初始化 ReactDOM.render(jsx, 原生 DOM 对象): 组件类定义 static defaultProps = {} static propTypes = {} constructo ...
[LeetCode] Similar RGB Color 相似的红绿蓝颜色
In the following, every capital letter represents some hexadecimal digit from 0 to f. The red-green- ...
thinkphp框架，数据动态缓存后，或数据已读取出来，想分页怎么办
//读取缓存后赋值到数组,通过array_slice函数处理,如: $blog = S('blogname'); //赋值 $count = count($blog); //条数统计 $page = ...

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

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

随机推荐

热门专题