大致功能描述:
1、滑屏,添加自定义滚动条
2、上拉加载
3、大图预览
图片预览(左边是为加载中的相册集,中间一个是加载完成的相册,一个是当我们拉到底部的时候会有加载更多的提示,右侧是大图预览的图片,不确定能不能上传成功,之前不能,试一试喽)
实现过程,我在代码中注释了,个人认为注释还是很详细的,如果有什么疑问,欢迎留言提问哦!
嗯,然后直接上代码喽!
注意:在使用前,还是先要引入我之前封装好的函数,链接:MTween、mScroll、setGesture,引入的时候,MTeen一定要放在前面哦!
css代码没有提供,如果有需要的可以留言
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no"/> <title>图片上滑加载图片</title> <link rel="stylesheet" href="loadingPig.css"/> <script type="text/javascript"> (function(){ //移动端的适配,根据屏幕大小的变化而不断的变化 setRem(); window.addEventListener('orientation' in window?"deviceorientation":"resize",setRem); function setRem(){ var html = document.documentElement; var width = html.clientWidth; html.style.fontSize = width/16+'px'; } })() document.addEventListener('touchstart', function(e) { e.preventDefault(); }); </script> </head> <body> <header> 萌萌哒相册集 </header> <div id="box"> <div id="inner"> <header>下拉刷新</header> <ul id="list"> </ul> <footer>加载更多</footer> </div> </div> <section id="imgPage"> <header>大图预览 <a id="backBtn" href="#"> > </a> </header> <div class="imgWrap"> <img src="pics/1.jpg" id="bigImg" /> <nav id="imgNavs"> <a href="javascript:;">向左旋转90</a> <a href="javascript:;">向右旋转90</a> <a href="javascript:;">放大</a> <a href="javascript:;">缩小</a> </nav> </div> </section> <script src="js/m.Tween.js"></script> <script src="js/myScroll.js"></script> <script src="js/setGesture.js"></script> <script> (function(){ var box = document.querySelector("#box"); var inner = document.querySelector("#inner"); var footer = document.querySelector("footer"); var oList = document.querySelector("#list"); var lis = oList.children; var dataImg = []; var length = 12;//每次加载12条数据 var start = 0; var isEnd = false; for(var i=0; i<52; i++){//生成的数据,在实际工作中,应该从后端获取该部分 dataImg.push(`pics/${i%26+1}.jpg`); } setBigImg(); setScroll(); createLi(); //请求数据,加载li function createLi(){ if(start >= dataImg.length){ //alert("对不起没有更多图片了"); footer.innerHTML = "对不起没有更多图片了"; setTimeout(function(){ footer.style.opacity = 0; MTween({ el:inner, target:{ translateY:box.clientHeight -inner.offsetHeight }, time:300, type:"easeBoth" }); },1000); return; } var end = start+length; end = (end>=dataImg.length)?dataImg.length:end;//判断数据是否加载完毕 for(var i=start; i<end; i++){ var li = document.createElement('li'); li.src = dataImg[i];//为li添加自定义属性src,保存对应的图片地址 li.isLoad = true; //手指点击图片的时候可以进入大图预览 li.addEventListener("touchstart",function(e){ this.isMove = false;//为li添加自定义属性isMove,是为了判断我们是要进入大图预览还是在滑屏 // 防止我们在滑屏的时候误触图片而进入大图预览,影响用户体验 }); li.addEventListener("touchmove",function(e){ this.isMove = true;//如果手指抬起前,手指进行了move,说明我们是在滑屏,而不是想要进入大图预览 }); li.addEventListener("touchend",function(e){ if(this.isMove){ return;//如果我们是在滑屏,那么手指抬起的时候,就不进入大图预览,否则执行下面的代码(进入大图预览) } css(bigImg,"scale",100); css(bigImg,"rotate",0); bigImg.src = this.children[0].src;//让大图的图片和我们点击的li里面的图片保持一致 css(imgPage,"scale",100); }); oList.appendChild(li); } createImg(); footer.style.opacity = 0; } //判断是否该创建img function createImg(){ var boxRect = box.getBoundingClientRect(); var bottom = boxRect.top+boxRect.height; for(var i=start; i<lis.length; i++){ var top = lis[i].getBoundingClientRect().top;//li距离视窗的top值 if(top<bottom&&lis[i].isLoad){//如果li的top值小于视窗的大小的时候,说明该li进入了可视区 lis[i].isLoad = false;//让添加的自定义属性isLoad变为false,是为了防止因为li在可视区, // 而不断的为其添加图片(限制只为每个li添加一张图片) showImg(lis[i]); } } } //创建图片并显示 function showImg(li){ var img = new Image(); img.src = li.src; img.onload = function(){ li.appendChild(img); //元素没有渲染完成,transition不起作用 setTimeout(function(){//等待图片渲染完成之后,再让其透明度为1,这时候我们添加的transition才能起作用 img.style.opacity = 1; },100); } } function setScroll(){ mScroll({ el:box, start:function(){ //手指按下时要执行的函数 var innerTop = Math.round(css(inner,"translateY"))-5;//结果为负值(-5是为了扩大条件,可以是你自己认为合适的数) var minTop = box.clientHeight - inner.offsetHeight;//结果为负值 if(minTop>=innerTop){//说明用户是在底部进行拖拽的 footer.style.opacity = 1; isEnd = true; }else{ footer.style.opacity = 0; isEnd = false; } }, move:function(){ createImg();//发生滚动的时候执行的函数,判断是否创建图片 }, end:function(){ //手指抬起时执行的函数 var innerTop = Math.round(css(inner,"translateY"))-5;//结果为负值(-5是为了扩大条件,可以是你自己认为合适的数) var minTop = box.clientHeight - inner.offsetHeight;//结果为负值 if(isEnd&&minTop>=innerTop){//两个判断,第一个判断是否是在底部进行的滑屏操作,第二个判断是上拉还是下滑(上拉才执行下面的操作) clearInterval(inner.timer);//清除定时器,阻止滑屏中的回弹动画 //如果有数据的话继续创建li start += length; createLi(); document.querySelector('#scrollBar').style.opacity = 0; isEnd = false; } }, over:function(){} }); } })() //下面是为大图预览添加动画效果 function setBigImg(){ var imgPage = document.querySelector("#imgPage"); var bigImg = document.querySelector("#bigImg"); var navs = document.querySelectorAll("#imgNavs a"); var backBtn = document.querySelector("#backBtn"); backBtn.addEventListener('touchend',function(e){ css(imgPage,"scale",0);//当点击返回按钮的时候,让大图预览页缩小为0,其实就是返回啦 }); var startRotate = 0; var startScale = 0; var maxScale = 1.5;//限制最大的缩放倍数 var minScale = 0.5;//限制最小的缩放倍数 css(imgPage,"scale",0); setGesture({//添加多手指操作,实现放大缩小以及旋转操作 el:bigImg, start:function(e){ startRotate = css(this,"rotate"); startScale = css(this,"scale")/100; }, change:function(e){ var scale = startScale*e.scale; if(scale>maxScale){ scale = maxScale; }else if(scale<minScale){ scale = minScale; } css(this,"rotate",startRotate+e.rotation); css(this,"scale",scale*100); }, end:function(){ var deg = css(this,"rotate"); deg = Math.round(deg/90);//当我们旋转图片的时候,如果没有旋转到90deg的倍数时, // 我们对其进行处理让其旋转到理他最近的90deg的倍数的位置上,用户体验会更好吧(下面的同理) deg = deg*90; MTween({ el:this, target:{rotate:deg}, time:300, type:"easeBoth" }); } }); //我们点击列表时,可以实现的操作 navs[0].addEventListener("touchend",function(){ var deg = css(bigImg,"rotate"); deg = Math.round(deg/90)-1; deg = deg*90; MTween({ el:bigImg, target:{rotate:deg}, time:300, type:"easeBoth" }); }); navs[1].addEventListener("touchend",function(){ var deg = css(bigImg,"rotate"); deg = Math.round(deg/90)+1; deg = deg*90; MTween({ el:bigImg, target:{rotate:deg}, time:300, type:"easeBoth" }); }); navs[2].addEventListener("touchend",function(){ var scale = css(bigImg,"scale")/100; scale+=.1; if(scale>maxScale){ scale = maxScale; } MTween({ el:bigImg, target:{ scale:scale*100 }, time:300, type:"easeBoth" }); }); navs[3].addEventListener("touchend",function(){ var scale = css(bigImg,"scale")/100; scale-=.1; if(scale<minScale){ scale = minScale; } MTween({ el:bigImg, target:{ scale:scale*100 }, time:300, type:"easeBoth" }); }); } </script> </body> </html>
ok,完毕,还是那句话,大家有什么好的想法或者有什么问题都可以随时留言,互相学习,互相进步