〔總結〕JQ常見效果整理彙總資料

時間  2019-12-07
標籤 總結 常見 效果 整理 彙總 資料 欄目 JavaScript 简体版
原文   原文鏈接

1.滾動條插件-jQuery custom content scroller（美化）

jQuery滾動條插件jQuery custom content scroller支持橫向滾動縱向滾動以及多種滾動顯示效果。使用這個插件你能夠輕鬆的給你的層追加很好看的滾動條。
如圖，固然能夠根據本身的須要修改其顏色，滾動條的寬度
imagejavascript

使用步驟css

1.引用jQuery類庫極其相關的插件js和css庫html

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

2.給元素追加自定義滾動條方法:html5

<script>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

3.若是須要橫向滑動你能夠這麼設置java

$(".content").mCustomScrollbar({
    horizontalScroll:true
});

轉載地址：http://www.jq22.com/jquery-info124
效果地址：http://www.jq22.com/cj/customer/index.htmljquery

2.jQuery timelinr和animate.css建立超酷的CSS動畫時間軸特效

其中不錯的插件：
Timeline
Timelinr
TimergliderJS
Chronolinecss3

使用以上jQuery插件或者類庫均可以建立漂亮的時間軸timline特效。web

Timelinr是一個時間軸的jQuery插件實現，你能夠方便的使用它來生成一個動態的時間軸特效，提供了垂直和水平顯示方式，而且支持自動播放。ajax

Timelinr插件介紹：segmentfault

引入jQuery類庫和插件類庫，以下：

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>

初始化缺省參數，以下：

<script type="text/javascript">
   $(function(){
      $().timelinr();
   });
</script>

或者定製參數內容，以下：

<script type="text/javascript"> 
   $(function(){
      $().timelinr({
         orientation: 'horizontal',
         // value: horizontal | vertical, default to horizontal
         containerDiv: '#timeline',
         // value: any HTML tag or #id, default to #timeline
         datesDiv: '#dates',
         // value: any HTML tag or #id, default to #dates
         datesSelectedClass: 'selected',
         // value: any class, default to selected
         datesSpeed: 500,
         // value: integer between 100 and 1000 (recommended), default to 500 (normal)
         issuesDiv : '#issues',
         // value: any HTML tag or #id, default to #issues
         issuesSelectedClass: 'selected',
         // value: any class, default to selected
         issuesSpeed: 200,
         // value: integer between 100 and 1000 (recommended), default to 200 (fast)
         issuesTransparency: 0.2,
         // value: integer between 0 and 1 (recommended), default to 0.2
         issuesTransparencySpeed: 500,
         // value: integer between 100 and 1000 (recommended), default to 500 (normal)
         prevButton: '#prev',
         // value: any HTML tag or #id, default to #prev
         nextButton: '#next',
         // value: any HTML tag or #id, default to #next
         arrowKeys: 'false',
         // value: true/false, default to false
         startAt: 1,
         // value: integer, default to 1 (first)
         autoPlay: 'false',
         // value: true | false, default to false
         autoPlayDirection: 'forward',
         // value: forward | backward, default to forward
         autoPlayPause: 2000
         // value: integer (1000 = 1 seg), default to 2000 (2segs)
      });
   });
</script>

HTML代碼以下：

<div id="timeline">
   <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
   </ul>
   <ul id="issues">
      <li id="date1">
         <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
         <p>Lorem ipsum.</p>
      </li>
   </ul>
   <a href="#" id="next">+</a> <!-- optional -->
   <a href="#" id="prev">-</a> <!-- optional -->
</div>

3.HoverDir-Jquery方向意識懸停特效

html結構：

<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="#">
            <img src="images/list.jpg" />
            <div><span>簡介</span></div>
        </a>
    </li>
    <li>
        <!-- ... -->
    </li>
    <!-- ... -->
</ul>

代碼構成，CSS部分

.da-thumbs li {
    float: left;
    margin: 5px;
    background: #fff;
    padding: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
}
.da-thumbs li a {
    overflow: hidden;
}
.da-thumbs li a div {
    position: absolute;
    background: rgba(75,75,75,0.7);
    width: 100%;
    height: 100%;
}

