JavaScript实现简易放大镜最全代码解析(ES5)
作者:飒尔 发布时间:2024-04-30 08:52:11
标签:js,放大镜
本文实例为大家分享了JavaScript实现简易放大镜的具体代码,供大家参考,具体内容如下
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES5放大镜</title>
<style>
.box {
width: 170px;
height: 180px;
margin: 100px 200px;
border: 1px solid #ccc;
position: relative;
}
.small {
position: relative;
}
.big {
width: 300px;
height: 320px;
position: absolute;
top: 30px;
left: 220px;
overflow: hidden;
border: 1px solid #ccc;
display: none;
}
.mask {
width: 100px;
height: 100px;
background: rgba(255,255,0,0.3);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.big img{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small">
<img src="img/shirt_1.jpg" alt="picture"/>
<div class="mask"></div>
</div>
<div class="big">
<img src="img/shirt_1_big.jpg" alt="picture"/>
</div>
</div>
</body>
<script>
var box = document.getElementById('box');
var small = box.children[0];//放小图的盒子
var big = box.children[1];//放大图的盒子
var mask = small.children[1];//半透明鼠标移动跟随盒子
var bigImage = big.children[0];//大图片
small.onmouseover = function(event){
big.style.display = 'block';
mask.style.display = 'block';
}
small.onmouseout = function(){
big.style.display = 'none';
mask.style.display = 'none';
}
//移动事件,注意mask的定位相对的是samll
small.onmousemove = function(event){
var event = event || window.event;//事件对象
// console.log(this.offsetLeft);//0,注意offsetLeft返回距离是一个带有定位的父级的左侧距离
var x = event.clientX-this.offsetParent.offsetLeft-mask.offsetWidth/2;//此处不能用small的offsetLeft,用obj的offsetLeft
var y = event.clientY-this.offsetParent.offsetTop-mask.offsetHeight/2;
//限制半透明盒子出界
if(x < 0){
x = 0;
}else if(x > small.offsetWidth - mask.offsetWidth){
x = small.offsetWidth - mask.offsetWidth;
}
if( y < 0){
y = 0;
}else if( y > small.offsetHeight - mask.offsetHeight){
y = small.offsetHeight - mask.offsetHeight;
}
mask.style.left = x + "px";
mask.style.top = y +"px";
//大图片放大
bigImage.style.left = -x*big.offsetWidth/small.offsetWidth + 'px';
bigImage.style.top = -y*big.offsetHeight/small.offsetHeight + 'px';
//big.offsetWidth/small.offsetWidth是放大倍数
//因为小图鼠标下移,大图上移,故用负数
}
</script>
</html>
图片:
来源:https://blog.csdn.net/CSErtuh/article/details/120186252
0
投稿
猜你喜欢
- 全国抗"疫"这么久终于见到曙光,在家待了将近一个月,现在终于可以去上班了,可是却发现出门必备的口罩却一直买不到。最近看到
- 用re或者string.find.以下是re代码import re#文本所在TXT文件file = '123.txt'#关键
- np.newaxisnp.newaxis 的功能是增加新的维度,但是要注意 np.newaxis 放的位置不同,产生的矩阵形状也不同。通常按
- 当 MySQL 数据库服务删除部分数据后;有些情况下这些数据占用的存储空间会释放掉,有些情况这些存储空间则不会释放。以下是对这种情况的简单说
- 前言聚合函数用来对表中的数据进行统计和计算。users表结构如下:什么是聚合函数聚合函数是用来做简单的数据统计的,比如说统计一下 &
- declare @str varchar(100) set @str='8f8el3l' declare @s varcha
- 今天使用os.path.isdir()判断是否是文件夹的时候发现一个问题:lst = os.listdir(path) &nb
- 一、基本思想本文思想是基于用asp和DOM来读取和存储XML数据,并利用XML数据来存储留言信息,达到同用数据库存储数据的功能。二、XML留
- 1.算法:(设查找的数组期间为array[low, high])(1)确定该期间的中间位置K(2)将查找的值T与array[k]比较。若相等
- 概念MySQL5.0版本开始支持存储过程,存储过程就是一组SQL语句集,功能强大,可以实现一些比较复杂的逻辑功能,类似于JAVA语言中的方法
- 一、背景(正)地理编码指的是:将地理位置名称转换成经纬度;逆地理编码指的是:将经纬度转换成地理位置信息,如地名、所在的省份或城市等百度地图提
- python logging日志模块的详解日志级别日志一共分成5个等级,从低到高分别是:DEBUG INFO WARNING ERROR C
- #!/usr/bin/env python# -*- coding:utf-8 -*-# *************************
- 最近刚接触了公司的服务器,使用的是Windows 2003 server + IIS 6.0 服务器,在使用无组件上传文件时产生这个错误时:
- 前言本文记录了笔者摸索图数据库过程中遇到的问题、一些思考(闲谈)与实现思路。做此记录的目的是沉淀经验、完善巩固知识体系,同时以此为始,培养撰
- 爬虫数据保存到mongoDB的方法:import pymongo# 首先需要注意,mongodb数据库存储的类型是以键值
- 在使用Python时,需要使用各种各样的库,通常会使用pip直接安装,这样最为简单也最方便。但最为崩溃的地方在于有时候速度出奇的慢,因为
- 这篇文章主要介绍了python实现windows桌面截图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
- 关于如题这几个概念,大部分人应该比较熟悉,但是我昏了好久,所以写下来加深印象。1. 动态语言又叫动态编程语言,是指程序在运行时可以改变其结构
- 我们在建立一个大型网站的时候,往往会包括很多相同的页面框架模式,甚至一些细节元素都是相同的。但令人困扰