jQuery achieves the shutter effect (using li positioning)

jQuery achieves the shutter effect (using li positioning)

This article shares the specific code of jQuery to achieve the blinds effect for your reference. The specific content is as follows

Probably the idea:

A div (800px wide) contains ul and li. The width and height of li are set to 560px and 300px respectively (the image in li also has this width and height). Set absolute positioning for li and relative positioning for div.
.no0{ left:0; }
.no1{ left:160px; }
.no2{ left:320px; }
.no3{ left:480px; }
.no4{ left: 640px; }
When not animated, each li is 160px wide and high. (800/5=160 div width/number of images)
During the animation, the width and height of the li entered by the mouse are 560px and 300px, fully displaying the image. The width of other pictures that have not been entered by the mouse is (800-560)/4=160px
When the mouse moves out of the box, each image returns to its original position.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
        overflow: hidden;
    }
    .box{
        width:800px;
        height:300px;
        border:5px solid gray;
        margin:100px auto;
        position: relative;
    }
    li{
        list-style: none;
        float: left;
        position:absolute;
        /*width:160px;*/
        height:300px;
        width:560px;
    }
    .no0{ left:0; }
    .no1{ left:160px; }
    .no2{ left:320px; }
    .no3{ left:480px; }
    .no4{ left: 640px; }

    img{
        width:560px;
        height:300px;
    }

</style>
<body>
<div class="box">
    <ul>
        <li class="no0"> <img src="img/0.jpg" alt=""> </li>
        <li class="no1"> <img src="img/1.jpg" alt=""> </li>
        <li class="no2"> <img src="img/2.jpg" alt=""> </li>
        <li class="no3"> <img src="img/3.jpg" alt=""> </li>
        <li class="no4"> <img src="img/4.jpg" alt=""> </li>
    </ul>
</div>


<script src="js/jquery-1.12.3.min.js"> </script>
<script>
    
// Initial position 0 160 320 480 640
// The leftmost position 0 60 120 180 240
//Rightmost position: 0 560 620 680 740
$lis = $("li");
//When the mouse enters Figure 1, Figures 1 to 4 animate to the right $lis.eq(0).mouseenter(function(){
      $lis.stop(true);
      $lis.eq(1).animate({left:560},1000);
      $lis.eq(2).animate({left:620},1000);
      $lis.eq(3).animate({left:680},1000);
     $lis.eq(4).animate({left:740},1000);
  });
//When the mouse enters picture 2, picture 2 will animate to the left, and pictures 3 to 4 will animate to the right$lis.eq(1).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:620},1000);
    $lis.eq(3).animate({left:680},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(2).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:680},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(3).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:180},1000);
    $lis.eq(4).animate({left:740},1000);

});

$lis.eq(4).mouseenter(function(){
    $lis.stop(true);
    $lis.eq(1).animate({left:60},1000);
    $lis.eq(2).animate({left:120},1000);
    $lis.eq(3).animate({left:180},1000);
    $lis.eq(4).animate({left:240},1000);

});


//When the mouse leaves the box, each image returns to its original position$(".box").mouseleave(function(){
        $lis.stop(true);
        $lis.eq(1).animate({left:160},1000);
        $lis.eq(2).animate({left:320},1000);
        $lis.eq(3).animate({left:480},1000);
        $lis.eq(4).animate({left:640},1000);
    })

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

Running results:

Code simplification:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
        overflow: hidden;
    }
    .box{
        width:800px;
        height:300px;
        border:5px solid gray;
        margin:100px auto;
        position: relative;
    }
    li{
        list-style: none;
        float: left;
        position:absolute;
        width:560px;
        height:300px;
    }
    .no0{ left:0; }
    .no1{ left:160px; }
    .no2{ left:320px; }
    .no3{ left:480px; }
    .no4{ left: 640px; }

    img{
        width:560px;
        height:300px;
    }

</style>
<body>
<div class="box">
    <ul>
        <li class="no0"> <img src="img/0.jpg" alt=""> </li>
        <li class="no1"> <img src="img/1.jpg" alt=""> </li>
        <li class="no2"> <img src="img/2.jpg" alt=""> </li>
        <li class="no3"> <img src="img/3.jpg" alt=""> </li>
        <li class="no4"> <img src="img/4.jpg" alt=""> </li>
    </ul>
</div>

<script src="js/jquery-1.12.3.min.js"></script>
<script>
// Initial position 0 160 320 480 640
// The leftmost position 0 60 120 180 240
//Rightmost position: 0 560 620 680 740


    $lis = $("li");
    $lis.mouseenter(function(){
        $lis.stop(true);
        console.log( $(this).index());
        var index = $(this).index();
// When the mouse enters the left side of the image, animate to the left. On the right, animate to the right $lis.each(function(i){
            if(i <= index){
                $(this).animate({left:60*i},1000);
            }else{
                $(this).animate({left:560+60*(i-1)},1000);
            }
        })
    })

//When the mouse leaves the box, each image returns to its original position$(".box").mouseleave(function(){
    $lis.stop(true);
      $lis.each( function(i){
          $(this).animate({left:160*i},1000);
      });

});



</script>

</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • jQuery to achieve the effect of blinds
  • jQuery realizes the shutter focus picture animation effect code sharing (with source code download)
  • How to use jQuery to achieve page shutter revolving lantern scrolling display effect
  • jQuery flip card or shutter effect (content automatically switches in three seconds)

<<:  XHTML introductory tutorial: Web page Head and DTD

>>:  A brief discussion on the role of the docker --privileged=true parameter

Recommend

Using keras to judge SQL injection attacks (example explanation)

This article uses the deep learning framework ker...

Introduction to the method attribute of the Form form in HTML

1 method is a property that specifies how data is ...

MySQL data insertion efficiency comparison

When inserting data, I found that I had never con...

VMware15 installation of Deepin detailed tutorial (picture and text)

Preface When using the Deepin user interface, it ...

MySQL5.7+ MySQL Workbench installation and configuration method graphic tutorial under MAC

This article mainly focuses on the installation a...

Simple implementation of ignoring foreign key constraints when deleting MySQL tables

Deleting a table is not very common, especially f...

Implementation of ssh non-secret communication in linux

What is ssh Administrators can log in remotely to...

A brief discussion on the differences and connections between .html, .htm, .shtml, and .shtm

As we all know, the web pages, websites or web pag...

Tudou.com front-end overview

1. Division of labor and process <br />At T...

CSS to achieve Cyberpunk 2077 style visual effects in a few steps

background Before starting the article, let’s bri...

3 common errors in reading MySQL Binlog logs

1. mysqlbinlog: [ERROR] unknown variable 'def...

MySQL Quick Data Comparison Techniques

In MySQL operation and maintenance, a R&D col...

Several ways to implement image adaptive container with CSS (summary)

There is often a scenario where the image needs t...

Tutorial on configuring SSH and Xshell to connect to the server in Linux (with pictures)

>>>>>Ubuntu installation and confi...

A look into tool-based websites: the definition of tool-based websites and typical case analysis (pictures and text)

When it comes to tool-type websites, we first hav...