<!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. CSS布局之传统方法

    传统的页面布局依赖于盒模型+流动模型(flow)+浮动模型(float)+层模型(layer)来实现页面的布局,具体方法是通过盒模型+display属性+float属性+position属性来加以实现 ...

  2. Java—IO流 对象的序列化和反序列化

    序列化的基本操作 1.对象序列化,就是将Object转换成byte序列,反之叫对象的反序列化. 2.序列化流(ObjectOutputStream),writeObject 方法用于将对象写入输出流中 ...

  3. 【Leetcode】【Medium】Longest Substring Without Repeating Characters

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  4. Effective Java 第二版 Enum

    /** * Effective Java 第二版 * 第30条:用enum代替int常量 */ import java.util.HashMap;import java.util.Map; publi ...

  5. CRUD是什么？数据结构、增查删改

    http://blog.csdn.net/penginpha/article/details/6920444 CRUD是指在做计算处理时的增加(Create).查询(Retrieve)(重新得到数据) ...

  6. 在UML系统开发中有三个主要的模型

    http://www.cnblogs.com/Yogurshine/archive/2013/01/14/2859248.html 在UML系统开发中有三个主要的模型: 功能模型: 从用户的角度展示系 ...

  7. ios 线程同步

    https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/Multithreading/ThreadSafe ...

  8. BZOJ2882:工艺(SAM)

    Description 小敏和小燕是一对好朋友. 他们正在玩一种神奇的游戏,叫Minecraft. 他们现在要做一个由方块构成的长条工艺品.但是方块现在是乱的,而且由于机器的要求,他们只能做到把这个工 ...

  9. PHP------Jquery的用法

    Jquery Jquery实际上相当于一个升级版的JS,Jquery里面封装了很多的东西,Jquery的功能要比JS强大,用起来比JS方便.Jquery和JS都属于JS,只不过Jquery是封装了一个 ...

  10. 原生JS写验证码

    1.先创建一个一个输入框用来用户输入验证码和一个span容器用来存放系统给出的验证码和一个刷新按钮还有一个登录按钮 <input type="text" class=&quo ...