Tasays

js原生常见特效

发表于 |

今天练习了几个常见js特效，基本掌握了原理.

  • js轮播图(滑动效果切换)
  • 换肤功能
  • 图片延迟加载
  • 渐隐


图片轮播

当然还有不少问题，如切换时太快容易失帧，暂时没解决,主要就是通过定时器实现更改已经绝对定位的canvas的left属性实现轮播,这个例子实用价值不高。

 var t;
 var init = 0;
 var imgs = document.getElementsByTagName('img');
 var lis = document.getElementsByTagName('li');
 var canvas = document.getElementById('canvas');
 start();
 //定义当前图片索引位置
 function start(){
 t = setInterval(function(){
     init++;
     //到第6时返回第一张
     if(init % 6 == 0){
         init=0;
         }
     change(init);
     },5000);
 }

//切换图片位置
function change(init){
     //切换第二张图片
     //canvas.style.left = init * -730+'px';
     //计算终点位置
     var x2 = ((init%6) * -730);
     //计算开始位置
     var x1 = (init-1)* -730;
     //清除其他li图标样式
     for (var i = 0 ; i < 6; i++) {
            lis[i].className = "";
        }
     lis[init].className = "on";
      slide(canvas,x1,x2,1,2);
    }

//鼠标事件
for(var k = 0 ; k < 6; k++){
    imgs[k].onmouseover = function(){
        clearInterval(t);
        }
    imgs[k].onmouseout = function(){
        start();
        }
    }

//鼠标移动小图标切换
for(var j = 0 ; j < 6; j++){
    lis[j].index = j;
    lis[j].onmouseover = function(){
        clearInterval(t);    
        this.style.cursor="pointer";
        init = this.index;
        change(this.index);
        }
    }

