<!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. Xamarin for Visual Studio V3.11.431 于 2015.4.3-2015.4.17 最新发布(Win & Mac)

    Beta Release: April 3 edited April 17 in Visual Studio Released versions: Windows Xamarin.VisualStud ...

  2. [Tool] 插入折叠区域功能

    之前写了一个 仿博客园网页端推荐的插入代码插件, 后来在总结一些技术文档时,总是想把一些属性或者方法,参数等,都用表格的形式清晰的列举出来,但是插入的表格太大的话,上下跨度就显得特别大,来回上下滚动的 ...

  3. Checkbox 模板和样式

    <Style TargetType="{x:Type CheckBox}"> <Setter Property="FontFamily" Va ...

  4. bzoj2820--莫比乌斯反演

    题目大意: 给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对. 推导: 设n<=m ans=  = 由于gcd(i,j)= ...

  5. Maven远程仓库的配置

    在很多情况下,默认的中央仓库无法满足项目的需求,可能项目需要的构件存在于另外一个远程仓库中,如JBoss Maven仓库.这时,可以在POM中配置该仓库,见代码如下: <!-- 远程仓库的配置 ...

  6. 5.2 Array类型介绍

    Array类型是数组类型,Array(数组)类型也是引用类型中的一种. js 数组中的每一项可以保存任何类型的数据. js数组的大小/长度是可以动态调整的.如果你往数组中添加数据,数组长度会自动增加. ...

  7. Undefined symbols for architecture arm64解决方案

    在iOS开发中经常遇到的一个错误是Undefined symbols for architecture arm64,这个错误表示工程某些地方不支持arm64指令集.那我们应该怎么解决这个问题了?我们不 ...

  8. Centos 安装配置gerrit

    关闭selinux,不然nginx的反向代理会报错connect() to 127.0.0.1:8080 failed (13: Permission denied) while connecting ...

  9. java Future 接口介绍

    (转自:http://blog.csdn.net/yangyan19870319/article/details/6093481) 在Java中,如果需要设定代码执行的最长时间,即超时,可以用Java ...

  10. STM32 按键输入

    #include "stm32f10x.h"#include "key.h" //按键初始化函数void KEY_Init(void) { GPIO_InitT ...