CSS動畫關鍵部分，採用css3的動畫效果，以及添加方向的class

.da-thumbs li a div.da-animate {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/* 動畫開始階段的class */
.da-slideFromTop {
    left: 0px;
    top: -100%;
}
.da-slideFromBottom {
    left: 0px;
    top: 100%;
}
.da-slideFromLeft {
    top: 0px; 
    left: -100%;
}
.da-slideFromRight {
    top: 0px;
    left: 100%;
}
/* 動畫結果階段的class: */
.da-slideTop {
    top: 0px;
}
.da-slideLeft {
    left: 0px;
}

動畫的js腳本部分

腳本部分，就是引入jquery文件，引入該插件。而後調用該插件便可。

$(function() {
    $('#da-thumbs > li').hoverdir();
});

該插件支持動畫效果，延遲動畫效果，和反向

$('#da-thumbs > li').hoverdir( {
    hoverDelay : 50,
    reverse : true
});
注： hoverDelay是延遲加載時間，越大時間越長。reverse是是否反向，true表示反向，默認false。插件名jquery.hoverdir.js

插件下載地址：https://pan.baidu.com/s/1pLaEo59 密碼：rore

4.點擊radio，當選中‘其它’時，顯示後面輸入框；不然隱藏

html代碼：

<div>
    <input type="radio" name="rd" class="same" value='選項二' >選項一
    <input type="radio" name="rd" class="same" value='選項二'>選項二
    <input type="radio" name="rd" class="same others" value='其它'>其它
    <input type="text" name="txt" class="txt" value=""/> 
</div>

jquery代碼：

$(function(){
    $(".same").click(function(){
       $(this).siblings().attr("checked",false);
       $(this).attr("checked",true);  
        if($(this).attr("class").indexOf('others')>=0){  
            $(this).siblings('.txt').show();
        }
        else{
            $(".others").siblings('.txt').hide();
        }
    });
})
註釋： if語句也可使用if($(this).hasClass("others"))進行判斷

實現效果以下：
image

看了網友的回覆，確實css解決是最簡單的，代碼以下：

.others ~ input[type='text'] {
    display:none;
}
.others:checked ~ input[type='text'] {
    display:inline;
}
注：可是可是IE9如下低版本不支持。

5.jquery.mousewheel實現整屏翻屏效果

實現整屏上下翻效果：
需加載的js

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

css樣式以下：

body{padding:0;margin:0; overflow:hidden }
ul{list-style:none;}
.content{width:100%;height100%;position:relative;top:0;}
.div_01,.div_02,.div_03,.div_04{width:100%;margin:0 auto; text-align: center;}
.div_01{background: #b20909;}
.div_02{background: #0941b2;}
.div_03{background: #2db209;}
.div_04{background: #b29c09;}
.left_fixed{position:fixed;width:15px; height:100px; left:100px;top:200px;z-index:999;}
.left_fixed ul li{
    background:#000;cursor:pointer;width:15px;height: 15px;
    border-radius:15px;margin-bottom: 10px;
}
.left_fixed ul li.active{background:#fff;}

jquery代碼以下：

var page=0;//翻屏變量，初始第一屏
var shakStaute = 0; //該變量做用是鼠標滑輪一直向下或者向上滑動時出現抖動現象
$(function(){
    var starttime = 0,
        endtime = 0;
    $("body").mousewheel(function(event, delta) {
        starttime = new Date().getTime(); //記錄翻屏的初始時間

        if (delta < 0&& page>=0 && page<=$(".content .divsame").length-2) { 
        
            if (shakStaute>=0 &&(starttime == 0 || (endtime - starttime) <= -500)) { //在500ms內執行一次翻屏
                shakStaute=1;
                page++;
                renderPage(page,true);  //翻屏函數
                endtime = new Date().getTime(); //記錄翻屏的結束時間
                
            }
        } else if (delta>0 && page>=1 && shakStaute==1 && (starttime == 0 || (endtime - starttime) <= -500)) {  
            page--;
            renderPage(page,true);
            endtime = new Date().getTime();                     
        }   

    });
    
    var div_height=$(window).height(); 

    $(".divsame").css({'height':div_height});

    $(window).resize(function(){
        
        div_height=$(window).height();

        $(".divsame").css({'height':div_height});
        $('.content').animate({top:-page*div_height }, 100);
    });
    
    
    $(".left_fixed ul li").on("click", function(){ //點擊小導航也執行翻屏
        var index = $(this).index();
        if(index>0){
            shakStaute==1;
        }
        page = index;
        renderPage(page, true);
        $(".left_fixed ul li").removeClass("active");
        $(this).addClass("active");
        return false;
    });
    
    function renderPage(pageNumber, isScroll){ 
        if (isScroll){
            $('.content').animate({top:-pageNumber*div_height }, 'slow');
            $(".left_fixed ul li").removeClass("active");
            $(".left_fixed ul li").eq(pageNumber).addClass("active");
        }     
        return;
    }
})

同時也是實時響應的。

插件下載地址：https://pan.baidu.com/s/1gfOZ9q7 密碼：ocq3

6.手機頁面，點擊某縮略圖，在彈出層看大圖，並能左右切換看圖

頭部需加載的：

<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/TouchSlide.1.0.js" type="text/javascript"></script>
<script src="js/popup.js" type="text/javascript"></script>

html代碼：

<div class="tip_boxs" id="tip_boxs" style="display:none;">
    <div class="align">
        <div id="slideBoxindexb">
            <div class="bd">
                <ul class="clearfix">
                    <li><img src="images/list_01.jpg" /></li>
                    <li><img src="images/list_02.jpg" /></li>
                    <li><img src="images/list_03.jpg" /></li>
                </ul>
            </div>
            <div class="hd">
                <span class="prev"></span>
                <span class="next"></span>
            </div>
        </div>
        <div class="pop_con close">
            <p class="time">2014-10-06</p>
            <h5>餐桌上的創意美學</h5>
            <p>Audi City Beijing是亞洲首家數字化奧迪展廳，坐落於市中心東方廣場。Audi City Beijing是奧迪品牌爲粉絲們創造的一個能夠相識交流的奇幻場所，同時，Audi City Beijing爲人們提供了一個與品牌交流對話的空間,讓奧迪與城市生活更加緊密地聯繫在一塊兒。</p>
        </div>
    </div>  
</div>

css 樣式：

/*彈框*/
.tip_boxs{z-index:9999; width:80%; position:relative;left:10%;display:none;height:100%;display:-webkit-box; -webkit-box-pack: center;-webkit-box-align: center; text-align:center; margin:0 auto; }
.tip_boxs .align{border-radius: 10px;overflow:hidden;width:100%;background: #fff;}
.tip_boxs_zhezhao{ background:#000; opacity:0.8; z-index:8888; display:none; position:fixed; top:0; left:0;}
#slideBoxindexb{ position:relative; width:100%; overflow:hidden; margin:0 auto;}
#slideBoxindexb .bd{ position:relative; z-index:0; width:100%;}
#slideBoxindexb .bd .tempWrap{width:100%;}
#slideBoxindexb .bd li{ position:relative;float:left;}
#slideBoxindexb .bd li{display: block;width:100%;display: -webkit-box;-webkit-box-pack: center;-webkit-box-align: center;}
#slideBoxindexb .bd li img{display: block;width:100%;border-top-left-radius: 10px;border-top-right-radius: 10px;}
#slideBoxindexb .prev,#slideBoxindexb .next{cursor:pointer; position:absolute;top:50%;margin-top:-16px;display:block; width:30px; height:32px;background: url(../images/prev_next_bg.png) no-repeat; }
#slideBoxindexb .prev{left:5px;}
#slideBoxindexb .next{right:5px;background-position: -30px 0;}
.tip_boxs .pop_con{width:100%;padding:10px;box-sizing:border-box;background: #fff;font-size: 12px;color:#060505;text-align: left;}
.tip_boxs .pop_con p{text-indent: 2em;line-height: 26px;}
.tip_boxs .pop_con p.time{color:#000;text-indent:0;}
.tip_boxs .pop_con h5{font-size: 14px;font-weight: bold;}

jquery代碼：

<script type="text/javascript">
$(function(){
    $(".content_02 .list_item li").on('click',function(){ 
        popup($(".tip_boxs"));  
         TouchSlide({
        slideCell: "#slideBoxindexb",
        autoPlay:false,
        mainCell: ".bd ul",
        effect: "leftLoop"
    });
    })
})
</script>

實現效果圖爲：
image

注：其中TouchSlide.1.0.js爲彈出層中圖片預覽左右滑動效果；popup.js爲彈框

7.jquery.queryloader2.js實現圖片（包括背景圖片）預加載

分享一個jQuery的預加載插件，這個插件經過檢查頁面中的全部元素來提早加載全部包含的圖片（包括背景圖片），這個版本的插件是原來版本的一個更新，更容易使用。
Queryloader目前須要jQuery1.7，而且支持IE>7, Chrome, Safari和Firefox。
如何使用

引入類庫

<script src="js/jquery.queryloader2.js"type="text/javascript"></script>

固然你必須在以上代碼以前引入jQuery類庫，而後調用以下代碼：

$(document).ready(function () {
     $("body").queryLoader2();
 });

若是你在iOS上使用，請調用以下：

window.addEventListener('DOMContentLoaded', function() {
    $("body").queryLoader2();
 });

相關選項：

  • backgroundColor (string) 加載的背景顏色
  • barColor (string) 加載條背景顏色
  • barHeight (int) 加載條高度，缺省爲1
  • deepSearch (boolean) 設置爲「true「來找到全部的指定元素對應圖片。若是你不但願查找子元素，能夠設置爲false。
  • percentage (boolean) 設置爲"true"來啓用百分比展現，缺省爲false
  • completeAnimation (string) 設定結束的動畫類型，」grow「或者爲"fade"，缺省爲fade
  • onLoadComplete (function) 加載完畢後調用的方法。對於修改動畫很是實用
  • onComplete (function) 這個方法在完成加載和動畫後調用

下載地址：https://pan.baidu.com/s/1bpLJVGz 密碼：rsgs

8.實現放大鏡效果

實現原理
首先，咱們講解一下放大鏡效果的實現方式：

方法一：準備一張高像素的大圖，當鼠標放到原圖上，加載顯示大圖的對應位置。
方法二：對原圖片進行放大，也就是調整原圖的長和寬。

上面咱們介紹了經過兩種方式實現放大鏡效果，接下來，咱們將以上的兩種方式應用到咱們的jQuery插件中。

首先，咱們須要一個img元素顯示原圖對象，還須要一個容器做爲顯示框；顯示框裏面存放大圖對象。當鼠標移動到原圖上時，經過對大圖進行絕對定位來顯示對應的部位，實現相似放大鏡的效果。

接下來，讓咱們定義Index.html頁面，具體實現以下：

<!DOCTYPE html>
<html>
<head>
<title>放大鏡效果</title>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link type="text/css" rel="stylesheet" href="css/reset.css"/>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.imageZoom.js"></script>  
</head>
<body>  
    <div class="magnify">
    <div class="large"></div>
    <img class="small" src="images/iphone.jpg" width="200" />
    </div>
    
    <div class="magnify_02">
    <div class="large_02"></div>
    <img class="small_02" src="images/img5.jpg" width="400"/>
    </div>
    <script type="text/javascript">
    $(function(){
    
        $(".magnify").hover(function(){
                $.fn.imageZoom({
            small :"small",
            large : "large",
            magnify: "magnify"
           });
    
        },function(){})
    
        $(".magnify_02").hover(function(){
            $.fn.imageZoom({
            small : "small_02",
            large : "large_02",
            magnify: "magnify_02"
            });
    
        },function(){})
    
    })
</script>
</body>
</html>

css樣式：

.magnify {width: 200px; margin: 50px auto; position: relative;}
.large {width: 175px; height: 175px;position: absolute;border-radius: 100%;z-index:99;box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);background: url('../images/iphone.jpg') no-repeat;display: none;}
.small { display: block; }

.magnify_02 {width: 400px; margin: 50px auto; position: relative;}
.large_02 {width: 175px; height: 175px;position: absolute;border-radius: 100%;z-index:99;box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);background: url('../images/iphone.jpg') no-repeat;display: none;}
.small_02 { display: block; }

mousemove事件
接下來，咱們經過jQuery插件形式來實現放大鏡效果，當鼠標移動到small對象上方時，就會在large對象中顯示大圖的對應位置，這就涉及到mousemove事件了，因此，咱們須要實現mousemove事件的監聽方法。

實現jquery.imagezoom.js插件：

;(function($) {
    $.fn.imageZoom = function(options) {
        var defaults = {
            scaling: 0.3,
            small :"small",
            large : "large",
            magnify:"magnify"
        };

        options = $.extend(defaults, options),
        native_width = 0,
        native_height = 0,
        current_width = 0,
        current_height = 0,

        magnify="."+options.magnify;
        small="."+options.small;
        $small=$(small);
        large="."+options.large;
        $large=$(large);

        $(magnify).mousemove(function(e) {
            var image_object = new Image();
            image_object.src = $small.attr('src');
            if(!+[1,]) {
                native_height = image_object.height;
                native_width = image_object.width;   
            } 
            else{
                image_object.onload = function() {   
                    image_object.onload = null;
                    native_height = image_object.height;
                    native_width = image_object.width;
               }
            }
            current_height = $small.height();
            current_width = $small.width();
            var magnify_offset = $(this).offset();
            var  mx = e.pageX - magnify_offset.left;
            var  my = e.pageY - magnify_offset.top;

            if (mx < $(this).width() && my <$(this).height() && mx > 0 && my > 0) {
                $large.fadeIn(100);
            }else{
                $large.fadeOut(100);
            }
            if ($large.is(":visible")) {
                var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1,
                    ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1,
                    bgp = rx + "px " + ry + "px",
                    px = mx - $large.width() / 2,
                    py = my - $large.height() / 2;
                $large.css({
                    left: px,
                    top: py,
                    backgroundPosition: bgp
                });
            }
        });
    };
})(jQuery);
註釋：當鼠標移動到magnify對象中，咱們須要獲取鼠標在magnify中的相對座標位置，這裏咱們把相對座標定義爲(mx,my)，經過上圖咱們知道相對座標等於 (pageX - offsetLeft, pageY - offsetTop)。

如今，咱們已經獲取鼠標在magnify對象中的座標值，接下來，須要獲取對應大圖的相應座標，這裏咱們把大圖的對應座標定義爲(rx,ry)，咱們能夠經過比例關係獲取(rx,ry)的值。

mx / small.width （原圖的寬）= rx / native_width（大圖的寬）
my / small.height （原圖的長）= ry / native_height（大圖的長）

經過上面的比例關係，咱們知道大圖的座標(rx,ry)等於(mx/small.width*native_width, my/small.height*native_height)。

mousewheel事件
前面，咱們經過mousemove事件來放大圖片，這裏咱們將經過鼠標的滾輪事件實現圖片放大效果。

因爲，不一樣的瀏覽器有不一樣的滾輪事件。主要是有三種：onmousewheel（IE 6/7/8）、mousewheel（IE9，Chrome，Safari和Opera）和DOMMouseScroll（只有Firefox支持），關於這三個事件這裏不作詳細的介紹了。

因爲不一樣瀏覽器之間存在着差別，爲了實現瀏覽器之間的兼容，因此，咱們須要監聽以上三種滾輪事件（onmousewheel，mousewheel和DOMMouseScroll），具體實現以下：

$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {
});

上面，咱們實現了兼容不一樣瀏覽器的滾輪事件監聽方法，接下來，判斷滾輪向上或向下也要考慮不一樣瀏覽器的兼容性，主流的覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其他四類使用wheelDelta；二者只在取值上不一致，表明含義一致，detail與wheelDelta只各取兩個值，detail只取±3，wheelDelta只取±120，其中正數表示爲向上，負數表示向下。

因爲detail和wheelDelta都有兩個值表示向上或向下滾動，因此不一樣瀏覽器間能夠經過如下方式實現兼容，具體實現以下：

$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {
    // cross-browser wheel delta
    var e = window.event || e; // old IE support.
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
});

上面，咱們已經處理了不一樣瀏覽器滾輪監聽方法，當用戶滾動滾輪時須要動態地修改原圖的尺寸，這裏咱們定義縮放比scaling爲0.3，也就是說每當用戶滾動一下滾輪原圖就按0.3的比例進行縮放，具體實現以下：

// Gets the image scaling height and width.
native_height += (native_height * scaling * delta);
native_width += (native_width * scaling * delta);

// Update backgroud image size.
$large.css('background-size', native_width + "px " + native_height + "px");

上面，咱們實現了放大鏡效果，當咱們鼠標停留在圖片上方會自動放大圖片的相應部位，固然咱們能夠經過滾輪調整放大的比例。

參考
http://tech.pro/tutorial/681/css-tutorial-the-background-position-property
http://www.sitepoint.com/html5-javascript-mouse-wheel/
http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3

9.實現雪花飄落

實現思路

  • 1.在必定的頻率下在頁面中生成必定數目的雪花從上往下飄落；
  • 2.在指定的時間內飄落後移除頁面；
  • 3.可設置雪花的大小，在必定範圍內隨機雪花大小；
  • 4.什麼時間後清除生成雪花，中止函數。

js代碼

;(function($){   
    $.fn.snow = function(options){
    
        var $flake          = $('<div class="flake" />').css({'position': 'absolute', 'top': '-50px'}),
            documentHeight  = $(document).height(),
            documentWidth   = $(document).width(),
            defaults        = {
                                flakeChar   : "&#10052;", 
                                minSize     : 10,
                                maxSize     : 20,
                                newOn       : 500,
                                flakeColor  : '#ffffff',
                                durationMillis: null
                            },
            options         = $.extend({}, defaults, options);
                        
        $flake.html(options.flakeChar);

        var interval        = setInterval( function(){
            var startPositionLeft   = Math.random() * documentWidth - 100,
                startOpacity        = 0.5 + Math.random(),
                sizeFlake           = options.minSize + Math.random() * options.maxSize,
                endPositionTop      = documentHeight - defaults.maxSize - 40,
                endPositionLeft     = startPositionLeft - 100 + Math.random() * 200,
                durationFall        = documentHeight * 10 + Math.random() * 5000;
            $flake
                .clone()
                .appendTo('body')
                .css({
                        left: startPositionLeft,
                        opacity: startOpacity,
                        'font-size': sizeFlake,
                        color: options.flakeColor
                })
                .animate({
                        top: endPositionTop,
                        left: endPositionLeft,
                        opacity: 0.2
                    },
                    durationFall,
                    'linear',
                    function() {
                        $(this).remove()
                    }
                );
        }, options.newOn);

        if (options.durationMillis) {
            setTimeout(function() {
                clearInterval(interval);
            }, options.durationMillis);
        }   
    };  
})(jQuery);

調用方式：

$(function(){
    $("body").snow({'durationMillis':2000}); //2s後中止生成雪花
})

參數解釋：

* @params flakeChar - 實現雪花圖案的html字符
 * @params minSize - 雪花的最小尺寸
 * @params maxSize - 雪花的最大尺寸
 * @params newOn - 雪花出現的頻率
 * @params flakeColors - 雪花顏色
 * @params durationMillis - 多少毫米後中止生成雪花
 * @example $.fn.snow({ maxSize: 200, newOn: 1000 });

10.實現錨點向下平滑滾動特效

實現效果如圖所示：
image

實現原理：

('html, body').animate({ scrollTop:(hash).offset().top
}, 800, function(){
    window.location.hash = hash;
});

代碼：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {
 
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();
 
      // Store hash
      var hash = this.hash;
 
      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
    
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>
 <style>
body, html, .main {
    height: 100%;
}
 
section {
    min-height: 100%;
}
</style>
</head>
<body>
<a href="#section2" style="
      font-size: 30px;
      font-weight: bold;
      text-align: center;
">點擊此處平滑滾動到第二部分</a>
<div class="main">
  <section></section>
</div>
<div class="main" id="section2">
  <section style="
      background-color: #03c03c;
      color: #fff;
      font-size: 30px;
      text-align: center">
      SECTION 2
  </section>
</div>
</body>
</html>

11.jQuery Color animation 色彩動畫擴展

jQuery 的動畫方法（animate）支持各類屬性的過渡，可是默認並不支持色彩的過渡，該插件正是來補足這一點！

PS: 該插件支持 RGBA 顏色的過渡，可是請注意， IE8如下的版本不支持 RGBA 顏色。

支持如下屬性：

  • color
  • backgroundColor
  • borderColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • outlineColor

使用方法：

載入 JavaScript 文件,首先頁面中引入你的JQ版本，而後引入下面的插件代碼：

<script src='jquery.animate-colors.js'></script>

調用方式：

$('#demodiv').animate({ color:'#E4D8B8' })
$('#demodiv').animate({ backgroundColor:'#400101' })
$('#demodiv').animate({ borderBottomColor:'#00346B' })
$('#demodiv').animate({ borderColor:'#F2E2CE' })
$('#demodiv').animate({ color:'rgba(42, 47, 76, 0.1)' })

下面貼一下不一樣的jquery版本，使用該插件的版本不同，以下：

jQuery Animate colors （適用於 jQuery 1.8 以上版本）：《下載地址》
jQuery Animate colors （適用於 jQuery 1.7.2 如下版本）：《下載地址》
這兒貼一下適用於jquery1.8以上版本的源碼：

(function($) {
    /**
     * Check whether the browser supports RGBA color mode.
     *
     * Author Mehdi Kabab <http://pioupioum.fr>
     * @return {boolean} True if the browser support RGBA. False otherwise.
     */
    function isRGBACapable() {
        var $script = $('script:first'),
                color = $script.css('color'),
                result = false;
        if (/^rgba/.test(color)) {
            result = true;
        } else {
            try {
                result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') );
                $script.css('color', color);
            } catch (e) {
            }
        }

        return result;
    }

    $.extend(true, $, {
        support: {
            'rgba': isRGBACapable()
        }
    });

    var properties = ['color', 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'outlineColor'];
    $.each(properties, function(i, property) {
        $.Tween.propHooks[ property ] = {
            get: function(tween) {
                return $(tween.elem).css(property);
            },
            set: function(tween) {
                var style = tween.elem.style;
                var p_begin = parseColor($(tween.elem).css(property));
                var p_end = parseColor(tween.end);
                tween.run = function(progress) {
                    style[property] = calculateColor(p_begin, p_end, progress);
                }
            }
        }
    });

    // borderColor doesn't fit in standard fx.step above.
    $.Tween.propHooks.borderColor = {
        set: function(tween) {
            var style = tween.elem.style;
            var p_begin = [];
            var borders = properties.slice(2, 6); // All four border properties
            $.each(borders, function(i, property) {
                p_begin[property] = parseColor($(tween.elem).css(property));
            });
            var p_end = parseColor(tween.end);
            tween.run = function(progress) {
                $.each(borders, function(i, property) {
                    style[property] = calculateColor(p_begin[property], p_end, progress);
                });
            }
        }
    }

    // Calculate an in-between color. Returns "#aabbcc"-like string.
    function calculateColor(begin, end, pos) {
        var color = 'rgb' + ($.support['rgba'] ? 'a' : '') + '('
                + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ','
                + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ','
                + parseInt((begin[2] + pos * (end[2] - begin[2])), 10);
        if ($.support['rgba']) {
            color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1);
        }
        color += ')';
        return color;
    }

    // Parse an CSS-syntax color. Outputs an array [r, g, b]
    function parseColor(color) {
        var match, triplet;

        // Match #aabbcc
        if (match = /#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(color)) {
            triplet = [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16), 1];

            // Match #abc
        } else if (match = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(color)) {
            triplet = [parseInt(match[1], 16) * 17, parseInt(match[2], 16) * 17, parseInt(match[3], 16) * 17, 1];

            // Match rgb(n, n, n)
        } else if (match = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) {
            triplet = [parseInt(match[1]), parseInt(match[2]), parseInt(match[3]), 1];

        } else if (match = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(color)) {
            triplet = [parseInt(match[1], 10), parseInt(match[2], 10), parseInt(match[3], 10),parseFloat(match[4])];

            // No browser returns rgb(n%, n%, n%), so little reason to support this format.
        }
        return triplet;
    }
})(jQuery);

官網地址：https://bitstorm.org/jquery/color-animation/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程