//封装一个方法 实现滑动效果
//obj，要移动的对象
//x1,对象的起始位置
//x2,对象的终点位置
//s,移动的时间间隔
//step,每次移动的步长
function slide(obj,x1,x2,s,step){
    var t1;
    if(x1>x2){
    t1 = setInterval(function(){
        x1 = x1-step;
        obj.style.left = x1+'px';
        //滑动矫正
        if(x1<=x2){
            clearInterval(t1);
            obj.style.left = x2+'px';
            }
        },s);
    }
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0;}
        #box {width: 730px; height: 454px; margin: 50px auto 0; position: relative;
        overflow: hidden;}

        #canvas {cursor:pointer;width: 4380px; height: 454px; position: absolute; left: 0; top: 0;}
        #canvas a {float: left; width: 730px; height: 454px;}
        ul {position: absolute; bottom: 10px; width: 100%; text-align: center;}
        ul li {display: inline-block; list-style: none; width:20px; height: 20px; margin:0 10px 0 10px border-radius: 10px; background: #999; color: #fff; font-weight: bold;font-size: 14px; text-align: center;line-height: 20px;}
        li.on {background: #c30;}
    </style>
</head>
<body>
    <div id="box">
        <div id="canvas">
            <a href=""><img src="images/jd1.jpg" alt=""></a>
            <a href=""><img src="images/jd2.jpg" alt=""></a>
            <a href=""><img src="images/jd3.jpg" alt=""></a>
            <a href=""><img src="images/jd4.jpg" alt=""></a>
            <a href=""><img src="images/jd5.jpg" alt=""></a>
            <a href=""><img src="images/jd6.jpg" alt=""></a>
        </div>
        <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>            
</body>

图片换肤

换肤功能核心即js中对cookie的使用，可喜的是w3c中给我们封装好了保存和获取cookie函数。

//官方封装好的保存cookie
function setCookie(c_name,value,expiredays)
   {
   var exdate=new Date()
   exdate.setDate(exdate.getDate()+expiredays)
   document.cookie=c_name+ "=" +escape(value)+
   ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
   }

//官方封装好的读取cookie
function getCookie(c_name)
   {
   if (document.cookie.length>0)
     {
     c_start=document.cookie.indexOf(c_name + "=")
     if (c_start!=-1)
       { 
       c_start=c_start + c_name.length+1 
       c_end=document.cookie.indexOf(";",c_start)
       if (c_end==-1) c_end=document.cookie.length
       return unescape(document.cookie.substring(c_start,c_end))
       } 
     }
   return ""
   }

完整代码

 //再次登录时获取保存的皮肤
 window.onload = function(){
     skin = getCookie('skin');
     document.body.style.background = skin;
     }

//更新皮肤
 var imgs = document.getElementsByTagName('img');
 for(var i=0;i<imgs.length;i++){
     imgs[i].index = i;
     imgs[i].onclick = function(){
         var bg = this.getAttribute('xsrc');
         document.body.style.background = bg;
         setCookie('skin',bg,2);
         }
     }

 //官方封装好的保存cookie
 function setCookie(c_name,value,expiredays)
    {
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    }

 //官方封装好的读取cookie
 function getCookie(c_name)
    {
    if (document.cookie.length>0)
      {
      c_start=document.cookie.indexOf(c_name + "=")
      if (c_start!=-1)
        { 
        c_start=c_start + c_name.length+1 
        c_end=document.cookie.indexOf(";",c_start)
        if (c_end==-1) c_end=document.cookie.length
        return unescape(document.cookie.substring(c_start,c_end))
        } 
      }
    return ""
    }

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <p>请选择你喜欢的皮肤</p>
    <ul>
        <li>
            <a href="javascript:void()"><img src="images/bg1_lit.jpg" xsrc='url(images/bg1.jpg)' alt=""></a>
        </li>
        <li>
            <a href=""><img src="images/bg2_lit.jpg" xsrc='url(images/bg2.jpg)' alt=""></a>
        </li>
        <li>
            <a href=""><img src="images/bg3_lit.jpg" xsrc='url(images/bg3.jpg)' alt=""></a>
        </li>
        <li>
            <a href=""><img src="images/bg4_lit.jpg" xsrc='url(images/bg4.jpg)' alt=""></a>
        </li>
    </ul>
</body>

</html>

图片延迟加载

图片延迟加载是在电影网站中常见功能，主要目的是为了节省带宽，原理是用户可视窗口距离（ClientHeight）+滚动条距离（scrollTop）如果>=图片位置距离顶部距离(obj.offsetTop) 才加载图片，原图片路径存在非标准属性中.

var imgs = document.getElementsByTagName('img');
    document.onscroll = function(){
    //可视部分高度
    var windo = document.documentElement.clientHeight;
    //console.log(windo);
    //滚动条距离
    var ch = document.body.scrollTop;
    for(var i=0;i<imgs.length;i++){
        if(windo+ch>=imgs[i].offsetTop+110){
            //获取非标准属性更改src
            imgs[i].src = imgs[i].getAttribute('xsrc');
            }    
        }
    }

渐隐

js实现更改opacity值即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         #box {
            width: 100px;
            height: 100px;
            position: absolute;
            top : 100px;
            left: 600px;
            background: red;
        }
    </style>

</head>
<body>
    <div id="box">

    </div>

<input type="button" value="显示">
<input type="button" value="隐藏">



<script>
   var inputs = document.getElementsByTagName('input');
   var divs = document.getElementById('box');
   inputs[0].onclick = function(){
       io = 1;
       opacity(divs,100,5,io);
       }
   inputs[1].onclick = function(){
       io = 0;
       opacity(divs,100,5,io);
       }
   //io表示显示和隐藏 in out 为true是显示， false是隐藏
   //step的值是0~100之间
   function opacity(obj,s,step,io){
       //显示
       var top;
       if(io==1){
           top=0;
           t = setInterval(function(){
                top+=step;
                obj.style.opacity = parseFloat(top/100);
               },s);
           if(top>=100){
               clearInterval(t);
               obj.style.opacity = 1;
               }
           }
       //隐藏
       if(io==0){
            top = 100;
           t1 = setInterval(function(){
               top-=step;
                 obj.style.opacity = parseFloat(top/100);
               },s);
           if(top<=0){
               clearInterval(t1);
               obj.style.opacity = 0;
               }
           }
       }
</script>