<!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. Kafka消费组(consumer group)

    一直以来都想写一点关于kafka consumer的东西,特别是关于新版consumer的中文资料很少.最近Kafka社区邮件组已经在讨论是否应该正式使用新版本consumer替换老版本,笔者也觉得时 ...

  2. 【Java每日一题】20161229

    package Dec2016; import java.util.ArrayList; import java.util.List; public class Ques1229 { public s ...

  3. 【Java每日一题】20161223

    package Dec2016; public class Ques1223 { public static void main(String[] args){ Integer obj = Integ ...

  4. spring+mybatis多数据源动态切换

    spring mvc+mybatis+多数据源切换 选取oracle,mysql作为例子切换数据源.oracle为默认数据源,在测试的action中,进行mysql和oracle的动态切换. web. ...

  5. 9.2.4 .net core 通过ViewComponent封装控件

    我们在.net core中还使用了ViewComponent方式生成控件.ViewComponent也是asp.net core的新特性,是对页面部分的渲染,以前PartialView的功能,可以使用 ...

  6. react-echarts之折线图的显示

    react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...

  7. BPM实例分享——金额规则大写

    金额规则大写 在涉及金额的流程中经常会遇到需要大写金额数据与小写金额匹配,如何实现输入数字后自动转换呢? 初级用法: 1.在默认表单基本属性javascript 中增加如下金额转换方法 /** 数字金 ...

  8. Centos6.2设置静态ip和dns

    参考了如下文章:https://gist.github.com/fernandoaleman/2172388http://www.lifelinux.com/how-to-configure-stat ...

  9. Dynamics CRM 2015-Sign Out选项

    If you are using CRM Online - there is a sign out button in the upper right corner (in the web versi ...

  10. ASP.NET的六大内置对象

    ASP.NET 六大内置对象(System.Web.UI.Page类): 1.Response 2.Request 3.Server 4.Application 5.Session 6.Cooki R ...