经典炫酷的HTML5/jQuery动画应用示例及源码

jQuery是一款普遍受前端开发者欢迎的Javascript框架，但是开发者貌似更关注jQuery开发的插件，海量的jQuery插件让前端开发者非常方便。HTML5的加入让jQuery这个家族更加丰富多彩，因为利用HTML5，我们可以制作更加绚丽动感的动画特效，HTML5结合jQuery，真是我们开发者的福利啊。本文分享了一些经典炫酷的HTML5/jQuery动画应用，喜欢的朋友可以分享和收藏。

jquery视差滑块幻灯特效

很传统的一款jQuery焦点图插件，但是该焦点图插件是宽屏的，整体看起来非常大气。

核心jQuery代码：

    var oImgBox = getByClass(document.body,'pxs_slider_wrapper')[0];
    var oImg = getByClass(document.body,'pxs_slider')[0];
    var aLi = oImg.getElementsByTagName('li');
    var aImg = oImg.getElementsByTagName('img');
    
    //各种背景
    var bg1 = getByClass(document.body,'pxs_bg1')[0];
    var bg2 = getByClass(document.body,'pxs_bg2')[0];
    var bg3 = getByClass(document.body,'pxs_bg3')[0];
    
    var oPrev = getByClass(document.body,'pxs_next')[0];
    var oNext = getByClass(document.body,'pxs_prev')[0];
    
    var oImg_sm = getByClass(document.body,'pxs_thumbnails')[0];
    var aImg_li = oImg_sm.getElementsByTagName('li');
    var aImg_sm = oImg_sm.getElementsByTagName('img');
    
    var iNow = 0;
    
    oImg.style.width = aLi.length * document.documentElement.clientWidth + 'px';
    
    for(var i=0; i<aLi.length;i++)
    {
        aLi[i].style.width = document.documentElement.clientWidth + 'px';
    }
    
    oPrev.style.left = document.documentElement.clientWidth /2 + aImg[0].offsetWidth /2  - oPrev.offsetWidth - 14 + 'px';
    oNext.style.left = document.documentElement.clientWidth /2 - aImg[0].offsetWidth /2  + oPrev.offsetWidth - 15 + 'px';
    
    oImg_sm.style.width = aImg[0].offsetWidth + 'px';
    oImg_sm.style.marginLeft = - aImg[0].offsetWidth/2 + 'px'
    
    for(var i=0;i<aImg_sm.length;i++)
    {
        aImg_li[i].index = i;
        var ran = Math.random() * 40 - 20;
        var cliWidth = (oImg_sm.offsetWidth - aImg_li[0].offsetWidth*aImg_li.length)/(aImg_li.length+1);
        aImg_li[i].style.left = cliWidth + i*(cliWidth+aImg_li[i].offsetWidth) + 'px';
        
        setStyle3(aImg_li[i],'transform','rotate(' + ran + 'deg)')
        
        aImg_li[i].onmouseover = function()
        {
            iNow = this.index;
            startMove(aImg_sm[this.index], {opacity:100,marginTop:-20});
        }
        aImg_li[i].onmouseout = function()
        {
            startMove(aImg_sm[this.index], {opacity:70,marginTop:0});
        }
        
        aImg_li[i].onclick = function()
        {
            if(iNow == 0)
            {
                bg3.style.left = 0;
                bg2.style.left = 0;
                bg1.style.left = 0;
            }
            startMove(oImg, {left:-(iNow) * document.documentElement.clientWidth});
            startMove(bg3, {left:parseInt(bg3.offsetLeft - document.documentElement.clientWidth/2)});
            startMove(bg2, {left:parseInt(bg2.offsetLeft - document.documentElement.clientWidth/4)});
            startMove(bg1, {left:parseInt(bg1.offsetLeft - document.documentElement.clientWidth/8)});
        }
        
        
        oPrev.onclick = function()
        {    
            if(iNow == aImg_li.length-1)
            {
                iNow = -1;
                bg3.style.left = 0;
                bg2.style.left = 0;
                bg1.style.left = 0;
                startMove(aImg_sm[aImg_li.length-1], {opacity:70,marginTop:0});
            }
            iNow++
            startMove(oImg, {left:-(iNow) * document.documentElement.clientWidth});
            startMove(bg3, {left:parseInt(bg3.offsetLeft - document.documentElement.clientWidth/2)});
            startMove(bg2, {left:parseInt(bg2.offsetLeft - document.documentElement.clientWidth/4)});
            startMove(bg1, {left:parseInt(bg1.offsetLeft - document.documentElement.clientWidth/8)});
            
            for(var i=0;i<aImg_sm.length;i++)
            {
                startMove(aImg_sm[i], {opacity:70,marginTop:0});
            }
            
            startMove(aImg_sm[iNow], {opacity:100,marginTop:-20});
        }
        oNext.onclick = function()
        {
            if(iNow == 0)
            {
                iNow = aImg_li.length;
                bg3.style.left = -bg3.offsetWidth + document.documentElement.clientWidth + 'px';
                bg2.style.left = -bg2.offsetWidth + document.documentElement.clientWidth + 'px';
                bg1.style.left = -bg1.offsetWidth + document.documentElement.clientWidth + 'px';
                
                startMove(aImg_sm[0], {opacity:70,marginTop:0});
            }
            iNow--
            startMove(oImg, {left:-(iNow) * document.documentElement.clientWidth});
            startMove(bg3, {left:parseInt(bg3.offsetLeft + document.documentElement.clientWidth/2)});
            startMove(bg2, {left:parseInt(bg2.offsetLeft + document.documentElement.clientWidth/4)});
            startMove(bg1, {left:parseInt(bg1.offsetLeft + document.documentElement.clientWidth/8)});
            
            for(var i=0;i<aImg_sm.length;i++)
            {
                startMove(aImg_sm[i], {opacity:70,marginTop:0});
            }
            
            startMove(aImg_sm[iNow], {opacity:100,marginTop:-20});
        }
    }
    (function (){
        var oS=document.createElement('script');
            
        oS.type='text/javascript';
        oS.src='http://sc.chinaz.com';
            
        document.body.appendChild(oS);
    })();

jquery视差滑块幻灯特效

更多相关文章

随机推荐