使用js实现简单放大镜的效果
<div id="small">
<div id="pic1">
<img src="62-130501163925.jpg" alt="">
</div>
<div id="mask"></div>
</div>
<div id="big">
<div id="pic2">
<img src="62-130501163925.jpg" alt="">
</div>
</div>
#small{
width: 500px;
height: 312px;
position: absolute;
left: 20px;
top: 20px;
}
#pic1{
position: absolute;
left: 0px;
top: 0px;
}
#pic1 img{
width: 100%;
height: 100%;
}
#big{
width: 200px;
height: 200px;
position: absolute;
right: 50px;
top: 50px;
border: 1px solid blue;
overflow: hidden;
}
#pic2{
width: 1000px;
height: 625px;
position: absolute;
left:;
top:;
}
#pic2 img{
width: 100%;
height: 100%;
}
#mask{
width: 100px;
height: 100px;
background: black;
opacity: 0.3;/*让遮罩层看起来透明*/
filter: alpha(opacity = 30);/*兼容不同的浏览器*/
position: absolute;
display: none;
}
window.onload = function(){//文档内容加载完之后再执行
//当鼠标移入小图片,显示遮罩层和放大的区域
$('small').onmouseenter = function(){
$('mask').style.display = 'block';
$('big').style.display='block';
}
//鼠标移出时,隐藏遮罩层和放大的区域
$('small').onmouseleave = function(){
$('mask').style.display='none';
$('big').style.display="none";
}
//鼠标移动
$('small').onmousemove = function(ev){
var e = ev || window.event;
//计算鼠标的位置,并让鼠标显示在遮罩层的中间
var l = e.clientX - $('small').offsetLeft - 50;
var t = e.clientY - $('small').offsetTop -50;
//别让遮罩层移出图片
if(l <= 0){
l = 0;
}
if(l >= 500 - 100){
l = 400;
}
if(t <= 0){
t = 0;
}
if(t >= 312 - 100){
t = 212;
}
//遮罩层的移动
$('mask').style.left = l + 'px';
$('mask').style.top = t + 'px';
//通过遮罩层移动,来计算出放大后图片的显示区域
$("pic2").style.left = -$("mask").offsetLeft * 2 + 'px';
$("pic2").style.top = -$("mask").offsetTop * 2 + 'px';
}
}
//为了更容容易的获取id
function $(id){
return document.getElementById(id);
}
使用js实现简单放大镜的效果的更多相关文章
- js:简单的拖动效果
效果演示:https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="wrap"> &l ...
- js实现简单拖拽效果
方法如下: var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var getCss = function ...
- 原生js实现简单的放大镜效果
前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. ht ...
- 用js实现放大镜的效果
第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容, ...
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 原生js实现的放大镜效果
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...
- 前端JS电商放大镜效果
前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 用JS实线放大镜的效果
今天花了点时间,复习了下使用原生JS实线放大镜的效果.在制作过程中,也是很到了一些问题,在这里总结下. HTML代码如下: <div id="preview"> < ...
随机推荐
- 洛谷 P3147 [USACO16OPEN]262144
P3147 [USACO16OPEN]262144 题目描述 Bessie likes downloading games to play on her cell phone, even though ...
- CLion注冊码算法逆向分析实录(纯研究)
声明 CLion程序版权为jetBrains全部.注冊码授权为jetBrains及其付费用户全部,本篇仅仅从兴趣出发,研究其注冊码生成算法. 不会释出不论什么完整的源码. 网上查了下.已有注冊机,所以 ...
- html-上左右布局方式---ShinePans
文件包括 main.html top.html left.html childhood.html moonsong.html herethesea.html 主要布局效果: 代码: main ...
- MFC中CFileDialog使用方法
用CFileDialog选择了一个文件后,使用FILE::fopen打开文件错误,使用 的是相对地址.和王工调试了半天,怎么跟踪也没发现错误,原来如此. .... .. . . CFileDialog ...
- Func委托和Action委托
http://stackoverflow.com/questions/4317479/func-vs-action-vs-predicate The difference between Func a ...
- rest_framework 分页三种
.分页 a. 分页 看第n页 每页显示n条数据: b. 分页 在某个位置 向后查看多少条数据 c. 加密分页 上一页和下一页 本质:查看 记住页码id的最大值和最小值 通过其来准确扫描 过去的话 会从 ...
- Java中MySQL事务处理举例
实例(以sql语句中的insert语句为例) import java.sql.Connection; import java.sql.DriverManager; import java.sql.Pr ...
- for循环练习-----ATM取款
要求: 代码: package com.jianglai.atm; import java.util.Scanner; public class ATM { public static void ma ...
- 给 “rm” 命令添加个“垃圾桶”
作者: 2daygeek 译者: LCTT amwps290 人类犯错误是因为我们不是一个可编程设备,所以,在使用 rm 命令时要额外注意,不要在任何时候使用 rm -rf *.当你使用 rm 命令时 ...
- nginx直接连接操作memcache
原理: Nginx 要设定一个 key 去查 mem ,如果没查到,要有一个回调 php ,并且 key 传给 php. 配置方式: server{ ...