原生javascript-图片弹窗交互效果
本人的第一个原生js插件 - picLightBox
在线例子：http://lgy.1zwq.com/photoBox/
【一】用var 声明多个变量，比每个变量都用var快多了
var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop,
sWindow_h = document.documentElement.clientHeight,
t_h = parseInt(this.getCss(this.getId('gy_photoBox_head'),'height')),
hold_h = sWindow_h - t_h - 20,
width = this.nImgWidth ,
height = this.nImgHeight;
【二】Dom事件优化，在 window.onresize时，定义个定时器,setTimeout，可以防止事件频繁调用
windowResize:function(){
var _that = this,
_timer = null;
// 函数节流
window.onresize = function(){
clearTimeout(_timer);
_timer = setTimeout(function(){
if( _that.tools.getId('gy_photoBox')){
_that.setBoxCss();
}
},100);
}
}
【三】图片加载的处理函数
/*
@ src [String] 图片的地址
@ success [Function] 图片加载成功的回调函数
@ error [Function] 图片加载失败的回调函数
*/
imgLoading:function(opt){
var _img = new Image(),
_that = this;
_img.onload = function(){
_that.nImgWidth = this.width;
_that.nImgHeight = this.height;
if(typeof opt.success == 'function'){
setTimeout(function(){
opt.success();
},300);
}
}
_img.onerror = function(){
if(typeof opt.error){
opt.error();
}
}
// 注意：要放在onload事件下面，否则ie会出现BUG
_img.src = opt.src;
}
源代码：
/*
author:laoguoyong
*/ (function(){
/* -------------------------简单的选择器-----------------------
@ 参数 [string]
---------------------------------------
★-只支持以下选择-★
@ 支持一级选择器：如'#id','.class','p'
@ 支持后代选择，如 '.class p','body span'
@ 支持子元素选择，如 '.class>p','body>span'
----------------------------------------
@ return [Array]
*/
var selector = function(str){
// 定义元素数组
var elem = [];
/* 私有方法
------------------------*/
//返回是id的元素
function _getId(id){
return document.getElementById(id);
}
//返回存在此类名的元素-元素
function _getByClassName(className,parent){
var class_array = [],
node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
reg = new RegExp("(^|\\s)"+className+"(\\s|$)");
for(var n=0,i=node.length;n<i;n++){
if(reg.test(node[n].className)){
class_array.push(node[n]);
}
}
return class_array;
}
//一级选择，如 '#id','p','.class'
// return [Array]
function _getDom(s){
var array_elem = [];
if (s.indexOf('#')==0){
array_elem.push(_getId(s.slice(1)));
}
else if(s.indexOf('.')==0){
array_elem = array_elem.concat(_getByClassName(s.slice(1)));
}
else{
var tag = document.getElementsByTagName(s);
for(var n=0,i=tag.length;n<i;n++){
array_elem.push(tag[n]);
}
}
return array_elem;
}
/*
@ arry_elm [Array] : 元素数组，如 ['.demo','p'] ，选择的是.demo下面的p元素，至于是选择后代还是子代，请看第2个参数解释
@ r [String] -可选（不传默认为选择后代）: '>'，是选择子代元素;
--------------------------
@ return [Array]
*/
function _query(array_elem,r){
var node = array_elem,
type_name = node[0].match(/\#/)?'id_'+node[0].slice(1):node[0].match(/\./)?'className_'+node[0].slice(1):'tagName_'+node[0],
child = _getDom(node[1]),
type = type_name.split('_'),
len = document.getElementsByTagName('*').length,
reg = new RegExp("(^|\\s)"+type[1]+"(\\s|$)");;
for(var i=0,j=child.length;i<j;i++){
var par = child[i].parentNode;
for(var n=0;n<len;n++){
if(par.nodeType == 9){
break;
} if(reg.test(par[type[0]])){
elem.push(child[i]);
break;
}else{
if(r == '>') break;
par = par.parentNode;
}
}
}
}
/* 接口
-----------------------*/
var elemStr = str.replace(/(^\s+)|(\s+$)/,'');
if(document.querySelectorAll){
var dom = document.querySelectorAll(elemStr);
for(var n=0,len=dom.length;n<len;n++){
elem.push(dom[n]);
}
}else{
var split = /[\>\s]/g.exec(elemStr);
if(split){
var node = elemStr.split(split[0]);
_query(node,split[0]);
}else{
elem = elem.concat( _getDom(elemStr) );
} }
return elem;
}
/* 弹窗功能构造函数
-----------------------*/
function LGY_photoBox(option){
this.opt = option;
this.oTarget = typeof option.target == 'object'?option.target:selector(option.target);
if(!this.oTarget) return;
this.nLen = this.oTarget.length; //总个数
this.aBigimg_src = []; //大图数据数组
this.aTitle = []; //标题数据数组
this.nIndex = 0; //索引
this.nImgWidth = 0; //动态获取图片的宽
this.nImgHeight = 0; //动态获取图片的高
this.nDelay = 0.2;
this.intit();
}
LGY_photoBox.prototype = {
intit:function(){
var _that = this;
this.getData();
for(var n=0;n<this.nLen;n++){
this.oTarget[n].index = n;
this.oTarget[n].onclick = function(e){
_that.createCover();
var e = _that.tools.getEvent(e),
target = _that.tools.getTarget(e);
// 设置浏页面没有滚动条出现
_that.tools.setCss(document.documentElement,{'height':'100%','overflow-y':'hidden','overflow-x':'hidden'});
// 获取当时索引
_that.nIndex = this.index;
//首次判断
_that.firstLoad(_that.aBigimg_src[_that.nIndex],function(){
//插入结构
_that.createBoxDom();
//关闭
_that.tools.getId('gy_photoBox_close').onclick = function(){
_that.removeBox();
}
// 判断左右按钮显示
_that.btnIsShow();
// 上一张
_that.btnPrev();
// 下一张
_that.btnNext();
// 加载图片
_that.imgChange(_that.aBigimg_src[_that.nIndex]);
}); // 重置窗口大小
_that.windowResize();
// 键盘事件
_that.keyEvent();
//阻止跳转
return false;
}
}
},
createBoxDom:function(){
var doc = document,
exHtml = '',
boxHtml = doc.createElement('div');
boxHtml.id = 'gy_photoBox';
doc.body.appendChild(boxHtml);
if(typeof this.opt.appendHTML == 'string'){
exHtml = this.opt.appendHTML;
}
boxHtml.innerHTML = '<div id="gy_photoBox_prev"></div>'+
'<div id="gy_photoBox_next"></div>'+
'<span id="gy_photoBox_close"></span>'+
'<div id="gy_photoBox_head">'+exHtml+'</div>'+
'<div id="gy_photoBox_main">'+
'<img id="gy_photoBox_img_loading" src="http://www.pconline.com.cn/blank.gif" />'+
'<img id="gy_photoBox_img" />'+
'<div id="gy_photoBox_infor">'+
'<span id="gy_photoBox_num">'+
'<strong id="gy_photoBox_index"></strong>'+
'/'+this.nLen+
'</span>'+
'<p id="gy_photoBox_title"></p>'+
'</div>'+
'</div>';
},
createCover:function(){
// 创建覆盖层
var doc = document,
coverHtml = doc.createElement('div');
coverHtml.id = 'gy_photoBox_cover';
doc.body.appendChild(coverHtml);
//设置覆盖层的样式
this.tools.setCss(this.tools.getId('gy_photoBox_cover'),{'height':(doc.body.scrollTop || doc.documentElement.scrollTop)+(doc.documentElement.clientHeight)+'px'});
},
setBoxCss:function(){
var doc = document,
nScrollTop = doc.body.scrollTop || doc.documentElement.scrollTop,
nWindow_h = doc.documentElement.clientHeight,
eBox_head_h = this.tools.getId('gy_photoBox_head').clientHeight,
eBox = this.tools.getId('gy_photoBox'),
eBoxPadding = 10,
hold_h = nWindow_h - eBoxPadding - 50 - eBox_head_h,
width = this.nImgWidth ,
height = this.nImgHeight; // alert('nWindow_h:'+nWindow_h+'-'+'eBoxPadding:'+eBoxPadding+'-'+'eBox_head_h:'+eBox_head_h);
// 图片大小超过可见范围，进行缩放
if(this.nImgHeight>hold_h){
height = hold_h,
width = Math.ceil(this.nImgWidth*(height/this.nImgHeight));
} //设置盒子在整个页面居中
this.tools.setCss(eBox,{'width':width+'px',
'height':eBox_head_h + height + 'px',
'margin-left':-(width+eBoxPadding)/2+'px',
'top':nScrollTop+(nWindow_h-height-eBoxPadding)/2+'px'});
this.tools.setCss(this.tools.getId('gy_photoBox_main'),{'width':width+'px','height':height + 'px'});
//设置覆盖层的样式
this.tools.setCss(this.tools.getId('gy_photoBox_cover'),{'height':nScrollTop+doc.documentElement.clientHeight+'px'});
},
removeBox:function(){
var doc = document;
if(this.tools.getId('gy_photoBox')){
doc.body.removeChild(this.tools.getId('gy_photoBox'));
}
if(this.tools.getId('gy_photoBox_cover')){
document.body.removeChild(this.tools.getId('gy_photoBox_cover'));
}
this.tools.setCss(document.documentElement,{'height':'auto','overflow-y':'auto','_overflow-y':'scroll','overflow-x':'auto'});
},
getData:function(){
for(var n=0;n<this.nLen;n++){
var src = this.oTarget[n].getAttribute('href'),
title = this.oTarget[n].getAttribute('title');
this.aBigimg_src.push(src);
if(!title) title = '';
this.aTitle.push(title);
}
},
btnIsShow:function(){
this.tools.setCss(this.tools.getId('gy_photoBox_prev'),{'display':'block'});
this.tools.setCss(this.tools.getId('gy_photoBox_next'),{'display':'block'});
if(this.nIndex == 0) this.tools.setCss(this.tools.getId('gy_photoBox_prev'),{'display':'none'});
if(this.nIndex == (this.nLen-1)) this.tools.setCss(this.tools.getId('gy_photoBox_next'),{'display':'none'});
},
imgChange:function(){
var _that = this,
_src = this.aBigimg_src[this.nIndex],
eLoadingTips = this.tools.getId('gy_photoBox_img_loading'),
eImg = this.tools.getId('gy_photoBox_img'),
eTitle = this.tools.getId('gy_photoBox_title'),
eInfor = this.tools.getId('gy_photoBox_infor');
// 显示loading图片
this.tools.setCss(eLoadingTips,{'display':'block'});
this.tools.setCss(eInfor,{'display':'none'});
// 判断左右按钮显示
this.btnIsShow();
// 图片加载处理
this.imgLoading({
'src':_src,
'success':function(){
_that.tools.setCss(eLoadingTips,{'display':'none'});
_that.tools.setCss(eInfor,{'display':'block'});
// 设置真实图片路径，标题，当前页码
eImg.src = _src;
eTitle.innerHTML = _that.aTitle[_that.nIndex];
_that.tools.getId('gy_photoBox_index').innerHTML = (_that.nIndex+1);
// 设置样式
_that.setBoxCss();
// 弹窗呈现
_that.tools.setCss(_that.tools.getId('gy_photoBox'),{'visibility':'visible'});
if(_that.tools.getId('gy_photoBox_firstLoad')){
document.body.removeChild(_that.tools.getId('gy_photoBox_firstLoad'));
}
// 每次切换执行的回调函数
if(typeof _that.opt.onChange == 'function'){
_that.opt.onChange({'src':_src,'index':_that.nIndex,'title':_that.aTitle[_that.nIndex]});
} },
'error':function(){
setTimeout(function(){
_that.tools.setCss(eLoadingTips,{'display':'none'});
},200);
eImg.src = 'gyPhotoBox/error.png';
eTitle.innerHTML = '暂无相关图片';
_that.nImgWidth = 400;
_that.nImgHeight = 300;
_that.setBoxCss();
_that.tools.setCss(_that.tools.getId('gy_photoBox'),{'visibility':'visible'});
if(_that.tools.getId('gy_photoBox_firstLoad')){
document.body.removeChild(_that.tools.getId('gy_photoBox_firstLoad'));
}
}
});
},
btnPrev:function(){
var _that = this;
this.tools.getId('gy_photoBox_prev').onclick = function(){
_that.nIndex--;
_that.imgChange();
}
},
btnNext:function(){
var _that = this;
this.tools.getId('gy_photoBox_next').onclick = function(){
_that.nIndex++;
_that.imgChange();
}
},
keyEvent:function(){
var _that = this;
document.onkeydown = function(e){
var e = e || window.event;
switch(e.keyCode){
case 37:{
if(_that.nIndex != 0&&_that.tools.getId('gy_photoBox_prev')){
_that.nIndex--;
_that.imgChange();
}
};break;
case 39 :{
if(_that.nIndex != (_that.nLen-1)&&_that.tools.getId('gy_photoBox_next')){
_that.nIndex++;
_that.imgChange();
}
};break;
case 27:{
_that.removeBox();
};break;
}
}
},
/*
@ src [String] 图片的地址
@ success [Function] 图片加载成功的回调函数
@ error [Function] 图片加载失败的回调函数
*/
imgLoading:function(opt){
var _img = new Image(),
_that = this;
_img.onload = function(){
_that.nImgWidth = this.width;
_that.nImgHeight = this.height;
if(typeof opt.success == 'function'){
setTimeout(function(){
opt.success();
},300);
}
}
_img.onerror = function(){
if(typeof opt.error){
opt.error();
}
}
// 注意：要放在onload事件下面，否则ie会出现BUG
_img.src = opt.src;
},
firstLoad:function(src,callback){
var _that = this,
html = document.createElement('div');
html.id = 'gy_photoBox_firstLoad';
document.body.appendChild(html);
this.tools.setCss(this.tools.getId('gy_photoBox_firstLoad'),{'top':(document.body.scrollTop || document.documentElement.scrollTop)+(document.documentElement.clientHeight/2) +'px'});
if(typeof callback == 'function') {
callback();
}
},
windowResize:function(){
var _that = this,
_timer = null;
// 函数节流
window.onresize = function(){
clearTimeout(_timer);
_timer = setTimeout(function(){
if( _that.tools.getId('gy_photoBox')){
_that.setBoxCss();
} },100);
}
},
tools:function(){
return{
getEvent:function(e){
return e || window.event;
},
getTarget:function(e){
return e.target || e.srcElement;
},
preventDefault:function(e){
e.preventDefault?e.preventDefault():e.returnValue = false;
},
getId:function(id){
return document.getElementById(id);
},
getCss:function(node,value){
return node.currentStyle?node.currentStyle[value]:getComputedStyle(node,null)[value];
},
setCss:function(node,val){
for(var v in val){
node.style.cssText += ';'+ v +':'+val[v];
}
}
}
}()
} window.LGY_photoBox = LGY_photoBox;
})();
原生javascript-图片弹窗交互效果的更多相关文章
- javascript - 图片的幻灯片效果
javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...
- 原生 JavaScript 图片裁剪效果
图片裁剪程序效果如下,可鼠标操作. 拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CS ...
- 《JavaScript 实战》：JavaScript 图片滑动切换效果
看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...
- javascript 图片淡入淡出效果 实例源代码
代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...
- javascript图片切换
JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...
- javascript学习-原生javascript的小特效（多个运动效果整理）
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- 原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
- 【javascript/css】Javascript+Css实现图片滑动浏览效果
今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...
随机推荐
- Android自定义属性：attr.xml 与 TypedArray
1.attr.xml <?xml version="1.0" encoding="utf-8"?> <resources> <de ...
- centos7 重启网卡失败
今天在centOS 7 network服务重启不了 现把各种解决方法归纳整理,希望能让后面的同学少走点歪路... 首先看问题:执行service network restart命令后出现下面的错误: ...
- .tomcat 管理 给tomcat设置用户名和密码登录
如果点击红色框框 出现403以下错误 看这个帖子可以解决 tomcat访问管理页面出现:403 Access Denied 解决方法 tomca管理 测试功能,生产环境不要用. Tomcat管理功能用 ...
- Nginx+Springboot+Vue 前后端分离 解决跨域问题
1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...
- java开发的zimg客户端
1.zimg的安装部署 最开始的时候是下载zimg的源码安装的,由于zimg依赖项众多,没有安装成功,刚好那期间在学习docker,于是docker search zimg一下,惊奇的发现有zimg镜 ...
- java执行cmd命令和linux命令
文章出处http://blog.csdn.net/xh16319/article/details/17302947 一:window下执行cmd指定 一:window下执行cmd指定 程序例子: [j ...
- Linux基础——centos 跳过管理员密码进行登录（单用户模式、救援模式）
这里列举了两种更改或者取消管理员密码登录Linux系统的方法,其实两种方法类似,都是想方设法跳过用户认定,直接更改用户文件.更改密码的过程. 为了跳过系统正常启动过程中的某些步骤,必须知道大致的系统启 ...
- Changing an Elements innerHTML in TWebBrowser
I'm unable to change the innerHTML of a javascript element, but i can change the id so i'm not sure ...
- pycharm修改配置
恢复pycharm的初始设置
- CNN学习笔记：卷积神经网络
CNN学习笔记:卷积神经网络 卷积神经网络 基本结构 卷积神经网络是一种层次模型,其输入是原始数据,如RGB图像.音频等.卷积神经网络通过卷积(convolution)操作.汇合(pooling)操作 ...