<!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. BottomBar之Android底部菜单

    BottomBar之Android底部菜单 前言:开源项目BottomBar,实现Android底部菜单(常用菜单,BottomBar实现动画(上下式)+消息菜单,BottomBar+ViewPage ...

  2. RxJava 中的map与flatMap

    1.map和flatMap都是接受一个函数作为参数(Func1) 2.map函数只有一个参数,参数一般是Func1,Func1的<I,O>I,O模版分别为输入和输出值的类型,实现Func1 ...

  3. python 多进程数据交互及共享

    多线程和多进程最大的不同在于,多进程中,同一个变量,各自有一份拷贝存在于每个进程中,互不影响,而多线程中,所有变量都由所有线程共享,所以,任何一个变量都可以被任何一个线程修改,因此,线程之间共享数据最 ...

  4. python完全学习笔记

    dir(__builtins__) help(input) 'let\'s go'   #转义字符 \ r'c:\now'       #字符串前加r 自动转义 str= ''' shdiufhi s ...

  5. 使用GDI技术创建ASP.NET验证码

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Dr ...

  6. 【Leetcode】【Medium】Maximum Product Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  7. good pics

  8. mysql 查询大量数据报错

    错误:Incorrect key file for table '/tmp/#sql_... 由于一次查询出大量数据,并且使用了临时表,导致产生此错误,主要是存放临时表文件的/tmp目录大小不足导致.

  9. 20165322 第九周 实现mypwd

    实现mypwd 学习pwd man pwd 该命令用来显示目前所在的工作目录 参数 -P显示当前目录的物理路径 -L显示当前目录的连接路径 man -k dir | grep 2 由图可知,可以用ge ...

  10. argsort

    argsort函数返回的是数组值从小到大的索引值One dimensional array:一维数组 >>> x = np.array([3, 1, 2]) >>> ...