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

Posted 2020-11-21 it-scavenger

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端框架之jQuery----轮播图,放大镜相关的知识，希望对你有一定的参考价值。

事件

页面载入
   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="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>

技术分享图片

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

以上是关于前端框架之jQuery----轮播图,放大镜的主要内容，如果未能解决你的问题，请参考以下文章

前端必备技能——轮播图（原生代码+插件）

前端javascript+jQuery实现旋转木马效果轮播图slider

[前端练习小Demo]分别用jquery和vue实现轮播图

轮播图

前端开发之jQuery位置属性和筛选方法

网页HTML代码制作轮播图效果