<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://www.jb51.net/css/reset.css" > <style> .con{ width:360px; margin:30px auto; } .con > h3{ margin-bottom:15px; } .con input{ width:290px; height:30px; } .con button{ width:60px; height:34px; border:0; } .con ul li{ display: flex; margin-top:15px; border-bottom:1px solid #ccc; justify-content: space-between; } .con li p{ /*清除a元素之间的间隙*/ font-size:0; } .con li p a{ color:#1b5fdd; font-size:16px; margin-left:10px; } /*弹框样式*/ .pop_con{ position:fixed; top:0; right:0; bottom:0; left:0; background:#000; display: none; } .pop{ width:400px; height:220px; position:absolute; left:50%; margin-left:-200px; top:50%; margin-top:-150px; background:#fff; } .pop .pop_title{ padding:15px; display: flex; justify-content: space-between; } .pop .pop_title a{ width:36px; height:36px; line-height:36px; border-radius:50%; background:#c7254e; color:#fff; text-align: center; position:absolute; top:-18px; right:-18px; transition: all 1s ease; } .pop_title h3{ letter-spacing: 2px; font-weight: normal; } .pop_title a:hover{ transform: rotate(360deg); } .pop_message{ height:110px; line-height:110px; text-align: center; } .pop_confirm{ height:36px; text-align: center; } .pop_confirm button{ height:36px; line-height: 36px; padding:0 15px; background: #c7254e; border:none; color:#fff; outline: none; } </style> <script src="https://www.jb51.net/js/jquery-1.12.4.min.js"></script> <script> $(function(){ //声明变量 var $input = $("#input"); $(".pop").click(function(){ return false; }); $(".pop_confirm").click(function(){ $(".pop_con").fadeOut(); }); $(".close").click(function(){ $(".pop_con").fadeOut(); }); $(".pop_con").click(function(){ $(this).fadeOut(); }); //点击增加按钮，新增元素 $("#add").click(function(){ var $inputVal = $input.val(); //如果输入值为空，出现弹框提示 if($inputVal == ""){ $(".pop_con").fadeIn(); return false } $input.val(""); var $li = $("<li><h3>"+$inputVal+"</h3><p><a href='javascript:void(0);'>删除</a><a href='javascript:void(0);'>上移</a><a href='javascript:void(0);'>下移</a></p></li>"); $("ul").append($li); }); //使用事件委托写在一起，提高性能 $("ul").delegate("li a","click",function(){ //首先判断点击的是哪个a if($(this).attr("class") == "prev"){ //判断是否存在该元素 if($(this).closest("li").prev().length ==0){ $(".pop_message").html("已到顶部!"); $(".pop_con").fadeIn(); return false } $(this).closest("li").prev().before($(this).closest("li")); }else if($(this).attr("class") == "next"){ if($(this).closest("li").next().length ==0){ $(".pop_message").html("已到底部!"); $(".pop_con").fadeIn(); } $(this).closest("li").next().after($(this).closest("li")); }else{ $(this).closest("li").remove(); } }) }) </script> </head> <body> <div> <h3>To do list</h3> <input type="text"> <button>增加</button> <ul> <li> <h3>学习html</h3> <p> <a href="javascript:void(0);">删除</a> <a href="javascript:void(0);">上移</a> <a href="javascript:void(0);">下移</a> </p> </li> <li> <h3>学习css</h3> <p> <a href="javascript:void(0);">删除</a> <a href="javascript:void(0);">上移</a> <a href="javascript:void(0);">下移</a> </p> </li> <li> <h3>学习ps</h3> <p> <a href="javascript:void(0);">删除</a> <a href="javascript:void(0);">上移</a> <a href="javascript:void(0);">下移</a> </p> </li> </ul> </div> <div> <div> <div> <h3>提示信息</h3> <a href="javascript:void(0);">X</a> </div> <div>输入框不能为空</div> <div> <button>朕知道了</button> </div> </div> </div> </body> </html>
九、滚轮事件与函数节流1、jquery.mousewheel插件使用
jquery中没有滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.nousewheel.js。
2、函数节流
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短时间内多次触发执行绑定的函数可以巧妙的使用定时器来减少触发的次数，实现函数节流。
3、整屏滚动实例
