<!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. 【Machine Learning】决策树之ID3算法 （2）

    决策树之ID3算法 Content 1.ID3概念 2.信息熵 3.信息增益 Information Gain 4. ID3 bias 5. Python算法实现(待定) 一.ID3概念 ID3算法最 ...

  2. Qt 资料大全

    https://blog.csdn.net/liang19890820/article/details/51752029 简述 发福利了.发福利了.发福利了,重要的事情说三遍... 为了方便更多Qte ...

  3. [uva] 10067 - Playing with Wheels

    10067 - Playing with Wheels 题目页:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Ite ...

  4. 修改虚拟机ip备份

    修改虚拟机ip 因为别人写的很好,在此备份一下.

  5. UIButton中的**EdgeInsets是做什么用的?

    UIButton中的**EdgeInsets是做什么用的? UIEdgeInsetsMake Creates an edge inset for a button or view.An inset i ...

  6. 面向对象编程——parent—this

    PHP5 中使用 parent::来引用父类的方法. parent:: 可用于调用父类中定义的成员方法. parent::的追溯不仅于直接父类. PHP5 中为解决变量的命名冲突和不确定性问题,引入关 ...

  7. 在自己机器上实现apache的多域名

    自己机器上有3个目录,分别是/var/www/html/                             /var/www/solaris/                           ...

  8. Jenkins传参修改jmeter的报告名称和详细报告地址

    目前已经可以发送邮件了,我已经配置了Jenkins,但是有几个显示问题,待处理1.报告名称地址, 2详细报告地址没有做跳转 更改后为: 修改url 1.打开样式的jmeter-results-deta ...

  9. 2017 计蒜之道 初赛 第一场 A、B题

    A题 阿里的新游戏 题目概述: 阿里九游开放平台近日上架了一款新的益智类游戏——成三棋.成三棋是我国非常古老的一个双人棋类游戏,其棋盘如下图所示: 成三棋的棋盘上有很多条线段,只能在线段交叉点上放入棋 ...

  10. LSF作业管理系统使用方法

    查看LSF计算节点列表bhosts # bhosts HOST_NAME STATUS JL/U MAX NJOBS RUN SSUSP USUSP RSV fat01 ok - 16 0 0 0 0 ...