Javascript制作放大镜
方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.box{
width: 400px;
height: 250px;
}
.box0{
position: absolute;
width: 100px;
height: 100px;
background:rgba(255,255,0,.4);
}
img{
width: 400px;
height: 250px;
}
.box1{
position: absolute;
left: 450px;
top:10px;
width: 200px;
height:200px;
overflow: hidden;
}
.box1 img{
width: 800px;
height: 500px;
position: absolute;
}
</style>
</head>
<body>
<div class="box" id="box">
<!--遮罩-->
<div class="box0" id="box0" style="display:none"></div>
<img src="./images/0.jpg" alt="">
</div><!--左边盒子-->
<div class="box1">
<img src="./images/0.jpg" alt="" id="rightImg" style="display:none">
</div><!--右边盒子-->
</body>
</html>
<script>
var box =document.getElementById("box");
var box0=document.getElementById("box0");
var rightImg=document.querySelector("#rightImg")
box.onmouseover=function(){
box0.style.display="block";
rightImg.style.display="block";
//鼠标移动
box.onmousemove=function(ev){
var e = ev||window.event;
box0.style.left=(e.clientX-50)+"px";
box0.style.top=(e.clientY-50)+"px";
if(box0.offsetLeft<0){
box0.style.left=0+"px";
}
if(box0.offsetLeft>300){
box0.style.left=300+"px";
}
if(box0.offsetTop<0){
box0.style.top=0+"px";
}
if(box0.offsetTop>150){
box0.style.top=150+"px";
}
rightImg.style.left=(-2*(parseInt(box0.style.left)))+"px";
rightImg.style.top=(-2*(parseInt(box0.style.top)))+"px";
}
box0.onmouseout=function(){
box0.style.display="none";
rightImg.style.display="none";
}
}
</script>
方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
#zoom{
position: relative;
width:480px;
height:270px;
border:1px solid #ccc;
cursor:crosshair;
}
#zoomJing{
position: absolute;
display:none;
width:100px;
height:100px;
left:0;
top:0;
background-color:orange;
opacity:.5;
filter:alpha(opacity=50);
}
#bigZoom{
position: absolute;
width:400px;
height:400px;
overflow:hidden;
display:none;
}
</style>
</head>
<body>
<div id="zoom">
<img src="./images/Meinv014.jpg" alt="" width="480" height="270">
<div id="zoomJing"></div>
</div>
<div id="bigZoom">
<img src="./images/Meinv014.jpg" alt="">
</div>
<script>
var zoom = document.getElementById("zoom");
var bigZoom = document.getElementById("bigZoom");
var zoomJing = document.getElementById("zoomJing");
//绑定事件 鼠标
zoom.onmouseover = function(){
//显示bigZoom
bigZoom.style.display = "block";
zoomJing.style.display = "block";
//确定bigZoom的位置
bigZoom.style.left = zoom.getBoundingClientRect().right + 10 + "px";
bigZoom.style.top = zoom.getBoundingClientRect().top + "px";
// 鼠标移动事件
this.onmousemove = function(ev){
//计算 鼠标在zoom上的坐标
var e = ev || window.event;
var x = e.clientX - this.getBoundingClientRect().left;
var y = e.clientY - this.getBoundingClientRect().top;
//计算zoomJing的位置
var zX = Math.min(Math.max(x - 50, 0), 380);
var zY = Math.min(Math.max(y - 50, 0), 170);
//确定zoomJing的位置
zoomJing.style.left = zX + "px";
zoomJing.style.top = zY + "px";
//改变放大图
bigZoom.scrollLeft = zX * 4;
bigZoom.scrollTop = zY * 4;
}
}
zoom.onmouseout = function(){
zoomJing.style.display = "none";
bigZoom.style.display = "none";
}
</script>
</body>
</html>Javascript制作放大镜的更多相关文章
- [原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js
拖拖拉拉准本了一个月,终于把网站做好了.也终于可以分享这两个插件了.这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件) ...
- 如何用iframe标签以及Javascript制作时钟？
如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...
- JavaScript之放大镜效果2
在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...
- JavaScript之放大镜效果
在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...
- jQuery插件-jgcharts实现Javascript制作Google Charts
from:http://www.zz68.net/program/Ajax/2010/0415/1992.html jgcharts是一个基于jQuery的非常经典的Google Charts图表制作 ...
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
- 【JavaScript】放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript制作时钟特效
需求说明:制作显示年.月.日.星期几并且显示上午(AM)和下午(PM)的 12进制的时钟,具体效果如下所示: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C// ...
随机推荐
- LeetCode 2——两数相加
1. 题目 2. 解答 循环遍历两个链表 若两个链表都非空,将两个链表结点的值和进位相加求出和以及新的进位 若其中一个链表为空,则将另一个链表结点的值和进位相加求出和以及新的进位 然后将每一位的和添加 ...
- Week7 Teamework from Z.XML-NABC
NABC 引言:我们团队计划做一个手机端的类RPG2d游戏.之所以我们定义为类RPG,是因为我们希望弱化RPG在游戏中的概念--减少或者排除人物对话等较为无趣的内容,而将重点放在玩家的娱乐享受中.为了 ...
- 软工实践 - 第二十五次作业 Beta 冲刺（3/7）
队名:起床一起肝活队 组长博客:https://www.cnblogs.com/dawnduck/p/10116979.html 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过 ...
- 进程id
我们知道怎么通过fork函数创建(或者说是复制)一个进程,但是我们要怎么样操作这个被创建出来的进程呢?那就需要用到他的进程id,所以就要获取进程id,一下提供一些获取进程id的函数和其使用方法. 1) ...
- lintcode-137-克隆图
137-克隆图 克隆一张无向图,图中的每个节点包含一个 label 和一个列表 neighbors. 数据中如何表示一个无向图?http://www.lintcode.com/help/graph/ ...
- Graphic的一些基本概念
做了张很丑陋的图,估计还不准确...先凑合看吧~
- 《深入浅出 Java Concurrency》—并发容器 ConcurrentMap
(转自:http://blog.csdn.net/fg2006/article/details/6404226) 在JDK 1.4以下只有Vector和Hashtable是线程安全的集合(也称并发容器 ...
- [LeetCode] 70. Climbing Stairs（斐波那契数列）
[思路] a.因为两种跳法,1阶或者2阶,那么假定第一次跳的是一阶,那么剩下的是n-1个台阶,跳法是f(n-1); b.假定第一次跳的是2阶,那么剩下的是n-2个台阶,跳法是f(n-2) c.由a.b ...
- SQL Server 使用分区函数实现查询优化
在项目中遇到一个需求,需要在商家收藏信息中,获取到该商家发布的最新一条商品的发布时间,需求很简单,SQL语句也不复杂, select T_UserCollectMerchant.CollectID,T ...
- [BZOJ3196][Tyvj1730]二逼平衡树
[BZOJ3196][Tyvj1730]二逼平衡树 试题描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 查询 \(k\) 在区间内的排名 查询区间内排名为 \ ...