Javascript 前端特效存档 js常用插件

[参考文献]不考究有多么大的实用性，重点放在特效的实现在线地址

电商类推拉门

<div id="box">
    <ul>
        <li style="display:block"><img src="images/1.jpg" alt=""/></li>
        <li><img src="images/2.jpg" alt=""/></li>
        <li><img src="images/3.jpg" alt=""/></li>
        <li><img src="images/4.jpg" alt=""/></li>
        <li><img src="images/5.jpg" alt=""/></li>
    </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>

关键move.js

// JavaScript Document
function startMove(obj,json,endFn){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var bBtn = true;
            for(var attr in json){
                var iCur = 0;
                if(attr == 'opacity'){
                    if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
                    iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

                    }
                    else{
                        iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
                    }   
                }
                else{
                    iCur = parseInt(getStyle(obj,attr)) || 0;
                }

                var iSpeed = (json[attr] - iCur)/8;
            iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur!=json[attr]){
                    bBtn = false;
                }

                if(attr == 'opacity'){
                    obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
                    obj.style.opacity = (iCur + iSpeed)/100;

                }
                else{
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
            }

            if(bBtn){
                clearInterval(obj.timer);

                if(endFn){
                    endFn.call(obj);
                }
            }

        },30);

    }
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }
    }

css讲解：box大盒子定义宽高 设置一个关键的属性 position:relative;ul继承box的宽度追加position:absolute;left:0; top:0; z-index:1;ul li 也是继承box的宽度设置隐藏，因为高度会被图片撑开；ol设置自己的大小并且定位到position:absolute;right:10px; bottom:10px;

window.onload = function(){
    var oUl = document.getElementsByTagName('ul')[0];
    var aLiUl = oUl.getElementsByTagName('li');

    var oOl = document.getElementsByTagName('ol')[0];
    var aLiOl = oOl.getElementsByTagName('li');

    for(var i=0;i<aLiOl.length;i++){
        aLiOl[i].index = i;
        aLiOl[i].onmouseover = function(){
            for(var i=0;i<aLiOl.length;i++){
                aLiOl[i].className = '';
                aLiUl[i].style.display = 'none';
                aLiUl[i].style.filter = 'alpha(opacity=0)';
                aLiUl[i].style.opacity = 0;
            }
            this.className = 'active';
            aLiUl[this.index].style.display = 'block';
            startMove(aLiUl[this.index],{opacity:100});
        };
    }

};

淡入淡出效果js讲解：首先拿到ol的列表，因为要添加事件，先遍历拿到当前的下标，给当前的元素添加鼠标移入事件，移入的时候先重置所有状态，再为当前元素添加激活状态，并调用move里面的方法。

window.onload = function(){
    var oUl = document.getElementsByTagName('ul')[0];
    var aLiUl = oUl.getElementsByTagName('li');

    var oOl = document.getElementsByTagName('ol')[0];
    var aLiOl = oOl.getElementsByTagName('li');

    var oneHeight = aLiUl[0].offsetHeight;//当前对象的宽度/高度不论有没有设置有效的值

    for(var i=0;i<aLiOl.length;i++){
        aLiOl[i].index = i;
        aLiOl[i].onmouseover = function(){
            for(var i=0;i<aLiOl.length;i++){
                aLiOl[i].className = '';
            }
            this.className = 'active';

            startMove( oUl , { top : - this.index*oneHeight } );

        };
    }

};

从下往上显示效果js讲解：获取ul的高度是关键；下面是加了自动播放效果而且是无缝的，关键是定时器以及拿到当前的下标

