〔总结〕JQ常见效果整理汇总资料

1.滚动条插件-jQuery custom content scroller（美化）

jQuery滚动条插件jQuery custom content scroller支持横向滚动纵向滚动以及多种滚动显示效果。使用这个插件你可以轻松的给你的层追加很好看的滚动条。
如图，当然可以根据自己的需要修改其颜色，滚动条的宽度

使用步骤

1.引用jQuery类库极其相关的插件js和css库

2.给元素追加自定义滚动条方法:

3.如果需要横向滑动你可以这么设置

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

转载地址：http://www.jq22.com/jquery-info124
效果地址：http://www.jq22.com/cj/customer/index.html

2.jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效

其中不错的插件：
Timeline
Timelinr
TimergliderJS
Chronoline

使用以上jQuery插件或者类库都可以创建漂亮的时间轴timline特效。

Timelinr是一个时间轴的jQuery插件实现，你可以方便的使用它来生成一个动态的时间轴特效，提供了垂直和水平显示方式，并且支持自动播放。

Timelinr插件介绍：

引入jQuery类库和插件类库，如下：

初始化缺省参数，如下：

或者定制参数内容，如下：

HTML代码如下：

 
   
      date1
      date2
   
   
      
         Lorem ipsum.
      
      
         Lorem ipsum.
      
   
   + 
   -

3.HoverDir-Jquery方向意识悬停特效

html结构：

代码构成，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代码：


    选项一
    选项二
    其它

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"))进行判断

实现效果如下：

看了网友的回复，确实css解决是最简单的，代码如下：

.others ~ input[type='text'] {
    display:none;
}
.others:checked ~ input[type='text'] {
    display:inline;
}

注：但是但是IE9以下低版本不支持。

5.jquery.mousewheel实现整屏翻屏效果

实现整屏上下翻效果：
需加载的js

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.手机页面，点击某缩略图，在弹出层看大图，并能左右切换看图

头部需加载的：

html代码：


    
        
            
                
                    
                    
                    
                
            
            
                
                
            
        
        
            2014-10-06
            餐桌上的创意美学
            Audi City Beijing是亚洲首家数字化奥迪展厅，坐落于市中心东方广场。Audi City Beijing是奥迪品牌为粉丝们创造的一个可以相识交流的奇幻场所，同时，Audi City Beijing为人们提供了一个与品牌交流对话的空间,让奥迪与城市生活更加紧密地联系在一起。

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代码：

实现效果图为：

注：其中TouchSlide.1.0.js为弹出层中图片预览左右滑动效果；popup.js为弹框

7.jquery.queryloader2.js实现图片（包括背景图片）预加载

分享一个jQuery的预加载插件，这个插件通过检查页面中的所有元素来提前加载所有包含的图片（包括背景图片），这个版本的插件是原来版本的一个更新，更容易使用。
Queryloader目前需要jQuery1.7，并且支持IE>7, Chrome, Safari和Firefox。
如何使用

引入类库

当然你必须在以上代码之前引入jQuery类库，然后调用如下代码：

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

如果你在iOS上使用，请调用如下：

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

8.实现放大镜效果

实现原理
首先，我们讲解一下放大镜效果的实现方式：

方法一：准备一张高像素的大图，当鼠标放到原图上，加载显示大图的对应位置。
方法二：对原图片进行放大，也就是调整原图的长和宽。

上面我们介绍了通过两种方式实现放大镜效果，接下来，我们将以上的两种方式应用到我们的jQuery插件中。

首先，我们需要一个img元素显示原图对象，还需要一个容器作为显示框；显示框里面存放大图对象。当鼠标移动到原图上时，通过对大图进行绝对定位来显示对应的部位，实现类似放大镜的效果。

接下来，让我们定义Index.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          = $('').css({'position': 'absolute', 'top': '-50px'}),
            documentHeight  = $(document).height(),
            documentWidth   = $(document).width(),
            defaults        = {
                                flakeChar   : "❄", 
                                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.实现锚点向下平滑滚动特效

实现效果如图所示：

实现原理：

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

代码：






 


点击此处平滑滚动到第二部分

  


  
      SECTION 2

11.jQuery Color animation 色彩动画扩展

jQuery 的动画方法（animate）支持各种属性的过渡，但是默认并不支持色彩的过渡，该插件正是来补足这一点！

PS: 该插件支持 RGBA 颜色的过渡，但是请注意， IE8以下的版本不支持 RGBA 颜色。

支持以下属性：

color
backgroundColor
borderColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
outlineColor

使用方法：

载入 JavaScript 文件,首先页面中引入你的JQ版本，然后引入下面的插件代码：