zoukankan      html  css  js  c++  java
  • 放大镜

    var box = my$('box');
    var smallBox = box.children[0];
    var bigBox = box.children[1];

    var smallImage = smallBox.children[0];
    var mask = smallBox.children[1];
    var bigImage = bigBox.children[0];
    box.onmouseenter = function(){
    mask.style.display = "block";
    bigBox.style.display = "block";
    }
    box.onmouseleave = function(){
    mask.style.display = "none";
    bigBox.style.display = "none";
    }
    box.onmousemove = function(e){
    e = e || event;
    var maskX = (e.clientX - box.offsetLeft) - (mask.offsetWidth / 2);
    var maskY = (e.clientY - box.offsetTop) - (mask.offsetHeight / 2);
    var maxMaskX = box.offsetWidth - mask.offsetWidth;
    var maxMaskY = box.offsetHeight - mask.offsetHeight;
    maskX = maskX < 0 ? 0 : maskX;
    maskY = maskY < 0 ? 0 : maskY;
    maskX = maskX > maxMaskX ? maxMaskX : maskX;
    maskY = maskY > maxMaskY ? maxMaskY : maskY;
    mask.style.left = maskX + "px";
    mask.style.top = maskY + "px";
    var i = parseInt(bigBox.offsetWidth / mask.offsetWidth);
    var j = parseInt(bigBox.offsetHeight / mask.offsetHeight);
    bigImage.style.left = -(maskX * i) + "px";
    bigImage.style.top = -(maskY * j) + "px";
    }

  • 相关阅读:
    S3C2440实现dm9000网卡驱动程序移植
    IMX257虚拟网卡vnet驱动程序
    ram_flash驱动
    S3C2440 nor_flash驱动程序
    Java 打印* 三角形
    Java系列学习说明
    java案例1,打印hello java
    zabbixproxy安装
    python鉴黄程序
    mssql发布订阅事项
  • 原文地址:https://www.cnblogs.com/pxxdbk/p/12654989.html
Copyright © 2011-2022 走看看