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

Vue and react in detail

Table of contents 1. Panorama II. Background 1. R...

Summary of using MySQL online DDL gh-ost

background: As a DBA, most of the DDL changes of ...

Using iframe techniques to obtain visitor QQ implementation ideas and sample code

Today at work, a friend I added temporarily asked ...

Secondary encapsulation of element el-table table (with table height adaptation)

Preface During my internship at the company, I us...

Docker+daocloud realizes automatic construction and deployment of front-end projects

Automated project deployment is more commonly use...

Use PS to create an xhtml+css website homepage in two minutes

There are too many articles about xhtml+css websi...

MySQL 8.0 New Features - Introduction to Check Constraints

Table of contents Preface Check Constraints Creat...

Solve the problem of Chinese garbled characters when inserting data into MySQL by Tomcat under Linux

1. Problem The project developed using Eclipse on...

Practical Optimization of MySQL Paging Limit

Preface When we use query statements, we often ne...

Detailed explanation of when javascript scripts will be executed

JavaScript scripts can be embedded anywhere in HT...

Solve the problem of MySql client exiting in seconds (my.ini not found)

Problem description (environment: windows7, MySql...

React uses antd's upload component to implement the file form submission function (complete code)

I have just started using react to do projects, a...

How to build Jenkins+Maven+Git continuous integration environment on CentOS7

This article takes the deployment of Spring boot ...

Steps to run ASP.NET Core in Docker container

There are too much knowledge to learn recently, a...

Vue implements user login switching

This article example shares the specific code of ...