首次接触面向对象编程,写了一个类似qq空间预览相册的图片小东西,没什么难点,代码有点low,见笑了,代码如下
只是用于记录学习,实用性可能不是太强
//实例化相册 的对象 |
new show(yArr,nArr) // 原图和缩略图的集合 |
// m-list-content-item 需要触发的含有图片的盒子类名,只是用作触发,图片显示依然根绝实例化时传的数组为准
function show(items,navItems) {
|
this.imgs = items;// 所有图片集合
|
this.navImgs = navItems;// 所有缩略图集合 , imgs 和 navImgs 应该一一对应,区别只是navImgs 是缩略图
|
this.a = false;
|
/*当前已经滚动的长度*/
|
this.roundLong = 0;
|
/*当前图片所在下标*/
|
this.imgIndex = 0;
|
this.initElem();
|
this.initEvent(); // 事件需要调用 elem
|
/*
|
* 获取图片列表*/
|
};
|
show.prototype = {
|
constructor:show,
|
/*
|
* 初始化所有元素*/
|
initElem:function () {
|
/*网页宽高*/
|
this.widWidth = document.documentElement.clientWidth < 960 ? 960 : document.documentElement.clientWidth;
|
this.winHeight = document.documentElement.clientHeight;
|
|
/*获取所有的图片*/
|
this.items = document.getElementsByClassName('m-list-content-item');
|
|
/*
|
*
|
* 结构
|
* div.fixedDiv
|
* div.twoDiv
|
* div.imgDiv
|
* img
|
* rightDiv
|
* leftDiv
|
* div.navDiv
|
* span.RDiv
|
* span.LDiv
|
* div.ulDiv
|
* ul.ul
|
* div.closeDiv
|
*
|
* */
|
this.fixedDiv = document.createElement('div');
|
this.twoDiv = document.createElement('div');
|
this.imgDiv = document.createElement('div');
|
this.img = document.createElement('img');
|
this.closeDiv = document.createElement('span');
|
this.navDiv = document.createElement('div');
|
this.RDiv = document.createElement('span');
|
this.LDiv = document.createElement('span');
|
this.ulDiv = document.createElement('div');
|
this.ul = document.createElement('ul');
|
this.ul.id = 'ptId';
|
this.rightDiv = document.createElement('div');
|
this.leftDiv = document.createElement('div');
|
/* fixedDiv*/
|
|
this.fixedDiv.style.position='fixed';
|
this.fixedDiv.style.padding='20px 0';
|
this.fixedDiv.style.width = '100%';
|
this.fixedDiv.style.height = '100%';
|
this.fixedDiv.style.background = 'rgba(0,0,0,.5)';
|
this.fixedDiv.style.zIndex='2';
|
this.fixedDiv.style.top='0';
|
this.fixedDiv.style.display= 'none';
|
document.body.appendChild(this.fixedDiv);
|
/*
|
* 第二层容器*/
|
|
this.twoDiv.style.width = (this.widWidth * 0.6)+'px';
|
this.twoDiv.style.minWidth = this.widWidth*0.6+'px';
|
this.twoDiv.style.height = (this.winHeight - 40)+'px';
|
this.twoDiv.style.margin = '0 20%';
|
this.twoDiv.style.position=this.imgDiv.style.position='relative';
|
this.twoDiv.style.background = 'rgba(0,0,0,.8)';
|
this.fixedDiv.appendChild(this.twoDiv);
|
/*
|
*t图片容器
|
* */
|
|
this.imgDiv.style.width='100%';
|
this.imgDiv.style.height=(this.winHeight - 40)*0.8 +'px';
|
this.imgDiv.style.lineHeight=(this.winHeight - 40)*0.8 +'px';
|
this.imgDiv.style.padding='20px 0';
|
this.imgDiv.style.textAlign='center';
|
/*
|
* rightDiv leftDiv*/
|
|
this.rightDiv.style.width = this.leftDiv.style.width = '30%';
|
this.rightDiv.style.height = this.leftDiv.style.height = '100%';
|
this.rightDiv.style.top = this.leftDiv.style.top = '0';
|
this.rightDiv.style.right=this.leftDiv.style.left='0';
|
this.rightDiv.style.textAlign='right';
|
this.leftDiv.style.textAlign='left';
|
this.rightDiv.style.fontSize=this.leftDiv.style.fontSize='58px';
|
this.rightDiv.style.paddingRight=this.leftDiv.style.paddingLeft='20px';
|
this.rightDiv.innerText='>';
|
this.leftDiv.innerText='<';
|
|
|
/*图片标签*/
|
|
this.img.style.maxWidth='100%';
|
this.img.style.verticalAlign='middle';
|
this.img.style.maxHeight='100%';
|
this.img.src = '';
|
|
/*关闭整个div按钮*/
|
this.closeDiv.style.display='inline-block';
|
this.closeDiv.style.width='80px';
|
this.closeDiv.style.height='80px';
|
this.closeDiv.innerText='X';
|
this.closeDiv.style.background='#000';
|
this.closeDiv.style.position=this.navDiv.style.position=this.rightDiv.style.position = this.leftDiv.style.position='absolute';
|
this.closeDiv.style.top='-30px';
|
this.closeDiv.style.right='-30px';
|
this.closeDiv.style.borderRadius='50%';
|
this.closeDiv.style.cursor=this.RDiv.style.cursor=this.LDiv.style.cursor=this.rightDiv.style.cursor=this.leftDiv.style.cursor='pointer';
|
this.closeDiv.style.color='#fff';
|
|
/*
|
* 底部滚动*/
|
this.navDiv.style.background='#fff';
|
this.navDiv.style.bottom='0';
|
this.navDiv.style.width='100%';
|
this.navDiv.style.height='100px';
|
|
/*
|
* 底部滚动条内部*/
|
this.RDiv.style.cssFloat='right';
|
this.LDiv.style.cssFloat='left';
|
this.RDiv.style.background=this.LDiv.style.background='#000';
|
this.RDiv.style.display=this.LDiv.style.display='block';
|
this.RDiv.style.width=this.LDiv.style.width='60px';
|
this.RDiv.style.height=this.LDiv.style.height='100%';
|
this.RDiv.style.color=this.LDiv.style.color=this.rightDiv.style.fontSize=this.leftDiv.style.fontSize='#d7d7d7';
|
this.RDiv.style.fontSize=this.LDiv.style.fontSize='38px';
|
this.RDiv.style.textAlign=this.LDiv.style.textAlign='center';
|
this.RDiv.style.lineHeight=this.LDiv.style.lineHeight='100px';
|
this.RDiv.innerText='>';
|
this.LDiv.innerText='<';
|
this.ulDiv.style.background='#000';
|
this.ulDiv.style.cssFloat='left';
|
this.ulDiv.style.width=(this.widWidth * 0.6)-120 +'px';
|
this.ulDiv.style.height= '100%';
|
this.ulDiv.style.overflow= 'hidden';
|
/*ul*/
|
console.log(this.imgs.length);
|
this.ul.style.width = (this.imgs.length * 80)+'px';
|
this.clerDiv = document.createElement('div');
|
this.clerDiv.style.clear='both';
|
this.twoDiv.appendChild(this.navDiv);
|
this.imgDiv.appendChild(this.img);
|
this.imgDiv.appendChild(this.rightDiv);
|
this.imgDiv.appendChild(this.leftDiv);
|
this.twoDiv.appendChild(this.imgDiv);
|
this.fixedDiv.appendChild(this.closeDiv);
|
this.ul.appendChild(this.clerDiv);
|
this.ulDiv.appendChild(this.ul);
|
this.navDiv.appendChild(this.LDiv);
|
this.navDiv.appendChild(this.ulDiv);
|
this.navDiv.appendChild(this.RDiv);
|
|
|
/*图片列*/
|
|
/*
|
/*
|
* 评论容器 /./. 保留 */
|
// this.commentsDiv =document.createElement('div')
|
},
|
/*
|
* 初始化所有事件*/
|
initEvent:function () {
|
let arr = [...this.items];
|
arr.forEach((v,i)=>{
|
v.addEventListener('click',(e)=>{
|
e.stopPropagation();
|
/*记录当前位置 position*/
|
this.position = i;
|
console.log(this.position);
|
this.urlClickEvent(i);
|
this.inThe(this.navImgs,i);
|
})
|
});
|
/*点击右边,展示下一张图片*/
|
this.rightDiv.addEventListener('click',()=>{
|
if(this.position < this.imgs.length-1){
|
this.img.src = this.imgs[this.position + 1];
|
// this.ulLiArr
|
this.ulLi[this.position].style.border = 'none';
|
this.ulLi[this.position+1].style.border = '3px solid #d7d7d7';
|
this.roundLong = this.roundLong+70;
|
this.RLDivEvent()
|
this.position++;
|
}
|
});
|
/*点击左边,展示上一张图片*/
|
this.leftDiv.addEventListener('click',()=>{
|
if(this.position > 0){
|
this.img.src = this.imgs[this.position - 1];
|
this.ulLi[this.position].style.border = 'none';
|
this.ulLi[this.position-1].style.border = '3px solid #d7d7d7';
|
this.roundLong = this.roundLong-70;
|
this.RLDivEvent();
|
this.position--;
|
}
|
});
|
/*关闭显示层*/
|
this.closeDiv.addEventListener('click',()=>{
|
this.closeEvent()
|
});
|
/*底部左右滚动*/
|
this.RDiv.addEventListener('click',()=>{
|
// console.log((this.imgs.length * 80)-this.roundLong-((this.widWidth * 0.6)-120)); ul长度-已经位移长度-下面显示长度
|
if(((this.imgs.length * 80)-this.roundLong-((this.widWidth * 0.6)-120))>0){
|
this.roundLong = this.roundLong+((this.widWidth * 0.6)-120);
|
this.RLDivEvent()
|
}
|
});
|
/*点击底部 左边按钮向左滚动*/
|
this.LDiv.addEventListener('click',()=>{
|
if(this.roundLong>0){
|
this.roundLong = this.roundLong-((this.widWidth * 0.6)-120);
|
this.RLDivEvent()
|
}
|
});
|
/*LDiv RDiv 鼠标悬浮改变颜色*/
|
let that = this;
|
this.RDiv.addEventListener('mouseover',function (e) {
|
that.RLDivMouseEvent(this,e)
|
});
|
this.RDiv.addEventListener('mouseout',function (e) {
|
that.RLDivMouseEvent(this,e)
|
});
|
this.LDiv.addEventListener('mouseover',function (e) {
|
that.RLDivMouseEvent(this,e)
|
});
|
this.LDiv.addEventListener('mouseout',function (e) {
|
that.RLDivMouseEvent(this,e)
|
});
|
this.leftDiv.addEventListener('mouseover',function (e) {
|
that.RLDivMouseEvent(this,e)
|
});
|
this.leftDiv.addEventListener('mouseout',function (e) {
|
that.RLDivMouseEvent(this,e)
|
});
|
this.rightDiv.addEventListener('mouseover',function (e) {
|
that.RLDivMouseEvent(this,e)
|
});
|
this.rightDiv.addEventListener('mouseout',function (e) {
|
that.RLDivMouseEvent(this,e)
|
})
|
},
|
/*
|
*相册图片 点击事件,展示相册*/
|
urlClickEvent:function (i) {
|
this.fixedDiv.style.display= 'block';
|
this.img.src = this.imgs[i]
|
|
},
|
/*关闭相册*/
|
closeEvent:function () {
|
this.fixedDiv.style.display= 'none';
|
/*将ul里面的所有li清除掉*/
|
let liArr = document.getElementsByClassName('ulLi');
|
console.log(liArr.length)
|
for (let i=liArr.length;i>0;i--){
|
this.ul.removeChild(liArr[i-1])
|
}
|
|
},
|
/*将图片放到下面滚动条去*/
|
inThe:function (v,i) {
|
v.forEach((item,index)=>{
|
this.li = document.createElement('li');
|
this.image=document.createElement('img');
|
this.image.src=item;
|
this.image.style.width='100%';
|
this.image.style.height='100%';
|
this.li.appendChild(this.image);
|
this.li.style.height = '50px';
|
this.li.className = 'ulLi';
|
this.li.style.textAlign = 'center';
|
this.li.style.lineHeight = '50px';
|
this.li.style.cssFloat = 'left';
|
this.li.style.margin = '25px 10px';
|
this.li.style.listStyleType = 'none';
|
this.li.style.width = '50px';
|
this.li.style.cursor='pointer';
|
this.ul.appendChild(this.li);
|
/*i === index 进行匹配*/
|
if(i===index){
|
this.li.style.border='3px solid #d7d7d7';
|
}
|
})
|
/*li 鼠标悬浮,点击*/
|
let ulLi = document.getElementsByClassName('ulLi');
|
let ulLiArr = [...ulLi];
|
this.ulLiArr = ulLiArr;
|
this.ulLi = ulLi;
|
ulLiArr.forEach((v,i)=>{
|
v.addEventListener('mouseover',()=>{
|
ulLi[i].classList.add('li-active')
|
});
|
v.addEventListener('mouseout',()=>{
|
ulLi[i].classList.remove('li-active')
|
});
|
v.addEventListener('click',()=>{
|
ulLi[this.position].style.border = 'none';
|
ulLi[i].style.border = '3px solid #d7d7d7';
|
this.position = i;
|
this.img.src = this.imgs[i]
|
});
|
})
|
},
|
/*左右滚动*/
|
RLDivEvent:function () {
|
this.ul.style.transform='translateX(-'+this.roundLong+'px)';
|
this.ul.style.transition='.5s';
|
},
|
/*lDiv Rdiv 悬浮改变颜色*/
|
RLDivMouseEvent:function (t,e) {
|
console.log()
|
e.type==='mouseout' ? t.style.color='#d7d7d7' : t.style.color='#fff';
|
|
}
|
}
|