基于OO的图片墙展示插件-----【如需动画展开需依附前面的动画插件】

最近项目不多，闲下来看到很多图片墙的展示效果，抽空也写了个小插件如下：

PS：这个插件最好在页面载入下animation那个动画插件否则效果有点单一，动画插件地址是：http://blog.csdn.net/nx8823520/article/details/8287506，，顺便附带说下，进步本身基于就是交流和共享，个人不反对转载文章，但是麻烦转载的话标注下原文地址，方便碰到问题后交流谢谢,DEMO在下面，这个DEMO是用css3写的不ie下读取的js，css3完全可以达到这个效果甚至更好，只不过对于替换图片有点无力，不过这本身也就不是css做的事

/*** @name: Imgshow* @overview: 用于lst图片展示缩放效果* @require: 此模块如需动画效果鱼依附ani动画组件（地址:http://blog.csdn.net/nx8823520/article/details/8287506）* @author: Tommy_21011219_* @argument:* 一、只需一个参数为对象：* 1、oEvn为需要变换对象的父级ID或者节点；（此效果用事件委托绑定所以第一个参数传入父级dom即可）--必须值* 2、childTag为效果绑定的几点的标签名默认为li，可选值* 3、styJson效果变换的一个json对象，如宽高等（例：styJson:{width:200,height:220}）* 4、imgPos需变换图片地址，默认为元素上第一张图片，可选项* 5、dataBigImg图片变大时切换的大图地址，默认查找属性data-bj不存在此属性及未传入此参数时，默认放大原图，可选项*/
!function(local){var Imgshow = function(oArg){var _this = this;if(!(_this instanceof Imgshow))return new Imgshow(oArg);this.init.apply(this,arguments);}Imgshow.prototype = {init:function(oArg){//判断参数是否正确if(Object.prototype.toString.call(oArg)!=="[object Object]"||!oArg.oEvn||!oArg.styJson) return false;//最新层叠设置this.minzIndex = 1;//合并对象this.merge(oArg);var i= 0, len= oArg.oEvn.length||1,eleAry;this.length = len;for(;i<len;i++) this[i] = oArg.oEvn.length ? this.getEle(oArg.oEvn[i]) : this.getEle(oArg.oEvn);//事件初始化this.evenInit();},merge:function(o){this.o = {oEvn:null,childTag:'li',styJson:null,imgPos:0,dataBigImg:'data-bj'}for(var c in o)this.o[c] = o[c];},getEle:function(i){return typeof i != "string" && i.nodeType === 1 ? i : document.getElementById(i);},evenInit:function(){var i, j, chidEle, chidleng, leng= this.length;i= 0;//初始化目标子元素for(; i<leng; i++){this[i].childEle= this[i].getElementsByTagName(this.o.childTag);if(!this[i].childEle) return;j= 0;chidEle= this[i].childEle;chidleng= chidEle.length;//set父级高度this[i].style.height= this[i].offsetHeight+ "px";//设置子元素的left、top等值&&记录默认属性for(; j<chidleng; j++){chidEle[j].style.top= chidEle[j].offsetTop+ "px";chidEle[j].style.left= chidEle[j].offsetLeft+ "px";for(var sty in this.o.styJson){chidEle[j][sty] = this.getStyle(chidEle[j], sty);}}//set子元素positionj= 0;for(; j<chidleng; j++) {chidEle[j].style.position= "absolute";chidEle[j].style.margin= 0;}//事件绑定this.bindEven(this[i], "mouseover", this.start);}},bindEven:function(oEle,oEvn,fn){var _this= this, eventHander;if(!oEle)return;eventHander = function(e){fn.call(oEle, e, _this);}oEle.attachEvent ? oEle.attachEvent("on"+oEvn, eventHander) : oEle.addEventListener(oEvn, eventHander, false);},start:function(e, self){var oEvn = e || event, oTarget= oEvn.srcElement || oEvn.target;//定位目标元素while(oTarget.nodeName.toLowerCase()!=self.o.childTag&&oTarget!=this&&oTarget.parentNode!=this) oTarget = oTarget.parentNode;//目标元素移入条件判别if(oTarget.nodeName.toLowerCase()==self.o.childTag&&oTarget.parentNode==this&&!oTarget.evnBegin){//zIndex层叠添加oTarget.style.zIndex= self.minzIndex++;//styJon属性添加self.o.styJson.width&& (self.o.styJson.marginLeft= "-"+ (self.o.styJson.width-parseInt(self.getStyle(oTarget, "width")))/2);self.o.styJson.height&& (self.o.styJson.marginTop= "-"+ (self.o.styJson.height-parseInt(self.getStyle(oTarget, "height")))/2);//查找图片var temVar = oTarget.getElementsByTagName("img"), temAtr;oTarget.img = temVar[self.o.imgPos] ? temVar[self.o.imgPos] : temVar[0];//图片替换temAtr = oTarget.img.getAttribute(self.o.dataBigImg);oTarget.oldImg = oTarget.img.src;temAtr&&temAtr!=oTarget.img.src&&(oTarget.img.src = temAtr);if(typeof ani=="function"){//动画开始ani(oTarget, {styJson:self.o.styJson});ani(oTarget.img, {styJson:{width:self.o.styJson.width,height:self.o.styJson.height}});}else{for(var sty in self.o.styJson)oTarget.style[sty] = sty == "opacity" ? self.o.styJson[sty] : self.o.styJson[sty] + 'px';//重置图片属性oTarget.img.width = self.o.styJson.width;oTarget.img.height = self.o.styJson.height;}//自身属性绑定禁止事件干扰oTarget.evnBegin = true;//鼠标移出事件bindself.bindEven(oTarget, "mouseout", self.over);}},over:function(e, self){var oEvn = e || event,reltg = oEvn.relatedTarget ? oEvn.relatedTarget : oEvn.type == 'mouseout' ? oEvn.toElement : oEvn.fromElement;while (reltg && reltg != this){reltg = reltg.parentNode;}if(reltg!=this&&this.evnBegin){if(typeof ani=="function"){ani(this,{styJson:{"marginLeft":0,"marginTop":0,"width":this.width,"height":this.height}, isHide:false});ani(this.img,{styJson:{"width":this.width,"height":this.height}});}else{for(var sty in self.o.styJson) this.style[sty] = this[sty] ? this[sty] : 0;//重置图片属性this.img.width = parseInt(this.width);this.img.height = parseInt(this.height);}this.evnBegin = false;//图片还原this.img.src != this.oldImg&&(this.img.src = this.oldImg);}},getStyle:function(oEle, iAtr){return oEle.currentStyle ? oEle.currentStyle[iAtr] : getComputedStyle(oEle, null)[iAtr];}}local.Imgshow = Imgshow;
}(window)

DEMO如下：

<!DOCTYPE html>
<html>
<head><title>js效果照片墙</title><style>.photo-bx,.photo-item{margin:0;padding:0;}.photo-bx{width:600px;margin:50px auto;zoom:1;position:relative;}.photo-bx:after{display:block;content:'.';visibility:hidden;clear:both;overflow:hidden;}.photo-item{float:left;margin:5px;list-style:none;width:125px;height:125px;}/*css3Effect*/.photo-item .p-bx, .photo-item .img-bg, .photo-item img, .photo-item .img-bg div{-moz-transition:all 0.5s ease-out 0s;-webkit-transition:all 0.5s ease-out 0s;-o-transition:all 0.5s ease-out 0s;}.photo-item .p-bx{position:absolute;}.photo-item img{position:absolute;;left:0;top:0;background:#fff;}.photo-item .img-bg{position:absolute;border:1px solid #aaa;width:125px;height:125px;left:-5px;top:-5px;visibility:hidden;background:#fff;}.photo-item .img-bg div{background:#666;height:116px;width:116px;margin:4px;}.photo-item .p-bx:hover{z-index:2;width:225px;height:225px;margin:-50px 0 0 -50px;}.photo-item .p-bx:hover .img-bg{visibility:visible;width:225px;height:225px;}.photo-item .p-bx:hover .img-bg div{width:216px;height:216px;}.photo-item .p-bx:hover .left{-moz-transform:rotate(6deg) translate(6px,-1px);-webkit-transform:rotate(6deg) translate(6px,-1px);-o-transform:rotate(6deg) translate(6px,-1px);}.photo-item .p-bx:hover .right{-moz-transform:rotate(-5deg) translate(-5px,1px);-webkit-transform:rotate(-5deg) translate(-5px,1px);-o-transform:rotate(-5deg) translate(-5px,1px);}.photo-item .p-bx:hover img{border:1px solid #aaa;padding:4px;left:-5px;top:-5px;box-shadow:1px 1px 3px #383838;width:215px;height:215px;}</style>
</head>
<body>
<ul class="photo-bx"><li class="photo-item"><div class="p-bx"><div class="img-bg left"><div></div></div><div class="img-bg right"><div></div></div><img width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"></div></li><li class="photo-item"><div class="p-bx"><div class="img-bg left"><div></div></div><div class="img-bg right"><div></div></div><img width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"></div></li><li class="photo-item"><div class="p-bx"><div class="img-bg left"><div></div></div><div class="img-bg right"><div></div></div><img width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"></div></li><li class="photo-item"><div class="p-bx"><div class="img-bg left"><div></div></div><div class="img-bg right"><div></div></div><img width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"></div></li>
</ul>
<ul class="photo-bx"><li class="photo-item"><div class="p-bx"><div class="img-bg left"><div></div></div><div class="img-bg right"><div></div></div><img data-bj="http://list.image.baidu.com/t/image/w_chuangyisheji.jpg" width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"></div></li><li class="photo-item"><div class="p-bx"><div class="img-bg left"><div></div></div><div class="img-bg right"><div></div></div><img data-bj="http://list.image.baidu.com/t/image/w_chuangyisheji.jpg" width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"></div></li><li class="photo-item"><div class="p-bx"><div class="img-bg left"><div></div></div><div class="img-bg right"><div></div></div><img data-bj="http://list.image.baidu.com/t/image/w_chuangyisheji.jpg" width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"></div></li><li class="photo-item"><div class="p-bx"><div class="img-bg left"><div></div></div><div class="img-bg right"><div></div></div><img data-bj="http://list.image.baidu.com/t/image/w_chuangyisheji.jpg" width="115" height="115" src="http://list.image.baidu.com/t/image/w_bizhi.jpg"></div></li>
</ul>
<!--[if lt IE 7]>
<script src="../marquee/animation.source.js"></script>
<script src="../marquee/imgshow.source.js"></script>
<script>var D = document,imgBx = D.getElementsByTagName("ul");Imgshow({oEvn:imgBx,styJson:{width:200,height:220}});
</script>
<!--[end if]-->
</body>
</html>

基于OO的图片墙展示插件-----【如需动画展开需依附前面的动画插件】相关推荐

【精心挑选】10款基于 jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...
基于Jquery的图片自动分组且自适应页面的缩略图展示特效
今天分享的是一款基于Jquery的图片自动分组且自适应页面的缩略图展示特效,通俗一点说就是JS相册,不过是用JQuery做的,相当不错! This experimental jQuery plugin ...
精心挑选10款基于 jQuery 的图片360度旋转插件
之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...
html 图片墙效果,基于html5实现的图片墙效果
温馨提示:本信息由[金聪采编]搜集整理发布,版权归原作者及发布者所有,您如有异议请举报或者版权申诉. 本文实例讲述了基于html5实现的图片墙效果,分享给大家供大家参考.具体实现方法如下: 这里 ...
jQuery插件实现图片墙小案例
你想写出绚丽多彩的图片墙吗?想的话就来一起看一下接下来的内容吧接下来就让我们使用两个简单的插件来实现图片墙小案例吧.编写之前需要提前下载lazyload懒加载插件和masonry瀑布流式布局插件.( ...
【React 】基于Antd Design的Upload图片墙组件封装
最近在统一UI组件库,基于项目的需求,封装了一个专门用来上传图片的控件,主要有以下一些功能: a. 可以动态配置保存的方式,可以上传到文档库.Redis缓存以及base64保存在数据库中: b. 动态 ...
WPF 实现3维图片墙相关展示效果（凹面墙，凸面墙）
因为需求,需要做3维图片墙的相关展示效果,如凹面墙,凸面墙.由于WPF也不会(会一点C#),3D编程一点也不会,一切从零开始学习,看了<精通Windows3D图形编程>一书和参考了网上相关 ...
基于Web的浮动图片墙
个人博客:http://www.chenjianqu.com/ 原文链接:http://www.chenjianqu.com/show-33.html 直接上效果图: Html设计 <!DOCT ...
基于vue的图片剪裁工具vue-croppe
基于vue的图片剪裁工具vue-croppe 安装 // npm安装 npm install --save vue-croppa // yarn 安装 yarn add vue-croppa 使用引 ...

基于OO的图片墙展示插件-----【如需动画展开需依附前面的动画插件】

基于OO的图片墙展示插件-----【如需动画展开需依附前面的动画插件】相关推荐

最新文章

热门文章