几个比较常用的jQuery交互效果

标签：js   jquery   解决方案   

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">最近做了不少东西，都是比较杂碎的，但是也有一些比较经典jQuery的效果，我把它提炼出来吧，就算做笔记了，以后忘了可以翻阅一下。</span>

1.有的页面很长，当我们好不容易翻到底部的时候或者累死了还没翻到底部就想回到顶部的时候，这时候急切想要一个回到顶部的按钮，这个按钮可以用js实现，代码如下：

$(".up").on("click",function(){
                $("html,body").animate({scrollTop:0},1500)
            })

2.接着上个话题，我们不希望在一开始就看到那个回到顶部的按钮，我们希望鼠标轮滚一会再让它出现，所以：

var t = $(window).height()-60;

            $(window).on('scroll',function(){
                var scroll_top = $(window).scrollTop();
                if(scroll_top>t){
                    $(".up").css({"position":"fixed","display":"block","top":t,"right":"50px"});
                }else{
                    $(".up").css({"display":"none"});
                }
            });

先用$(window).scrollTop()获取目前窗口的最顶端，当滚动条移动到你所使用设备的屏幕高度之下的时候（scroll_Top>t），就让那个回到顶部按钮出现，并且一直定位在屏幕的右下角。

3.通过复选框单个或多个删除。之前我用jsp做过这个功能，印象很深刻，那个功能是用后台实现的。现在用前端的js实现它，也是快事一件。

说一下思路，首先遍历所有项，每一项必须有一个checkbox，把其中checked属性为true的筛选出来，把他们的序号放到一个数组a中，删除的时候还要遍历所有项，把所有项的序号跟数组a中的元素对比，一样的删除就可以了。

代码如下：

$(function(){
        //确定要删除的元素下标
        var arrLiInput = [];//根据checked属性，判断元素是否被选中，选中的压入数组arrLiInput
        var arrDel = [];//待删除元素
        var arrLi = [];//

        //执行删除
        $("#delBtn").on('click',function(){

            //将所有元素下标放入数组arrLiInput
            $(".content li input").each(function(index){
                arrLiInput.push($(".content li input")[index]);
            });

            //将选中元素的下标，并放入数组arrDel
            for(var i in arrLiInput){
                if(arrLiInput[i].checked == true){
                    arrDel.push(i);//把选中的元素下标放入arrDel数组；
                }
            }

            //获取所有单元的数组
            $(".content li").each(function(i){
                arrLi.push($(".content li")[i]);
            });

            //遍历所有单元，删除选中元素
            for(var i in arrLi){
                for(var d in arrDel){
                    if(i == arrDel[d]){
                        arrLi[i].remove();
                    }
                }
            }
        });
    })

几个比较常用的jQuery交互效果

标签：js   jquery   解决方案   

原文地址：http://blog.csdn.net/westernranger/article/details/43308171