Several commonly used jQuery interaction effects and jquery Interaction Effects

Several commonly used jQuery interaction effects and jquery Interaction Effects

<Span style = "font-family: Arial, Helvetica, sans-serif; background-color: rgb (255,255,255, but there are also some more classic jQuery effects. I will extract it. Even if you take notes, you can read it later. </Span>

1. some pages are very long. If we want to go back to the top when we finally reach the bottom, or when we are exhausted, we want to go back to the top, this button can be implemented using js. The Code is as follows:

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

Very simple. I believe this short code is enough to explain everything;

2. Next to the topic, we don't want to see the button back to the top at the beginning. We want the mouse to roll around for a while and then let it appear again. So:

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"});                }            });

Use $ (window) first ). scrollTop () gets the top of the current window. When the scroll bar moves below the screen height of the device you are using (scroll_Top> t), let the button back to the top appear, and always positioned in the lower right corner of the screen.

3. Use the check box to delete one or more items. Previously, I used jsp to provide this function. I was very impressed that it was implemented in the background. Now it is a fast task to implement it with front-end js.

Let's talk about the idea. First, traverse all items. Each item must have a checkbox, filter the checked attribute to true, and put their serial numbers in an array, when deleting an object, you need to traverse all items and compare the sequence numbers of all items with the elements in array a. You can just delete the items in the same way.

The Code is as follows:

$ (Function () {// determine the element subscript var arrLiInput = []; // determine whether the element is selected based on the checked attribute, the selected input array arrLiInput var arrDel = []; // var arrLi = []; // you can delete the element $ ("# delBtn "). on ('click', function () {// put all element subscript into array arrLiInput $ (". content li input "). each (function (index) {arrLiInput. push ($ (". content li input ") [index]) ;}); // place the subscript of the selected element into the array arrDel for (var I in arrLiInput) {if (arrLiInput [I]. checked = true) {arrDel. push (I); // Add the selected element subscript TO THE arrDel array;} // obtain the array of all units $ (". content li "). each (function (I) {arrLi. push ($ (". content li ") [I]) ;}); // traverses all units and deletes the selected element for (var I in arrLi) {for (var d in arrDel) {if (I = arrDel [d]) {arrLi [I]. remove ();}}}});})