window.onload = function(){
    var oUl = document.getElementsByTagName('ul')[0];
    var aLiUl = oUl.getElementsByTagName('li');
    var oOl = document.getElementsByTagName('ol')[0];
    var aLiOl = oOl.getElementsByTagName('li');
    var oneHeight = aLiUl[0].offsetHeight;
    var iNow = 0;
    var iNow2 = 0;
    var timer = null;
    var oBox = document.getElementById('box');
    for(var i=0;i<aLiOl.length;i++){
        aLiOl[i].index = i;
        aLiOl[i].onmouseover = function(){
            if(iNow == 0){
                aLiUl[0].style.position = 'static';
                oUl.style.top = 0;
                iNow2 = 0;
            }
            for(var i=0;i<aLiOl.length;i++){
                aLiOl[i].className = '';
            }
            this.className = 'active';
            iNow = this.index;
            iNow2 = this.index;
            startMove( oUl , { top : - this.index*oneHeight } );
        };
    }
    timer = setInterval(toRun,2000);
    oBox.onmouseover = function(){
        clearInterval(timer);
    };
    oBox.onmouseout = function(){
        timer = setInterval(toRun,2000);
    };
    function toRun(){
        if(iNow == 0){
            aLiUl[0].style.position = 'static';
            oUl.style.top = 0;
            iNow2 = 0;
        }
        if(iNow == aLiOl.length-1){
            iNow = 0;
            aLiUl[0].style.position = 'relative';
            aLiUl[0].style.top = aLiUl.length * oneHeight + 'px';
        }
        else{
            iNow++;
        }
        iNow2++;
        for(var i=0;i<aLiOl.length;i++){
            aLiOl[i].className = '';
        }
        aLiOl[iNow].className = 'active';
        startMove( oUl , { top : - iNow2*oneHeight } );
    }
};

自定义单选多选按钮

<input id="checkbox1" class="checkBoxClass" type="checkbox"/>
<label for="checkbox1" class="checkBoxLabel">选项1</label>
<input id="checkbox2" class="checkBoxClass" type="checkbox"/>
<label for="checkbox2" class="checkBoxLabel">选项2</label>

*{
            margin: 0;
            padding: 0;
        }
        .checkBoxClass{
            display: none;
        }
        .checkBoxLabel{
            background: url("images/UnCheck.png") no-repeat;
            padding-left: 30px;
            padding-top: 3px;
            margin: 5px;
            height: 25px;
            width: 50px;
            display: block;
            cursor: pointer;
        }
        .checkBoxLabel:hover{
            text-decoration: underline;
        }
        .checkBoxSelected{
            background: url("images/Check.png") no-repeat;
        }

$('.checkBoxClass').on('change',function(){
        if($(this).is(':checked')){
            $(this).next().addClass('checkBoxSelected');
        }else{
            $(this).next().removeClass('checkBoxSelected');
        }
    });

为元素动态绑定事件，如果选中为当前或下一个遍历到的节点添加class，否则移出class

回调函数实现百度搜索

<input id="q" type="text"/>
<ul id="ul1"></ul>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    function creScript(obj){
        var newScript=document.createElement('script');
        newScript.src=obj;
        document.body.appendChild(newScript);
    }
    function miaov(data){
        var myUl=$('#ul1');
        myUl.html('');
        if(data.s.length){
            myUl.css({display:'block'});
            for(var i=0;i<data.s.length;i++){
                myUl.append('<li><a href="http://www.baidu.com/s?wd="'+data.s[i]+'>'+data.s[i]+'</a></li>');
            }
        }else{
            myUl.css({display:'none'});
        }
    }
    $(function(){
        var myQ=$('#q');
        var myUl=$('#ul1');
        myQ.keyup(function(){
            var str=/^\S+$/;
            if(str.test(myQ.val())){
                creScript('http://suggestion.baidu.com/su?wd='+myQ.val().trim()+'&cb=miaov');
            }else{
                myUl.css({display:'none'});
            }
        });
    });
</script>

callback回调函数返回百度搜索的data数据，更新dom节点，数据拼接的标准写法+myQ.val().trim()+

cookie增删改查

