<!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. 【无私分享：ASP.NET CORE 项目实战（第七章）】文件操作 FileHelper

    目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在程序设计中,我们很多情况下,会用到对文件的操作,在 上一个系列 中,我们有很多文件基本操作的示例,在Core中有一些改变,主 ...

  2. python 数据类型 ---字符串

    1. 字符串去除空白 ,strip() , 包括空格,tab键, 换行符 >>> name = " Frank " >>> name.strip ...

  3. add-two-numbers

    leetcode开篇~ 问题描述: You are given two linked lists representing two non-negative numbers. The digits a ...

  4. 工作中常用的js、jquery自定义扩展函数代码片段

    仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp(&q ...

  5. html中role的作用

    role 是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明. 通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性. role的作用是描 ...

  6. Canvas——使用定时器模拟动态加载动画！

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. Apache Spark 1.6 Hadoop 2.6 Mac下单机安装配置

    一. 下载资料 1. JDK 1.6 + 2. Scala 2.10.4 3. Hadoop 2.6.4 4. Spark 1.6 二.预先安装 1. 安装JDK 2. 安装Scala 2.10.4 ...

  8. ClassNotFoundException超限

    错误日志图 被这弱智的错误吭了半个小时,项目本来好好的,然后因为改版加了很多东西,所以就超限了,一开始总是报下面那图的错,搞的我总以为是retrofit的错,但是好好的框架而且没改过,怎么可能会出错呢 ...

  9. java中使用mongodb的几种方式

    最近有时间看了一下mongodb,因为mongodb更容易扩展所以考虑使用mongodb来保存数据. 首先下载安装mongodb,这是很简单的,装好后使用mongod命令就可以启动数据库.正式部署的话 ...

  10. 浅谈Linux内存管理机制

    经常遇到一些刚接触Linux的新手会问内存占用怎么那么多?在Linux中经常发现空闲内存很少,似乎所有的内存都被系统占用了,表面感觉是内存不够用了,其实不然.这是Linux内存管理的一个优秀特性,在这 ...