Html之實例練習（輪播圖片、放大鏡效果、面板拖動）

本篇將簡單演示一下HTML裏的輪播圖片、放大鏡效果和麪板拖動的實例，代碼已經打包好，需要參考的請自行下載

一、輪播圖片

1、效果圖

2、JS核心部分

<script>
    //用一個全局變量，來保存當前輪播到圖片（圓點）的索引
    var i=0;


//通過jquery自動創建按鈕標籤
    var img_num=$(".img li").length;  //獲取圖片數量

    //循環將每一個小圓圈加到ul裏面
    for(var j=0;j<img_num;j++){
        $(".num").append("<li></li>")
    }

    //初始狀態是紅色的圓圈設置爲第一個
    $(".num li").eq(0).addClass("active");



// 手動輪播：點擊小圓點切換到對應的圖片
    $(".num li").mouseover(function () {
        //獲取當前圓點的索引，同時也就是圖片對應的索引
        i=$(this).index();

        //將鼠標當前懸浮的那一個圓點添加變紅（active），然後將非當前的圓點去除變紅
        $(this).addClass("active").siblings().removeClass("active");

        //將鼠標懸浮圓點對應的圖片，停止其他動畫只留漸入動畫；同時將非圓點對應的其他圖片，停止其他動畫，只留漸出動畫
        $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)

    });


// 自動輪播：一個1.5秒執行一次的函數
    var c=setInterval(GO_R,1500);  //添加一個計時器

    //切換到上一張圖片
    function GO_R() {
        //如果切換到了最後一張，則回到第一張（-1）
        if(i==img_num-1){
            i=-1
        }
         i++;  //循環變量i
        //輪播到的當前圖片對應的小圓點添加變紅，非該圓點去除變紅（白色）
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         //輪播到的圖片以漸入的動畫出現，非該圖片以漸出的動畫隱藏
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    }


    //切換到下一張圖片
    function GO_L() {
        //如果切換到了第一張，就跳到最後一張去
        if(i==0){
            i=img_num
        }
         i--;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)


    }

    //當鼠標懸浮在圖片上時，就不切換，即暫停計時器
    $(".outer").hover(function () {
        clearInterval(c)  //清除間隔（計時器），暫停計時
    },function () {
        c=setInterval(GO_R,1500)  //設置計時器，開始計時
    });
    
// button加定播 ：讓上下翻頁按鈕與圓點、圖片的索引對應起來
//簡單來說就是，每隔1.5秒走一次，就和按一次按鈕是一樣的
    $(".left").click(GO_R);
    $(".right").click(GO_L)


</script>

二、放大鏡效果

1、效果圖

2、JS核心部分

<script src="jquery-3.4.1.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>

三、面板拖動

1、效果圖

2、JS核心部分

<script type="text/javascript" src="jquery-3.4.1.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>

就這樣一個框，可用鼠標來拖動它，這在web前端設計中的非常常見的，比如一些登陸界面和特殊的手勢都可以這樣來實現