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// ...
随机推荐
- 用express搭建一个简单的博客系统
转自:https://blog.csdn.net/qq_29721837/article/details/62055603 Express 简介 Express 是一个简洁而灵活的 node.js W ...
- shell及Python爬虫实例展示
1.shell爬虫实例: [root@db01 ~]# vim pa.sh #!/bin/bash www_link=http://www.cnblogs.com/clsn/default.html? ...
- BZOJ 4592 SHOI2015 脑洞治疗仪 线段树
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4592 题意概述:需要维护一个01序列A,一开始A全部都是1.支持如下操作: 1.将区间[l ...
- Caused by: redis.clients.jedis.exceptions.JedisDataException: WRONGTYPE Operation against a key holding the wrong kind of value
对错误类型key的操作,也就是说redis中没有你当前操作的这个key,而你用这个key去执行某些操作!检查key是否正确
- Spring定时器调用Hibernate方法无法获得SessionFactory的解决办法
由于在Spring定时器中无法通过注解的方式获取bean,因此需要通过原生的方式获取.获取session的方式如下: WebApplicationContext wac = ContextLoader ...
- PokeCats开发者日志（五）
现在是PokeCats游戏开发的第八天的上午,来记录一下将PokeCats上传到360移动开放平台的过程. 首先点创建游戏. 会弹出这个东东. 个人只能创建免费游戏啊,TAT.算了,反 ...
- scrapy使用记录
1 进入pip安装目录 python -m pip install --upgrade pip pip install Scrapy 2. 创建一个项目 scrapy startproject tes ...
- 【bzoj2438】[中山市选2011]杀人游戏 Tarjan
题目描述 一位冷血的杀手潜入 Na-wiat,并假装成平民.警察希望能在 N 个人里面,查出谁是杀手.警察能够对每一个人进行查证,假如查证的对象是平民,他会告诉警察,他认识的人, 谁是杀手, 谁是平民 ...
- 【bzoj2141】排队 分块+树状数组
题目描述 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我,吃完果果唱支歌,大家乐和和.红星幼儿园的小朋友们排起了长长地队伍,准备吃果果.不过因为小朋友们的身高有所区别, ...
- GET传值
发送页: <form id="form1" runat="server"> <div> <asp:TextBox ID=</ ...