前端框架之jQuery(二)----轮播图,放大镜

时间:2022-03-18 07:55:33

事件

页面载入   ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。   $(document).ready(function(){}) -----------> $(function(){})

事件处理   $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

   //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如:   //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定   //  click事件;

   [selector]参数的好处:       好处在于.on方法为动态添加的元素也能绑上指定事件;如:

       //$('ul li').on('click', function(){console.log('click');})的绑定方式和       //$('ul li').bind('click', function(){console.log('click');})一样;我通过js给ul添加了一个       //li:$('ul').append('<li>js new li<li>');这个新加的li是不会被绑上click事件的

       //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定,然后动态添加       //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件      [data]参数的调用:            function myHandler(event) {               alert(event.data.foo);               }            $("li").on("click", {foo: "bar"}, myHandler)

实例之面板拖动

<!DOCTYPE html><html><head lang="en">   <meta charset="UTF-8">   <title></title></head><body>   <div style="border: 1px solid #ddd;width: 600px;position: absolute;">       <div id="title" style="height: 40px;color: white;">           标题       </div>       <div style="height: 300px;">           内容       </div>   </div><script type="text/javascript" src="jquery-2.2.3.js"></script><script>   $(function(){       // 页面加载完成之后自动执行       $('#title').mouseover(function(){           $(this).css('cursor','move');       }).mousedown(function(e){           //console.log($(this).offset());           var _event = e || window.event;           // 原始鼠标横纵坐标位置           var ord_x = _event.clientX;           var ord_y = _event.clientY;

           var parent_left = $(this).parent().offset().left;           var parent_top = $(this).parent().offset().top;

           $(this).bind('mousemove', function(e){               var _new_event = e || window.event;               var new_x = _new_event.clientX;               var new_y = _new_event.clientY;

               var x = parent_left + (new_x - ord_x);               var y = parent_top + (new_y - ord_y);

               $(this).parent().css('left',x+'px');               $(this).parent().css('top',y+'px');

           })       }).mouseup(function(){           $(this).unbind('mousemove');       });   })</script></body></html>

实例之放大镜

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>bigger</title>   <style>       *{           margin: 0;           padding:0;       }       .outer{           height: 350px;           width: 350px;           border: dashed 5px cornflowerblue;       }       .outer .small_box{           position: relative;       }       .outer .small_box .float{           height: 175px;           width: 175px;           background-color: darkgray;           opacity: 0.4;           fill-opacity: 0.4;           position: absolute;           display: none;

       }

       .outer .big_box{           height: 400px;           width: 400px;           overflow: hidden;           position:absolute;           left: 360px;           top: 0px;           z-index: 1;           border: 5px solid rebeccapurple;           display: none;

       }       .outer .big_box img{           position: absolute;           z-index: 5;       }

   </style></head><body>

       <div class="outer">           <div class="small_box">               <div class="float"></div>               <img src="data:images/2.jpg">

           </div>           <div class="big_box">               <img src="2.jpg">           </div>

       </div>

<script src="jquery-2.1.4.min.js"></script><script>

   $(function(){

         $(".small_box").mouseover(function(){

             $(".float").css("display","block");             $(".big_box").css("display","block")

         });         $(".small_box").mouseout(function(){

             $(".float").css("display","none");             $(".big_box").css("display","none")

         });

         $(".small_box").mousemove(function(e){

             var _event=e || window.event;

             var float_width=$(".float").width();             var float_height=$(".float").height();

             console.log(float_height,float_width);

             var float_height_half=float_height/2;             var float_width_half=float_width/2;             console.log(float_height_half,float_width_half);

              var small_box_width=$(".small_box").height();              var small_box_height=$(".small_box").width();

//  鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理             var mouse_left=_event.clientX-float_width_half;             var mouse_top=_event.clientY-float_height_half;

             if(mouse_left<0){                 mouse_left=0             }else if (mouse_left>small_box_width-float_width){                 mouse_left=small_box_width-float_width             }

             if(mouse_top<0){                 mouse_top=0             }else if (mouse_top>small_box_height-float_height){                 mouse_top=small_box_height-float_height             }

              $(".float").css("left",mouse_left+"px");              $(".float").css("top",mouse_top+"px")

              var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);              var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);

             console.log(percentX,percentY)

              $(".big_box img").css("left", -percentX*mouse_left+"px")              $(".big_box img").css("top", -percentY*mouse_top+"px")         })   })

</script></body></html>

动画效果

回调函数

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>Title</title>   <script src="jquery-2.1.4.min.js"></script>

