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

Pitfalls encountered when installing the decompressed version of MySQL 5.7.20 (recommended)

MySQL official website: https://www.mysql.com/dow...

Is the tag li a block-level element?

Why can it set the height, but unlike elements lik...

Nodejs global variables and global objects knowledge points and usage details

1. Global Object All modules can be called 1) glo...

Bootstrap+Jquery to achieve calendar effect

This article shares the specific code of Bootstra...

Let you understand the deep copy of js

Table of contents js deep copy Data storage metho...

MYSQL transaction tutorial Yii2.0 merchant withdrawal function

Preface I am a PHP programmer who started out as ...

Sample code for implementing water drop ripple animation button effect with CSS+JS

The code looks like this: <!DOCTYPE html> &...

Summary of methods to prevent users from submitting forms repeatedly

Duplicate form submission is the most common and ...

jQuery implements shopping cart function

This article example shares the specific code of ...

Detailed installation steps for MySQL 8.0.11

This article shares the installation steps of MyS...

MySQL and MySQL Workbench Installation Tutorial under Ubuntu

Ubuntu install jdk: [link] Install Eclipse on Ubu...

How to uninstall MySQL cleanly (tested and effective)

How to uninstall Mysql perfectly? Follow the step...

What are the ways to import CSS? What is the difference between link and @import? How to choose

I saw that Taobao’s webpage uses import, while man...

How to implement scheduled automatic backup of MySQL under CentOS7

The happiest thing that happens in a production e...

Sample code for using js to implement Ajax concurrent requests to limit the number of requests

Description of the problem: When the number of as...