function getCookie(key){
        var arr1=document.cookie.split(';');
        for(var i=0;i<arr1.length;i++){
            var arr2=arr1[i].split('=');
            if(arr2[0]==key){
                return(decodeURI(arr2[1]));
            }
        }
    }
    function setCookie(key,value,time){
        var oTime=new Date();//此时时间为object类型
        oTime.setDate(oTime.getDate()+time);//所以要转换
        document.cookie=key+'='+encodeURI(value)+';expires='+oTime.toGMTString();//时间转换为GMT字符串类型(时间必须为字符串类型)
    }
    function removeCookie(key){
        setCookie(key,'',-1);
    }
    var str=/^\S+$/;
    $(function(){
        var username=$('#username').val(getCookie('username'));
        $('#login').on('click',function(){
            var username=$('#username').val();
            if(str.test(username)){
                alert('登陆成功！');
                setCookie('username',username,10);
            }else{
                alert('请输入名字！');
            }
        });
        $('#del').on('click',function(){
            removeCookie('username');
            $('#username').val('');
        });
    });

关键点setDate()方法设置一个月的某一天，实现多长时间后过期

绝对定位弹框随窗口移动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <title>div随窗口移动</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #test{
            width:200px;
            height:200px;
            background:red;
            position:absolute;
        }
    </style>
</head>
<body style="height:2000px;">
<input type="button" value="弹窗"/>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $('input').on('click',function(){
        $('body').append('<div id="test"></div>');
        $('#test').css({left:($(window).width()-$('#test').width())/2,top:($(window).height()-$('#test').height())/2});
    });
    $(window).on('resize scroll',function(){
        $('#test').css({left:($(window).width()-$('#test').width())/2,top:($(window).height()-$('#test').height())/2+$(window).scrollTop()});
    });
</script>
</html>

这个实例让我想起了之前开发遇到的一个bug，采用fixed写弹框里面包含input，在ios移动端input获取焦点后会飞出，很无奈，那么采用这种方式就能很好的解决，没有fixed照样可以

自由落体

$(function(){
        var btn=document.getElementById('mybtn');
        var mydiv=document.getElementById('mydiv');
        var iSpeed=0;
        var timer=null;
        btn.onclick=function(){
            startMove();
        };
        function startMove(){
            clearInterval(timer);
            timer=setInterval(function(){
                iSpeed+=3;//加速运动，模拟下落过程
                var T=mydiv.offsetTop+iSpeed;
                if(T>=(document.documentElement.clientHeight-mydiv.offsetHeight)){
                    T=document.documentElement.clientHeight-mydiv.offsetHeight;
                    iSpeed=-iSpeed;
                    console.log(iSpeed,'iSpeed')
                    iSpeed*=0.75;//摩擦系数，相当于每次弹回都会损失速度
                }
                mydiv.style.top=T+'px';
            },30)
        }
    });

mydiv的top值取决于屏幕可视高度减去自身的高度以及offsettop,返回该对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量,父元素有关系offsettop详细介绍

本地图片上传预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" name="" id="">
    <button>点击我读取本地文件</button>
    <script type="text/javascript">
    var files = document.querySelector('input[type="file"]');
    var button = document.querySelector('button');
    console.log(2);
    button.onclick = function(){
        // 需求：读取用户上传到input：file里面的文件 呈递到页面上
        // (1) 获取用户上传到file控件里面的文件
        // files.value 获取的仅仅是当前图片的路径，而我们需要的是一个真正的文件
        var fileData = files.files[0];
        // (2)解析图片文件
        // 得到读取文件的实例对象
        var fr = new FileReader();
        // (3)解析图片
        // 这个方法会将图片解析成base64的字符串 
        // 参数：图片文件
        fr.readAsDataURL(fileData);
        //因为读取是一个异步操作，所以有一个事件专门监听
        fr.onload = function(){
            // 将读取结果放到了fr这个实例对象下面的result属性下面
            var data = fr.result;
            // 创建图片标签，将图片标签追加到body里面去
            var img = document.createElement('img');
            img.src = data;
            document.body.appendChild(img);
        }
    }
    </script>
</body>
</html>

H5新增的检测当前是否有网

// 这个监听的是本地连接 不是真正的网络数据流量
        alert(window.navigator.onLine);

        //online事件 是当无网到有网的时候触发

        window.addEventListener('online',function(){
            console.log('恭喜你，网络畅通');
        })

        window.addEventListener('offline',function(){
            console.log('不好意思，没有网络');
        })

更新中。。。