<!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. BASE64编码的字符进行URL传输丢失特殊字符的问题

    因为BASE64的编码里含有“+”号等特殊字符,在url传输的时候会把+号编程空格,解决这个问题的方法: 请求时把BASE64编码进行url的编码再进行传输 接收时把BASE64编码进行url的解码 ...

  2. google离线小恐龙-备份

    开启方法: 地址栏输入: chrome://dino 空格开始

  3. scp 上传和下载文件

    mac和linux自带scp命令,windows的话请考虑gitbash或者专业linux工具 (默认端口为22,所以-p可不写) 上传文件 scp -p /home/lnmp.gz root@ip: ...

  4. MUI实现上拉加载和下拉刷新

    编写存储过程分页(此处使用T-SQL) CREATE PROC [dbo].[Common_PageList] ( @tab nvarchar(max),---表名 @strFld nvarchar( ...

  5. 【Leetcode】【Medium】Unique Paths

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  6. February 21 2017 Week 8 Tuesday

    To make each day count. 让每一天都物有所值. We always want to make our life meaningful, however, the acutal f ...

  7. python UI自动化实战记录四：测试页面1-pageobject

    该部分记录测试页面1-IndexPage,所有首页上的元素定位.操作.获取属性等方法都写在该类中. 1 首页类继承自BasePage 2 首页类第一部分写的是所有的定位器 3 首页类第二部分类的方法, ...

  8. x:Name与Name区别

    x:Name与Name有两个不同点: 1.x:Name是Xaml的标记特性,任何在Xaml中定义的元素,都可以使用x:Name来为元素指定名称. Name是FrameworkElement定义的依赖项 ...

  9. CSAPP buffer lab记录——IA32版本

    CSAPP buffer lab为深入理解计算机系统(原书第二版)的配套的缓冲区溢出实验,该实验要求利用缓冲区溢出的原理解决5个难度递增的问题,分别为smoke(level 0).fizz(level ...

  10. jasmine —— Spies（转）

    Jasmine有称为间谍(spies)的测试双重功能.一个spy可以监测任何函数的调用和参数的调用痕迹.Spy只能存在于定义它的describe()和it()代码块内,而在每一个spec(即it)结束 ...