JS——放大镜
放大镜:
1、比例系数要恒定:在系数为4的情况下,若原图是820*512,那么小图必须是205*128,放大镜若是50,原图显示区域必须200
2、计算鼠标在小图中的坐标
3、放大镜需要在鼠标中间位置,也就是鼠标在盒子中的坐标减去其宽度高度的一半
4、放大镜移动范围:marginLeft、marginTop的值必须是0到小图宽度、高度减去放大镜宽度、高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} .box {
width: 400px;
margin: 150px auto;
position: relative;
} .small {
position: relative;
width: 205px;
height: 128px;
border: 1px solid #CCA55B;
} .magnifier {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: #ccc;
opacity: 0.3;
display: none;
cursor: move;
} .big {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid red;
top: 0;
left: 215px;
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="small">
<img src="data:images/nba.jpg" width="205">
<div class="magnifier"></div>
</div>
<div class="big">
<img src="data:images/nba.jpg" style="float: left">
</div>
</div>
<script>
var box = document.getElementsByTagName("div")[0];
var samll = box.children[0];
var magnifier = samll.children[1];
var big = box.children[1];
var img = big.children[0];
//1、进入盒子显示,离开隐藏
samll.onmouseenter = function () {
magnifier.style.display = "block";
big.style.display = "block";
} samll.onmouseleave = function () {
magnifier.style.display = "none";
big.style.display = "none";
} //2、鼠标进入盒子
samll.onmousemove = function (ev) {
var pageX = ev.pageX || scroll().left + ev.clientX;
var pageY = ev.pageY || scroll().top + ev.clientY;
//small.offsetLeft=0,因为他的相对的是box的距离就是0px,所以取box.offsetLeft的值
var x = pageX - box.offsetLeft - magnifier.offsetWidth / 2;//让鼠标在放大镜中间
var y = pageY - box.offsetTop - magnifier.offsetHeight / 2;//让鼠标在放大镜中间 if (x < 0) {
x = 0;
}
//samll.offsetWidth包括了2px的边框
if (x >= samll.offsetWidth - 2 - magnifier.offsetWidth) {
x = samll.offsetWidth - 2 - magnifier.offsetWidth;
}
if (y < 0) {
y = 0;
}
if (y >= samll.offsetHeight - 2 - magnifier.offsetHeight) {
y = samll.offsetHeight - 2 - magnifier.offsetHeight;
}
magnifier.style.left = x + "px";
magnifier.style.top = y + "px";
var xiShu = (big.offsetWidth - 2) / magnifier.offsetWidth;//big.offsetWidth包括了2px边框的宽度
img.style.marginLeft = -xiShu * x + "px";
img.style.marginTop = -xiShu * y + "px";
} function scroll() {
return {
"top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
</body>
</html>
JS——放大镜的更多相关文章
- 未封装的js放大镜特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- js放大镜代码
js原生放大镜 <!DOCTYPE html> <html> <head> <title>放大镜</title> <meta char ...
- js放大镜特效
在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效 下图是原图的样子 ...
- jS放大镜效果
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo4.aspx.cs& ...
- JS放大镜特效(兼容版)
原理 1.鼠标在小图片上移动时,通过捕获鼠标在小图片上的位置,定位大图片的相应位置 设计 1.页面元素:小图片.大图片.放大镜 2.技术点:事件捕获.定位 1)onmouseover:会在鼠标指针移动 ...
- 最全js 放大镜效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 放大镜用法bug解决
<img id="zoom_02" src='img/zhang5.jpg' data-zoom-image="img/zhang5p.jpg" /> ...
- 原生js放大镜效果
效果: 1. 鼠标放上去会有半透明遮罩.右边会有大图片局部图 2. 鼠标移动时右边的大图片也会局部移动 放大镜的关键原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置 ...
- js放大镜
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- [USACO1.2]挤牛奶Milking Cows
题目描述 三个农民每天清晨5点起床,然后去牛棚给3头牛挤奶.第一个农民在300秒(从5点开始计时)给他的牛挤奶,一直到1000秒.第二个农民在700秒开始,在 1200秒结束.第三个农民在1500秒开 ...
- T1082 线段树练习3 codevs
http://codevs.cn/problem/1082/ 题目描述 Description 给你N个数,有两种操作: 1:给区间[a,b]的所有数增加X 2:询问区间[a,b]的数的和. 输入描述 ...
- zoj——3557 How Many Sets II
How Many Sets II Time Limit: 2 Seconds Memory Limit: 65536 KB Given a set S = {1, 2, ..., n}, n ...
- YAML/Properties配置文件与Spring Boot(转)
多年来,Java开发人员依赖于属性文件或xml文件来指定应用程序配置.在企业应用程序中,人们可以为每个环境(如开发,分段和生产)创建单独的文件,以定义相应环境的属性.但是,通过Spring引导,我们可 ...
- 5、Java并发性和多线程-相同线程
以下内容转自http://tutorials.jenkov.com/java-concurrency/same-threading.html(使用谷歌翻译): 相同线程(同一线程)是一种并发模型,其中 ...
- MySQL中採用类型varchar(20)和varchar(255)对性能上的影响
1.MySQL建立索引时假设没有限制索引的大小,索引长度会默认採用的该字段的长度.也就是说varchar(20)和varchar(255)相应的索引长度分别为20*3(utf-8)(+2+1),255 ...
- SPOJ 962 Intergalactic Map (网络最大流)
http://www.spoj.com/problems/IM/ 962. Intergalactic Map Problem code: IM Jedi knights, Qui-Gon Jinn ...
- Codeforces Round #329 (Div. 2)B. Anton and Lines 贪心
B. Anton and Lines The teacher gave Anton a large geometry homework, but he didn't do it (as usual ...
- U4687 不无聊的序列
U4687 不无聊的序列 0通过 85提交 题目提供者飞翔 标签 难度尚无评定 提交 最新讨论 暂时没有讨论 题目背景 如果一个序列的任意一个连续的子序列中没有只出现一次的元素,辣么kkk就认为这个序 ...
- 频繁模式挖掘 Apriori算法 FP-tree
啤酒 尿布 组合营销 X=>Y,其中x属于项集I,Y属于项集I,且X.Y的交集等于空集. 2类算法 Apriori算法 不断地构造候选集.筛选候选集来挖掘出频繁项集,需要多次扫描原始数据.磁盘I ...