1.实用CSS属性
1 background-color: rgba(34,38,44,0.3) 背景半透明化
1 background-image: url(../img/W7DDWUACKJ1A1517317609671.jpg); 2 background-position: -260px -0px;//图片位置 3 background-size: 119.5% 400px ;//图片大小 4 background-repeat: no-repeat;//图片重复
1 transition: all 1.2s; //高宽同时放大,1.2秒内执行完毕 2 transform:scale(1.1);图片放大 数字为放大倍数 3 上面两条属性需要结合使用
1 overflow:hidden;//隐藏超出元素范围的内容 2 display: none;//隐藏元素 3 display: block;//转为块级元素 4 这三条属性结合使用可以实现元素的隐藏与再现,非常适合用来做交互式导航等内容
2.JS效果思路
利用数字来判断点击次数:
1 var i = 1; 2 var j = 2; 3 var a = document.getElementById("game"); 4 var b = document.getElementById("gamei"); 5 var c = document.getElementById("story"); 6 var d = document.getElementById("storyi"); 7 var hg = document.getElementById("hg"); 8 var hs = document.getElementById("hs"); 9 function sel1(){ 10 if(i%2==1){ 11 a.style.color="white"; 12 b.style.right="48px"; 13 hg.style.display="block"; 14 } 15 if(i%2==0){ 16 hg.style.display="none"; 17 a.style.color="#f4d04d"; 18 b.style.right="0px"; 19 } 20 if(hs.style.display=="block"){ //检测另一个隐藏元素是否显示,如果显示则令其隐藏,使得两个元素不会同时显示 21 hs.style.display="none"; 22 c.style.color="#f4d04d"; 23 d.style.right="0px"; 24 } 25 j=2; //可使另外一个元素处于第一次点击的状态 26 i++; 27 } 28 function sel2(){ 29 30 if(j%2==0){ 31 c.style.color="white"; 32 d.style.right="48px"; 33 hs.style.display="block"; 34 } 35 if(j%2==1){ 36 hs.style.display="none"; 37 c.style.color="#f4d04d"; 38 d.style.right="0px"; 39 } 40 if(hg.style.display=="block"){ 41 hg.style.display="none"; 42 a.style.color="#f4d04d"; 43 b.style.right="0px"; 44 } 45 i=1; 46 j++; 47 }
判断侧面滑动栏滑动距离来改变导航位置:
1 var na = document.getElementById("mnav"); 2 function mnav(){ 3 var tp = document.documentElement.scrollTop; 4 if(tp>0){ 5 na.style.top="0px"; 6 } 7 if(tp==0){ 8 na.style.top="41px"; 9 } 10 11 } 12 var timer = setInterval( 13 function(){ 14 mnav(); 15 },300); //实时监测滑动栏滑动距离
PS:上面方法的改进版
1 window.οnscrοll=function(){ 2 function mnav(){ 3 var h = window.scrollY; //获取滚动条Y轴即垂直滚动条滚动距离 4 if(tp>0){ 5 na.style.top="0px"; 6 } 7 if(tp==0){ 8 na.style.top="41px"; 9 } 10 11 } 12 } 13 window.scrollY 优势在于可做到实时检测,满足条件只执行一次函数,避免了使用定时器占用资源,以及函数被错误的重复调用的问题。
缺点在于,只有页面滚动时才会调用函数,如果页面一直不滚动,则函数一直不调用,而document.documentElement.scrollTop
配合定时器,可实现实时监测滚动条的距离。
均分图片移动距离实现图片滚动动画:
1 var nico1 = document.getElementById("nico1"); 2 var nico2 = document.getElementById("nico2"); 3 var nico3 = document.getElementById("nico3"); 4 5 var m = 0; 6 var n = -25; 7 var timer1; 8 var timer2; 9 function mover1(){ 10 function mv1(){ 11 m=m-2.5;//距离均分,多次移动 12 nico1.style.top = m+"px"; 13 if(m==-25){ 14 clearInterval(timer1); 15 return m = 0; //数值还原,否则下一次移动会按照m=-25来进行计算 16 } 17 } 18 timer1 = setInterval(function(){mv1();},20);//连续调用函数 19 } 20 function mout1(){ 21 function mo1(){ 22 n=n+2.5; 23 nico1.style.top = n+"px"; 24 if(n==0){ 25 clearInterval(timer2); 26 return n = -25; 27 } 28 } 29 timer2 = setInterval(function(){mo1();},20); 30 }
PS:<a href="javascript:void(0)"></a> 避免点击链接后,自动跳到页面顶部。
3.总结
position:relative 元素原来占用位置依旧存在,慎用。
注意细节设计,一些小小的效果实现能显著提高网页的实用性。
多做注释,提高代码可读性,也方便其他人接手自己当前的项目。
JS变量、CSS选择器命名要规范,提高可读性,也能防止代码量提高后造成的命名混乱问题。
CSS选择器可多采用分组设计,具有同样属性的选择器分为一组,不同的属性再单独定义,可以减少代码量。
如果一个网页的顶部导航和底部信息等样式相同,则可以先设计好模板,再填写内容,可大大提高网页制作效率。