<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜特效</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
position: relative;
}
#main2{
position: relative;
}
.smallimg{
width:300px;
height: 300px;
position: absolute;
top: 50px;
left: 50px;
}
.mark{
width:100px;
height:100px;
position: absolute;
z-index: 100;
top: 0;
background:rgba(0,0,0,.6);
display: none;
cursor: move;
}
.bigimg{
position: absolute;
top:50px;
left:400px;
width:300px;
height: 300px;
overflow: hidden;
display: none;
}
.img1{
width:300px;
height:300px;
display: block;
}
.img2{
width: 900px;
height: 900px;
display: block;
}
</style>
<body>
<div id="main">
<div class="smallimg">
<img src="img/1.jpg" class="img1"/>
<div class="mark">

</div>
</div>
<div class="bigimg">
<img src="img/1.jpg" class="img2"/>
</div>
</div>
<!--<div id="main2">
<div class="smallimg">
<img src="img/2.jpg" class="img1"/>
<div class="mark">

</div>
</div>
<div class="bigimg">
<img src="img/2.jpg" class="img2"/>
</div>
</div>-->
</body>
<script type="text/javascript">
function Show(id){
if(!document.getElementsByClassName){
document.getElementsByClassName = function(className, element){
var children = (element || document).getElementsByTagName('*');
var elements = new Array();
for (var i=0; i<children.length; i++){
var child = children[i];
var classNames = child.className.split(' ');
for (var j=0; j<classNames.length; j++){
if (classNames[j] == className){
elements.push(child);
break;
}
}
}
return elements;
};
}

var _this=this;
var main=document.getElementById(id);
this.smallimg=main.getElementsByClassName('smallimg')[0];
this.bigimg=main.getElementsByClassName('bigimg')[0];
this.mark=main.getElementsByClassName('mark')[0];
this.img2=main.getElementsByClassName("img2")[0];
this.smallimg.onmouseover=function(event){
_this.over(event);
}
this.smallimg.onmousemove=function(event){
_this.move(event);
}
this.smallimg.onmouseout=function(event){
_this.out(event);
}
}
Show.prototype.over=function(event){
var _this=this;
this.bigimg.style.display="block";
this.mark.style.display="block";
_this.show(event);
}
Show.prototype.move=function(event){
var _this=this;
this.bigimg.style.display="block";
this.mark.style.display="block";
_this.show(event);
}
Show.prototype.out=function(event){
this.bigimg.style.display="none";
this.mark.style.display="none";
}
Show.prototype.show=function(event){
var e=e||window.event;
this.L=e.clientX-this.smallimg.offsetLeft-this.mark.offsetWidth/2;
this.T=e.clientY-this.smallimg.offsetTop-this.mark.offsetHeight/2;
this.minL=0;
this.minT=0;
this.maxL=this.smallimg.offsetWidth-this.mark.offsetWidth;
this.maxT=this.smallimg.offsetHeight-this.mark.offsetHeight;
if(this.L<this.minL){
this.L=0;
}else if(this.L>this.maxL){
this.L=this.maxL;
}
if(this.T<this.minT){
this.T=0;
}else if(this.T>this.maxT){
this.T=this.maxT;
}
this.mark.style.left=this.L+'px';
this.mark.style.top=this.T+'px';
this.img2.style.marginLeft=this.L*-3+'px';
this.img2.style.marginTop=this.T*-3+'px';
}
//实现继承
/*function Show2(id){
Show.call(this,id);
}
for(var i in Show.prototype){
Show2.prototype[i]=Show.prototype[i];
}*/
window.onload=function(){
var show=new Show('main');
//var show2=new Show2('main2');
}
</script>
</html>

js版面向对象图片放大镜的更多相关文章

  1. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  2. jquery.jqzoom.js图片放大镜

    jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...

  3. [js开源组件开发]图片放大镜

    图片放大镜 一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个 ...

  4. 原生JS实现图片放大镜插件

      前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的…… 先看一下我们要是实现的最终效果是怎么样的  ...

  5. JS 图片放大镜

    今天练习一个小demo, 从本地读取图片, 然后实现类似淘宝放大镜的效果, 再加两个需求 1 .可以调节缩放比例,默认放大两倍 2 . 图片宽高自适应, 不固定宽高 话不多说先看效果: 原理:1, 右 ...

  6. vue项目js实现图片放大镜功能

    效果图:   我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...

  7. Jquery图片放大镜

    一般在“在线商城.电子商务.企业产品介绍”等地方经常会看到一些图片放大镜的功能,而做这个功能一般是会用一个js包——enlarge.js(这是jquery图片放大镜的插件).Enlarge 是一个基于 ...

  8. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  9. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

随机推荐

  1. Workflow笔记1——工作流介绍

    什么是工作流? 工作流(Workflow),是对工作流程及其各操作步骤之间业务规则的抽象.概括.描述.BPM:是Business Process Management的英文字母缩写.即业务流程管理,是 ...

  2. java 正则匹配括号对以及其他成对出现的模式

    最近,我们有个大调整,为了控制代码的质量,需要使用一些伪代码让业务人员编写应用逻辑(其实这么做完全是处于研发效能的考虑,95%以上的代码不需要特别注意都不会导致系统性风险,),然后通过工具自动生成实际 ...

  3. SpringMVC的执行流程（二）

    文字解析: 1.客户端发出一个http请求给web服务器,web服务器对http请求进行解析,如果匹配 DispatcherServlet的请求映射路径(在web.xml中指定),web容器将请求转交 ...

  4. IIS初始化（预加载），解决第一次访问慢，程序池被回收问题

    你以为你可以慢,那是不可能的!你以为你可以不动,那也是不可能的! 河南是守株待兔故事情节的发源地,讲的是懒惰的农夫坐在树桩旁等待可爱的小毛兔撞树的故事,那么这种事情怎么可能天天出现呢!你以为的事并一定 ...

  5. jQuery fsBanner 手风琴

    fsbanner是一款自定义功能丰富的响应式网站Banner手风琴特效jQuery插件.该手风琴特效兼容性很好,支持点击和鼠标滑过等触发事件,并且可添加标题或描述. 在线实例 默认 带标题 鼠标滑过 ...

  6. react-native DatePicker日期选择组件的实现

    本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...

  7. Windows Server 2003安装方法

    1. 设置BIOS,从光驱引导启动.光盘放入光驱,自动读盘,选择第一项“安装Windows Server 2003,Enterprise Bdition”: 2. 弹出加载安装文件界面. 3. 出现安 ...

  8. Javascript中，document.getElementsByName获取的就一定是数组了么？

    今天在一张JSP网页中,写一个javascript方法,用于全选. 全部被选checkBox位于一个名为mainForm的Form下,name=pushIds.方法如下: function selec ...

  9. backup log is terminating abnormally because for write on file failed: 112(error not found)

    昨天遇到一个案例,YourSQLDba做事务日志备份时失败,检查YourSQLDba输出的错误信息如下: <Exec> <ctx>yMaint.backups</ctx& ...

  10. GDB调试命令小结

    1.启动调试 前置条件:编译生成执行码时带上 -g,如果使用Makefile,通过给CFLAGS指定-g选项,否则调试时没有符号信息.gdb program //最常用的用gdb启动程序,开始调试的方 ...