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前端设计中的非常常见的，比如一些登陆界面和特殊的手势都可以这样来实现