【JavaScript】放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
*{margin:0;padding:0;}
.container{width: 200px;height: 200px;padding: 5px;border:1px solid #CCC;position: relative;left: 50px;top: 50px;}
.container .small_pic{width: 200px;height: 200px;background: #ccc;position: relative;}
.container .float_layer{width: 50px;height: 50px;border:1px solid #000;background: #fff;filter:alpha(opacity: 30);opacity: 0.3;position: absolute;top: 0;left: 0;z-index: 1;display: none;}
.container .mask{width: 100%;height: 100%;position: absolute;z-index: 2;left: 0;top: 0;background: red;filter:alpha(opacity: 0);opacity: 0;}
.container .big_pic{position: absolute;top: -1px;left: 215px;width: 250px;height: 250px;overflow: hidden;display: none;border:2px solid #ccc;}
.container img{position: absolute;top: 0;left: 0;}
</style>
</head>
<body>
<div class="container" id="div1">
<div class="small_pic">
<span class="mask"></span>
<span class="float_layer"></span>
<img src="http://b.hiphotos.baidu.com/image/w%3D310/sign=6c8629c441540923aa69657fa259d1dc/b812c8fcc3cec3fd1d347092de88d43f869427cb.jpg" />
</div>
<div class="big_pic">
<img src="http://a.hiphotos.baidu.com/image/w%3D310/sign=c53e905c4f10b912bfc1f0fff3fcfcb5/83025aafa40f4bfbf3c249b30b4f78f0f63618c2.jpg" />
</div>
</div> <script type="text/javascript">
var util = { //获取类名
getByClass : function(oParent,oClass){
var oEle = oParent.getElementsByTagName('*');
var oTemp = [];
for(var i = 0 ; i < oEle.length ; i++){
if(oEle[i].className == oClass){
oTemp.push(oEle[i]);
}
}
return oTemp;
}
}
window.onload = function(){
var oDiv = document.getElementById('div1');
var oMask = util.getByClass(oDiv,'mask')[0];
var oFloat = util.getByClass(oDiv,'float_layer')[0];
var oBig = util.getByClass(oDiv,'big_pic')[0];
var oSamll = util.getByClass(oDiv,'small_pic')[0];
var oImg = oBig.getElementsByTagName('img')[0];
oMask.onmouseover = function(){
oFloat.style.display = "block";
oBig.style.display = "block";
} oMask.onmouseout = function(){
oFloat.style.display = "none";
oBig.style.display = "none";
} oMask.onmousemove = function(e){
var e = e || window.event; var oLeft = e.clientX - oDiv.offsetLeft - oSamll.offsetLeft - oFloat.offsetWidth / 2; //灰色遮罩层偏移量
var oTop = e.clientY - oDiv.offsetTop - oSamll.offsetTop - oFloat.offsetHeight / 2;
if(oLeft < 0){ //边缘判断
oLeft = 0;
}else if(oLeft > oMask.offsetWidth - oFloat.offsetWidth){
oLeft = oMask.offsetWidth - oFloat.offsetWidth;
}
if(oTop < 0){
oTop = 0;
}else if(oTop > oMask.offsetHeight - oFloat.offsetHeight){
oTop = oMask.offsetHeight - oFloat.offsetHeight;
}
oFloat.style.left = oLeft + 'px';
oFloat.style.top = oTop + 'px'; var oPercentX = oLeft / (oMask.offsetWidth - oFloat.offsetWidth); //两图比例计算
var oPercentY = oTop / (oMask.offsetHeight - oFloat.offsetHeight); oImg.style.left = -oPercentX * (oImg.offsetWidth - oBig.offsetWidth) + 'px'; //最终大图所处位置
oImg.style.top = -oPercentY * (oImg.offsetHeight - oBig.offsetHeight) + 'px';
}
}
</script>
</body>
</html>
可复制下来直接使用
比较简单放大镜效果
【JavaScript】放大镜效果的更多相关文章
- javascript放大镜效果
JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTM ...
- JavaScript之放大镜效果
在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...
- JavaScript之放大镜效果2
在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...
- 原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- JavaScript仿淘宝实现放大镜效果的实例
我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...
- JavaScript图形实例:图形放大镜效果
1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...
- javascript html 鼠标放大镜效果
1.鼠标放大镜效果 鼠标放大镜效果,将鼠标移入到左图片,则可以在其右边看到放大的图片,且鼠标移动滑块的大小即为右图显示图片.实际效果如下图所示: <!DOCTYPE html> < ...
随机推荐
- UE4 AI入门
转自:http://blog.csdn.net/u011707076/article/details/46607121 本文是翻译的官方文https://docs.unrealengine.com/l ...
- 为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉?
为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样 两个div高度相同,第二个我写了一个1当作 有内容吧,它就下沉了... 奇怪... ...
- python 中的 try/except/else/finally语句
1.python中try/except/else/finally正常的语句是这样的: try: normal excute block except A: Except A handle except ...
- 安装php-amqplib(RabbitMQ的phpAPI)
历史经验告诉我们,装逼没有好下场. 总结一下之前composer安装php-amqplib包失败的原因: composer安装的时候需要指定PHP执行文件的位置: PHP安装路径:/usr/local ...
- Linux进程管理
一.进程管理简介 进程是正在执行的程序或命令,每一个进程都是一个运行实体,都有自己的地址空间,并占用一定的系统资源. 进程管理的作用: 1.判断服务器的健康状态 2.查看系统中的所有进程 3.杀死进程 ...
- 剑指offer五:
输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. /* public class ListNode { int val; ListNode next = n ...
- rgb转16进制 简单实现
function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); }
- angularJS获取json数据(实战)
学习了这么多天的AngularJS,今天想从实战的角度和大家分享一个简单的Demo--用户查询系统,以巩固之前所学知识.功能需求需要满足两点 1.查询所有用户信息,并在前端展示 2.根据id查询用户信 ...
- python获取时间
获取当前时间,和当前UTC时间 #!/usr/bin/env python #_*_ encoding:utf-8_*_ import datetime import time utctime = d ...
- MFC编程入门之二十七(常用控件:图片控件PictureControl)
上一节讲的是滚动条控件,本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示图片以美化界面. 图片控件简介 图片控件和前面讲到的静态文本框都是 ...