</head><body> <button>hide</button> <p>helloworld helloworld helloworld</p><script>  $("button").click(function(){      $("p").hide(1000,function(){          alert($(this).html())      })  })   </script></body></html>

扩展方法 (插件机制)

用JQuery写插件时,最核心的方两个方法

<script>   $.extend(object)      //为JQuery 添加一个静态方法。$.fn.extend(object)   //为JQuery实例添加一个方法。

   jQuery.extend({         min: function(a, b) { return a < b ? a : b; },         max: function(a, b) { return a > b ? a : b; }       });   console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({   "print":function(){       for (var i=0;i<this.length;i++){           console.log($(this)[i].innerHTML)       }

   }});$("p").print();</script>

实例之注册验证

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>Title</title>   <style>       li{

           list-style: disc;;       }       img{           display: block;           height: 200px;       }   </style></head><body><form class="Form">

   <p><input class="v1" type="text" name="username" mark="用户名"></p>   <p><input class="v1" type="text" name="email" mark="邮箱"></p>   <p><input class="v1" type="submit" value="submit"  onclick="return validate()"></p>

</form>

<script src="jquery-2.1.4.min.js"></script><script>   // 注意:   // DOM对象--->jquery对象    $(DOM)   // jquery对象--->DOM对象    $("")[0]

   //---------------------------------------------------------

   // DOM绑定版本   function validate(){

       flag=true;

       $("Form .v1").each(function(){           $(this).next("span").remove();// 防止对此点击按钮产生多个span标签             var value=$(this).val();           if (value.trim().length==0){                var mark=$(this).attr("mark");                var ele=document.createElement("span");                ele.innerHTML=mark+"不能为空!";                $(this).after(ele);                $(ele).prop("class","error");// DOM对象转换为jquery对象                flag=false;                //  return false-------->引出$.each的return false注意点           }

       });       return flag   }</script></body></html>

轮播图

<!DOCTYPE html><html> <head>   <meta charset="utf-8">   <title>轮播图</title>   <style media="screen">   * {       margin: 0;       padding: 0;     }   #Number li{       width: 50px;       height: 50px;       background-color: #303a40;       color: white;       text-align: center;       line-height: 50px;       border-radius: 50%;       margin-left: 30px;       font-size: large;       list-style-type: none;       display: inline-block;     }     #Number{       position: absolute;       width: 100%;       text-align: center!important;       top: 80%;     }

     .outer{       cursor: pointer;       width: 60%;       height: 75%;       position: absolute;       left: 50%;       top: 10%;       margin-left: -30%;

     }     .outer:hover .button{       display: inline-block;     }     .img img{       width: 100%;       height: 100%;       position: absolute;       top: 0;       bottom: 0;       left: 0;       right: 0;     }     .button{       display: none;       opacity: 0.3;       color: white;       font-size: 50px;       text-align: center;       line-height: 80px;       top: 50%;       margin-top: -40px;       position: absolute;       width: 80px;       height: 80px;       background-color: black;     }     .r{       right: 0;     }     .l1{       background-color: red!important;     }   </style> </head> <body>   <div class="outer" id="sliderWrap">     <div class="img" id="sliderContent">

     </div>     <div id="Number">       <ul>

       </ul>     </div>     <div class="button l" id="left">       &lt;     </div>     <div class="button r" id="right">       &gt;     </div>   </div> </body><script src="jquery-2.1.4.min.js"></script> <script type="text/javascript">   var arr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg']   $.each(arr,function (i,v) {       console.log(i)       $('.img').append("<a><img src="+v+"></a>")       if(i==0){           $('ul').append("<li class='l1'>"+(i+1)+"</li>")       }else{           $('ul').append("<li>"+(i+1)+"</li>")       }   })   $('.img').append("<a><img src="+arr[0]+"></a>")   $('#Number li').mouseover(function () {       $(this).addClass('l1').siblings().removeClass('l1')       var index=$(this).index()       i=index       $('.img a').eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);   })   var time = setInterval(move,2000)   var i =0;   function move() {       if(i==arr.length-1){           i=-1       }       i++       $('#Number li').eq(i).addClass('l1').siblings().removeClass('l1')       $('.img a').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);   }   $('.outer').hover(function () {       clearInterval(time)   },function () {       time=setInterval(move,2000)   })   $('.r').click(function () {       move()   })   $('.l').click(function () {       if(i==0){           i=arr.length       }       i--       $('#Number li').eq(i).addClass('l1').siblings().removeClass('l1')       $('.img a').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);   }) </script></html>

前端框架之jQuery(二)----轮播图,放大镜

识别图中二维码,领取python全套视频资料