首页 > 代码库 > 前端开发学习笔记二
前端开发学习笔记二
前几天把之前做的购物网页的js效果写了出来。
如图所示,分别为以下几个效果:
- 搜索按钮的文字效果
- 轮播图
- 模拟下拉菜单
- 鼠标点击按钮,图片进行左右滚动
在学习过程中,思想很重要。写一个效果之前,现对其进行设计,然后分析,最后再实现。
比如很简单的一个轮播图,让图片淡入淡出的切换。它的原理就是,先让所有的图片淡出,然后让当前要显示的图片淡入就可以了。理解了它的工作原理,写起来就很简单了。
1 shop.app.Banner=function(){ //Banner轮播图效果 2 var ad=document.getElementById("ad"); 3 var ul=ad.getElementsByTagName("ul")[0]; 4 var li=ul.getElementsByTagName("li"); 5 6 var iNow=0; 7 var timer=setInterval(auto,3000); 8 9 function auto() //自动切换效果10 {11 if(iNow==li.length-1)12 {13 iNow=0;14 }15 else{16 iNow++;17 }18 for(var i=0;i<li.length;i++)19 {20 shop.ui.fadeOut(li[i]);21 }22 shop.ui.fadeIn(li[iNow]);23 }24 };
还有一个就是,在写整个页面的代码的时候,要对齐进行分层。比如分为作为地层的工具层,多出会用到的UI层,以及最终的应用层。这样写可以减少代码的重复,使文档看起来结构清晰,也易于别人的理解和后期的维护。在这里,我通过采用命名空间的方法来编写这个页面。整个代码如下:
window.onload=function(){ //调用函数 shop.app.Banner(); shop.app.search(); shop.app.sort(); shop.app.Run();};var shop={}; //命名空间shop.tools={};shop.tools.getByClass=function(Par,Cla) //获取对应class的对象{ var allEle=Par.getElementsByTagName("*"); var arr=[]; for(i=0;i<allEle.length;i++) { if(allEle[i].className==Cla) { arr.push(allEle[i]); } } return arr;};shop.tools.getStyle=function(obj,attr) //获取对象属性{ if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; }};shop.ui={};shop.ui.fadeIn=function(obj) //淡入效果{ var attr=shop.tools.getStyle(obj,‘opacity‘); if(attr==1) { return false; }; var value=http://www.mamicode.com/0; clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=5; if(value=http://www.mamicode.com/=100){ clearInterval(obj.timer); } else { value+=speed; obj.style.opacity=value/100; } },30);};shop.ui.fadeOut=function(obj) //淡出效果{ var attr=shop.tools.getStyle(obj,‘opacity‘); if(attr==0) { return false; }; var value=http://www.mamicode.com/100; obj.timer=setInterval(function(){ var speed=-5; if(value=http://www.mamicode.com/=0) { clearInterval(obj.timer); } else { value+=speed; obj.style.opacity=value/100; }; },30);};shop.ui.textChange=function(obj,str){ //清空默认文字 obj.onfocus=function(){ if(this.value=http://www.mamicode.com/=str){ this.value=""; } }; obj.onblur=function(){ if(this.valuehttp://www.mamicode.com/==""){ this.value=http://www.mamicode.com/str; } };};shop.ui.moveLeft=function(obj,old,now){ //对象位置左移 clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(now-old)/15; speed=Math.round(speed); if(now==old){ clearInterval(obj.timer); } else{ old+=speed; obj.style.left=old+"px"; } },30);};shop.app={};shop.app.Banner=function(){ //Banner轮播图效果 var ad=document.getElementById("ad"); var ul=ad.getElementsByTagName("ul")[0]; var li=ul.getElementsByTagName("li"); var iNow=0; var timer=setInterval(auto,3000); function auto() { if(iNow==li.length-1) { iNow=0; } else{ iNow++; } for(var i=0;i<li.length;i++) { shop.ui.fadeOut(li[i]); } shop.ui.fadeIn(li[iNow]); }};shop.app.search=function(){ var s1=document.getElementById("search1"); var s2=document.getElementById("search2"); shop.ui.textChange(s1,"Search website"); shop.ui.textChange(s2,"Search website");};shop.app.sort=function(){ //模拟下拉菜单 var sor=document.getElementById("sort"); var sordd=sor.getElementsByTagName("dd"); var sorul=sor.getElementsByTagName("ul"); var sorh4=sor.getElementsByTagName("h4"); for(var i=0;i<sordd.length;i++){ sordd[i].index=i; sordd[i].onclick=function(ev){ var ev=ev||window.event; var This=this; for(var n=0;n<sorul.length;n++){ sorul[n].style.display="none"; } sorul[this.index].style.display="block"; document.onclick=function(){ sorul[This.index].style.display=‘none‘; }; ev.cancelBubble=true; } }; for(var i=0;i<sorul.length;i++){ sorul[i].index=i; (function(ul){ var sorli=ul.getElementsByTagName("li"); for(var i=0;i<sorli.length;i++){ sorli[i].onmouseover=function(){ this.className="active"; }; sorli[i].onmouseout=function(){ this.className=""; }; sorli[i].onclick=function(ev){ var ev = ev || window.event; sorh4[this.parentNode.index].innerHTML=this.innerHTML; ev.cancelBubble = true; this.parentNode.style.display="none"; }; } })(sorul[i]); };};shop.app.Run=function(){ //点击左移效果 var slide=document.getElementById(‘slide‘); var ul=slide.getElementsByTagName(‘ul‘)[0]; var li=ul.getElementsByTagName(‘li‘); var pre=shop.tools.getByClass(slide,"pre")[0]; var next=shop.tools.getByClass(slide,"next")[0]; var iNow=0; ul.innerHTML+=ul.innerHTML; ul.style.width=li.length*li[0].offsetWidth+"px"; pre.onclick = function(){ if(iNow == 0){ iNow = li.length/2; ul.style.left = -ul.offsetWidth/2 + ‘px‘; } shop.ui.moveLeft(ul,-iNow*li[0].offsetWidth,-(iNow-1)*li[0].offsetWidth); iNow--; }; next.onclick = function(){ if(iNow == li.length/2){ iNow = 0; ul.style.left = 0; } shop.ui.moveLeft(ul,-iNow*li[0].offsetWidth,-(iNow+1)*li[0].offsetWidth); iNow++; };};
前端开发学习笔记二
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。