<!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. JavaScript弹窗

    警告框: alert("警告信息!"); alert("警告\n信息!"); 确认框: var t=confirm("请确认!"); // ...

  2. Github pages + jekyll 博客快速搭建

    Github pages + jekyll 博客快速搭建 寻找喜欢的模版 https://github.com/jekyll/jekyll/wiki/sites http://jekyllthemes ...

  3. VS2010中dumpbin工具的使用

    用VS2010生成的.obj文件..lib库..dll库..exe执行文件,如果想查看其中这些文件或库包含了哪些函数以及相关的信息(符号清单),可以通过VS2010自带的dumpbin工具来完成. d ...

  4. Mybatis框架的模糊查询（多种写法）、删除、添加（四）

    学习Mybatis这么多天,那么我给大家分享一下我的学习成果.从最基础的开始配置. 一.创建一个web项目,看一下项目架构 二.说道项目就会想到需要什么jar 三.就是准备大配置链接Orcl数据库 & ...

  5. ArcGIS 地图性能优化系列一

    经常有客户会咨询到如何提高地图的显示性能.为何ArcMap刷新地图那么缓慢.为何地图服务响应要等待10多秒? 诸如这些问题,虽然它们的表象都是相似的,但是往往在分析排查问题的时候,我们发现背后的原因是 ...

  6. JDBC数据库访问操作的动态监测 之 p6spy

    P6spy是一个JDBC Driver的包装工具,p6spy通过对JDBC Driver的封装以达到对SQL语句的监听和分析,以达到各种目的. P6spy1.3 sf.net http://sourc ...

  7. android ImageLoader 混淆加载drawable出现黑色图片的解决方案

    在网上找了很久,没有找到.后来看了源码才知道... 多线程异步加载和显示图片(图片来源于网络.sd卡.assets文件夹,drawable文件夹(不能加载9patch),新增加载视频缩略图) Stri ...

  8. 在 CentOS7 上将自定义的 jar 包注册为 linux 服务 service

    在 CentOS7 上将自定义的 jar 包注册为 linux 服务 service 1.在 /etc/rc.d/init.d/ 目录下创建一个名字和服务名完全相同的 shell 脚本文件 joyup ...

  9. 转 使用@Controller注解为什么要配置<mvc:annotation-driven />

    <mvc:annotation-driven /> 是一种简写形式,完全可以手动配置替代这种简写形式,简写形式可以让初学都快速应用默认配置方案.<mvc:annotation-dri ...

  10. Node.js学习——基本模块之fs

    基本模块之fs 异步读文件 异步读取一个文本文件的代码如下: 'use strict'; var fs = require('fs'); fs.readFile('sample.txt', 'utf- ...