zoukankan      html  css  js  c++  java
  • js 图片放大镜功能

    原理:放置两张相同的图片,一张作为主图片(图片1),另一张作为用来裁剪并放大的图片(图片2)

             鼠标移动时,计算鼠标在图片1的位置(距离图片1左上角的x,y距离),以此决定在图片2开始裁剪的位置,放大用zoom:放大倍数

    类似于京东淘宝查看图片的功能

    HTML:

    <img id="img1" src="images/1.jpg" style="position: absolute; 600px; height:600px;"/>
    <img id="img2" src="images/1.jpg" style="position: absolute; 600px; height:600px;left:650px;" />
    <div id="clipbox" style="position: absolute; 100px; height:60px; border:1px solid blue; display:none"></div> 

    js:

  • 相关阅读:
    uva 10370
    uva 10107
    uva 10038
    uva 488
    伪代码格式
    公众号的秘密,知道一个biz就够了
    ToolTip 概述
    swt
    Java GUI图形界面开发工具
    Java多线程-两个小球
  • 原文地址:https://www.cnblogs.com/jlliu/p/5319564.html
Copyright © 2011-2022 走看看