JS面向对象方法(二) 面向对象方法实现橱窗式图面预览以及放大功能
效果图:
HTML结构如下:
<div id="preview">
<div id="mediumDiv">
<img id="mImg" src="data:images/products/product-s1-m.jpg"/>
<div id="mask"></div>
<div id="superMask"></div>
</div>
<div id="largeDiv"></div>
<h1>
<a class="backward_disabled"></a>
<a class="forward"></a>
<ul id="icon_list">
<li><img src="data:images\products\product-s1.jpg" /></li>
<li><img src="data:images\products\product-s2.jpg" /></li>
<li><img src="data:images\products\product-s3.jpg" /></li>
<li><img src="data:images\products\product-s4.jpg" /></li>
<li><img src="data:images\products\product-s1.jpg" /></li>
<li><img src="data:images\products\product-s2.jpg" /></li>
<li><img src="data:images\products\product-s3.jpg" /></li>
<li><img src="data:images\products\product-s4.jpg" /></li>
</ul>
</h1>
</div>
JS部分:
var pPhoto = {
LIWIDTH : 62, //每个小图片的li的固定宽度
moved : 0, //记录左移小图片的个数
count : 0, //记录小图片的总数
ul: null, //小图父元素ul
btnL: null, //左边按钮 控制右移
btnR : null,
superMark :null,
SUPERWIDTH : 350, //supermask的宽高
SUPERHEIGHT :350,
MASKWIDTH:175, //遮罩层mask的宽高
MASKHEIGHT:175,
inti : function (){ //初始化方法
this.ul = $("#icon_list")[0];
this.ul.onmouseover =this.changeMImg;
this.btnL = this.ul.parentNode.$("a")[0];
this.btnR = this.ul.parentNode.$("a")[1];
this.btnR.onclick=this.btnL.onclick=function () {
pPhoto.move(this); //将btn通过此时的this作为参数传入 move方法
//将move的this指向pPhoto对象
};
this.count = this.ul.$("li").length;
//图片放大效果遮罩层
this.supermask = $("#superMask")[0];
this.supermask.onmouseover=this.supermask.onmouseout=this.showMask;
this.supermask.onmousemove = function(){
var e = window.event || arguments[0];
pPhoto.zoom(e);
}
},
move : function (btn){//移动方法
if(!btn.className.endsWith("_disabled")) {
if (btn == this.btnR) { //判断当前btn的左右
this.ul.style.left = -(this.LIWIDTH * (++this.moved) - 20) + "px";
//-20 根据css原left属性进行修正
} else {
this.ul.style.left = -(this.LIWIDTH * (--this.moved) - 20) + "px";
}
this.btnEnable();
}
},
btnEnable : function (){//修改按钮状态方法 this-->pPhoto
if(this.moved==0){
this.btnL.className+="_disabled";
}else if(this.count-this.moved==5){
this.btnR.className+="_disabled";
}else{
this.btnL.className=this.btnL.className.replace("_disabled","");
//replace()方法并不能直接修改calssname的属性值 需要重新赋值
this.btnR.className=this.btnR.className.replace("_disabled","");
}
},
changeMImg :function (){ //this-->ul
//获取事件对象
var e = window.event || arguments[0];
//获取目标对象
var src=e.srcElemnt||e.target;
if(src.nodeName=="IMG"){
var path = src.src;
var i = path.lastIndexOf(".");
$("#mImg")[0].src=path.slice(0,i)+"-m"+path.slice(i);
}
},
showMask : function(){
var mask = $("#mask")[0];
var style = getComputedStyle(mask);
var largeDiv = $("#largeDiv")[0];
largeDiv.style.display=mask.style.display=style.display=="none"?"block":"none";
if(largeDiv.style.display=="block"){
var path = $("#mImg")[0].src;
var i=path.lastIndexOf(".");
$("#largeDiv")[0].style.backgroundImage="url('"+path.slice(0,i-1)+"l"+path.slice(i)+"')";
}
},
zoom :function (e){
var x=e.offsetX
var y=e.offsetY;
var mLeft = x-this.MASKWIDTH/2;
var mTop = y-this.MASKHEIGHT/2;
mLeft<0 && (mLeft=0);
mLeft>this.SUPERWIDTH-this.MASKWIDTH && (mLeft=this.SUPERWIDTH-this.MASKWIDTH);
mTop<0 && (mTop=0);
mTop>this.SUPERHEIGHT-this.MASKHEIGHT &&(mTop=this.SUPERHEIGHT-this.MASKHEIGHT);
var mask = $("#mask")[0];
mask.style.left=mLeft+"px";
mask.style.top=mTop+"px";
var largeDiv = $("#largeDiv")[0]
largeDiv.style.backgroundPosition=-mTop*2+"px "+-mLeft*2+"px";
}
}
Tips:
*面向对象方法在编写页面中某一块交互功能时,能有效的避免因代码过多而造成的变量污染,更有助于代码的可读性和重用性。
*this 很好很强大 在面向对象方法中如果需要指定this的指向可以使用以下方法:
this.btnR.onclick=this.btnL.onclick=function () {
pPhoto.move(this); //将btn通过此时的this作为参数传入 move方法
//将move的this指向pPhoto对象
};
*事件对象e 只能在事件绑定函数中获得 :
this.supermask.onmousemove = function(){
var e = window.event || arguments[0];
//获取事件对象e 作为参数传递给 放大方法zoom;
pPhoto.zoom(e);
}
zoom :function (e){ //zoom函数类无法获得 sueromask元素的事件对象e
var x=e.offsetX
var y=e.offsetY;
var mLeft = x-this.MASKWIDTH/2;
var mTop = y-this.MASKHEIGHT/2;
mLeft<0 && (mLeft=0);
mLeft>this.SUPERWIDTH-this.MASKWIDTH && (mLeft=this.SUPERWIDTH-this.MASKWIDTH);
mTop<0 && (mTop=0);
mTop>this.SUPERHEIGHT-this.MASKHEIGHT &&(mTop=this.SUPERHEIGHT-this.MASKHEIGHT);
var mask = $("#mask")[0];
mask.style.left=mLeft+"px";
mask.style.top=mTop+"px";
var largeDiv = $("#largeDiv")[0]
largeDiv.style.backgroundPosition=-mTop*2+"px "+-mLeft*2+"px";
}
JS面向对象方法(二) 面向对象方法实现橱窗式图面预览以及放大功能的更多相关文章
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- riot.js教程【二】组件撰写准则、预处理器、标签样式和装配方法
基本要求 一个riot标签,就是展现和逻辑的组合(也就是html和JS): 以下是编写riot标签最基本的规则: 先撰写HTML,再撰写JS,JS代码可以写在<script>标签内部,但这 ...
- 通过修改ajaxFileUpload.js实现多图片动态上传并实现预览
参考:http://smotive.iteye.com/blog/1903606 大部分我也是根据他的方法修改的,我也要根据name实现动态的多文件上传功能,但是有个问题使我一直无法实现多文件上传. ...
- 最好用的js前端框架、组件、文档在线预览插件
这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...
- JS通过使用PDFJS实现基于文件流的预览功能
需求: 使用JS实现PDF文件预览功能 备选方案: 使用ViewerJS,官网 http://viewerjs.org/ 使用PDFJS,官网 https://mozilla.github.io/ ...
- JS微信网页使用图片预览(放大缩小)
前言 需求在微信网页中客户点击图片可进行预览放大缩小功能,网上找了各种js方式实现, 唯一的麻烦就是不兼容或者和项目框架不兼容 次函数只只用于部分客户端,否则会出现 WeixinJSBridge is ...
- 4.2 面向对象分析(二) CRC方法标识概念类
CRC 又称为CRC索引卡片:CRC card 每张卡片代表一个类 Each card represents one class 每张卡片上写出这个类承担的职责.与其合作交互的其他类名 ...
- node.js实现国标GB28181流媒体点播(即实时预览)服务解决方案
背景 28181协议全称为GB/T28181<安全防范视频监控联网系统信息传输.交换.控制技术要求>,是由公安部科技信息化局提出,由全国安全防范报警系统标准化技术委员会(SAC/TC100 ...
- Java语言实现简单FTP软件------>FTP软件效果图预览之下载功能(二)
介绍完FTP协议后,来看看该软件完成后的效果图 客户端的主界面如上图所示,主要是分为以下几个界面: 数据输入界面:用来让用户输入服务器的地址,用户名,密码,端口号等. 站点菜单.本地菜单.远程菜单以及 ...
随机推荐
- Codeforces Round #379 (Div. 2) E. Anton and Tree —— 缩点 + 树上最长路
题目链接:http://codeforces.com/contest/734/problem/E E. Anton and Tree time limit per test 3 seconds mem ...
- HTML: 简单的悬停效果
1. [图片] 捕获.jpg 2. [代码][CSS]代码 body { background: #000; overflow-y: scroll; } .items { ...
- 20171202作业1python入门
1.简述编译型与解释型语言的区别,且分别列出你知道的哪些语言属于编译型,哪些属于解释型 编译型:需要编译器,执行前一次性翻译成机器能读懂的代码(如c,c++,执行速度快,调试麻烦) 解释型:需要解释器 ...
- 在SQL SERVER 2008中通过已有的数据库生成建库脚本
- 局域网 —— VLAN
0. network 简单分类 LAN:Local Area Network,局域网: WLAN:Wireless LAN(Local Area Network), VLAN:Virtual LAN( ...
- Ubuntu+win7 双系统修改开机启动项顺序
Ubuntu和windows双系统安装完后默认Ubuntu系统是第一启动项,等待时间是10秒 如果你想改成windows为第一启动项 先进去Ubuntu系统 打开终端 (Ctrl+Alt+T) 修改启 ...
- CSS:CSS cursor 属性
ylbtech-CSS:CSS cursor 属性 1.返回顶部 1. 实例 一些不同的光标: span.crosshair {cursor:crosshair;} span.help {cursor ...
- visualstudio2017 +EF+Mysql生成实体数据模型闪退
VisualStudio2017+EF+MySql正常运转,费了不少劲,踏过不少坑 1.安装 Connector/NET 8.0.13 地址:https://dev.mysql.com/downloa ...
- C语言--递归问题
1,一个经典的例子,理解递归过程的展开 #include<stdio.h> void func(int i){ ) func(i/); printf("%d",i) } ...
- 将java项目打包成jar包,之后在制作成可执行的exe文件
1.利用eclipse选择 2.利用ex4j,详情见百度教程http://jingyan.baidu.com/article/00a07f38aad55182d128dc4c.html