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

随机推荐

LOJ #6303. 水题 (约数质因数)
#6303. 水题内存限制 10 MiB 时间限制:1000 ms 标准输入输出题目描述给定正整数 n,kn, kn,k,已知非负整数 xxx 满足 n!modkx=0,求 xmaxx_{max ...
[BZOJ1984][Luogu4315]月下“毛景树”
题目大意给出一棵 n 个点的无根树,待边权,要求维护一下操作: 修改某条边的边权修改点 u 到点 v 路径上所有边的边权点 u 到点 v 路径上所有边的边权加上某个值查询点 u 到点 v 路径 ...
05_ switch 练习 _ 今天星期几
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
[LeetCode] Random Pick with Weight 根据权重随机取点
Given an array w of positive integers, where w[i] describes the weight of index i, write a function ...
AWS Nginx Started but not Serving AWS上Nginx服务器无法正常工作
After install the Nginx on AWS instance, and visit your public ip address, you might see the followi ...
Nmap 进阶使用 [ 脚本篇 ]
0×01 前言因为今天的重点并非nmap本身的使用,主要还是想借这次机会给大家介绍一些在实战中相对比较实用的nmap脚本,所以关于nmap自身的一些基础选项就不多说了,详情可参考博客端口渗透相关文章 ...
swust oj 972
统计利用先序遍历创建的二叉树的宽度 1000(ms) 10000(kb) 2938 / 6810 利用先序递归遍历算法创建二叉树并计算该二叉树的宽度.先序递归遍历建立二叉树的方法为:按照先序递归遍历的 ...
html表格以pdf格式导出到本地
引入插件 jsPdf.js 以及 html2canvas.js,具体文件可上github找,实测可行html2canvas(document.getElementById("downBox& ...
20175320 2018-2019-2 《Java程序设计》第8周学习总结
20175320 2018-2019-2 <Java程序设计>第8周学习总结教材学习内容总结本周学习了教材的第十五章的内容,在这章中介绍了泛型和集合框架,着重讲了泛型类的概念,并介绍了 ...
c++ 库函数cmath
cmath中常用库函数: int abs(int i);//返回整型参数i的绝对值double fabs(double x);//返回双精度参数x的绝对值long labs(long n);//返回长 ...

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

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

随机推荐

热门专题