<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>jQuery之家</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        body{font-size: 14px;}

        canvas{

            display:none;

            background-color: #ffff91;

        }

        #square{

            width:80px;

            height: 80px;

            background-color: rgba(117,240,255,0.5);

            position:absolute;

            z-index: 999;

            cursor:crosshair;

            display:none;

        }

    </style>

    <script>

        onload=function(){

            var canvas=document.getElementById("canvas");//获取画布

            var ctx=canvas.getContext("2d");//获取画笔

            var img=document.getElementsByTagName("img")[0];//获取图片

            var square=document.getElementById("square");//获取选择框

            var squareData={};//存选择框信息

            var imgPosition=img.getBoundingClientRect();//获取图片的位置

            var p=img.naturalWidth/img.width;//原始图片与缩小后图片的比例

           // var even;

            //鼠标移入

            img.onmouseove=function(e){

                var even=e||event;//兼容火狐浏览器

                var x=even.clientX,

                    y=even.clientY;

                createSquare(x,y);

            };

            window.onmousemove=function(e){

                var even=e||event;

                var x=even.clientX;

                var y=even.clientY;

                //使选择框限制在图片内部

                if(x>=img.offsetLeft&&x<=img.offsetLeft+img.width&&y>=img.offsetTop&&y<=img.offsetTop+img.height){

                     createSquare(x,y);

                }else{

                    hideSquare();

                    hideCanvas();

                }

            };

            function createSquare(x,y){

                x=x-40<img.offsetLeft?img.offsetLeft:x-40;

                y=y-40<img.offsetTop?img.offsetTop:y-40;

                x=x+80<imgPosition.right?x:imgPosition.right-80;

                y=y+80<imgPosition.bottom?y:imgPosition.bottom-80;

                //将选择框左上角的位置存到squareData

                squareData.left=x;

                squareData.top=y;

                moveSquare(x,y);

            }

            function moveSquare(x,y){

                //设置选择框偏移位置

                square.style.left=x+"px";

                square.style.top=y+"px";

                showCanvas();

                showSquare();

                draw();

            }

            function showCanvas(){

                canvas.style.display="inline";

            }

            function hideCanvas(){

                canvas.style.display="none";

            }

            function showSquare(){

                square.style.display="inline";

            }

            function hideSquare(){

                square.style.display="none";

            }

            //将放大后的图片画到canvas中

            function draw(){

                console.log(squareData.left-imgPosition.left);

                ctx.drawImage(img,(squareData.left-imgPosition.left)*p,p*(squareData.top-imgPosition.top),p*80,p*80,0,0,canvas.width,canvas.height);

            }

        }

    </script>

</head>

<body>

<img src="img/N7ETzFO.jpg" alt="" width="300px">

<canvas id="canvas" width="300px" height="225px"></canvas>

<div id="square"></div>

</body>

</html>

canvas 绘制图片是根据原始图片的尺寸进行绘制，而不是根据利用属性或样式放大缩小后的图片，所以要乘以原始图片与现在图片的比例。

canvas+javascript实现淘宝商品放大镜效果的更多相关文章

  1. JavaScript仿淘宝实现放大镜效果的实例

    我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...

  2. 淘宝商品放大镜效果-JavaScript

    效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. Vue实现仿淘宝商品详情属性选择的功能

    Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下:   attrA ...

  4. YY一下淘宝商品模型

    淘宝的电商产品种类非常丰富,必然得力于其商品模型的高度通用性和扩展性. 下面我将亲自操作淘宝商品的发布过程,结合网上其他博客对淘宝网商品库的分析,简单谈谈我的理解. 注:下面不特殊说明,各个表除主键外 ...

  5. 用PHP抓取淘宝商品的用户晒单评论+图片实例

    为什么想起来做这个功能?是因为前段时间在做一个淘客网站的时候,想到是否能抓取到淘宝商品的买家秀呢?经过一番折腾发现,淘宝商品用户评价信息是通过Ajax来调取的,通过嗅探网址发现,评论数据的请求接口是: ...

  6. 利用Python爬虫爬取淘宝商品做数据挖掘分析实战篇，超详细教程

    项目内容 本案例选择>> 商品类目:沙发: 数量:共100页  4400个商品: 筛选条件:天猫.销量从高到低.价格500元以上. 项目目的 1. 对商品标题进行文本分析 词云可视化 2. ...

  7. python爬虫学习(三)：使用re库爬取"淘宝商品"，并把结果写进txt文件

    第二个例子是使用requests库+re库爬取淘宝搜索商品页面的商品信息 (1)分析网页源码 打开淘宝,输入关键字“python”,然后搜索,显示如下搜索结果 从url连接中可以得到搜索商品的关键字是 ...

  8. YY淘宝商品数据库设计

    http://www.cnblogs.com/mmmjiang13/archive/2010/11/04/1868609.html 前言 这几个月都在做一个通过淘宝API线下管理淘宝店的系统,学习了很 ...

  9. 仿淘宝商品详情页上拉弹出新ViewController

    新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下. 1.需求 1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上 2.显示B视图时下拉时,有刷新效果,之后将 ...

随机推荐

  1. JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...

  2. radio中最佳解决方案

    radio中最佳解决方案 1.html中 <td> <input id="status" name="status" type="r ...

  3. using log4net on my project within a self-hosted WCF application z

    Add reference to log4net.dll to our console service host project (our application entry point) Add t ...

  4. 【Leetcode】【Medium】Populating Next Right Pointers in Each Node

    Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *nex ...

  5. cocos2d-x 3.1 编译脚本android-build.py

    写在前面: 前段时间下载了cocos2d-x 3.1,按照官网的教程,配置环境,编译打包,走了一遍,感觉不错,顺便发现其中用了很多python的脚本文件,比如今天要说的android-build.py ...

  6. January 23 2017 Week 4 Monday

    Knowledge is long, life is short. 吾生也有涯,而知也无涯. I often feel that I have a lot of things to learn, ne ...

  7. Linux的man手册共有以下几个章节

    Linux提供了丰富的帮助手册,当你需要查看某个命令的参数时不必到处上网查找,只要man一下即可. Linux的man手册共有以下几个章节: 1.Standard commands (标准命令) 2. ...

  8. BZOJ5301:[CQOI2018]异或序列(莫队)

    Description 已知一个长度为 n 的整数数列 a[1],a[2],…,a[n] ,给定查询参数 l.r ,问在 [l,r] 区间内,有多少连续子 序列满足异或和等于 k . 也就是说,对于所 ...

  9. 安装最新版的wampserver，可以兼容php5和php7

    本文介绍的wamp是Windows+Apache+MySQL+PHP+phpMyAdmin,主要应用于开发环境[一键安装包,简单好用]. 这是运行在Windows系统下的官方安装包,可以快速的搭建属于 ...

  10. 理解JavaScript对象

    理解JavaScript对象 对象是JavaScript的基本数据类型.对象是一种复合值:将很多值(原始值或者其他对象)聚合在一起. JavaScript对象不仅可以保持自有的属性,还可以从原型对象继 ...