jQuery plugin to achieve image suspension

jQuery plugin to achieve image suspension

This article shares the specific code of the jQuery plug-in to achieve image suspension for your reference. The specific content is as follows

A very common effect is that the picture will float and display after clicking.

The effect is as follows

Code section

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Make the picture float</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
   * {
    margin: 0px;
    padding: 0px;
    user-select: none;
   }

   ul {
    margin-left: 20px;
   }
   ul li{
    width: 200px;
   }
   li img {
    width: 100%;
   }
   .float{
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    list-style: none;
    z-index: 99;
   }
   .float::before{
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 98;
   }
  </style>
 </head>
 <body>
  <ul>
   <li class="li"><img src="img/1.png" /></li>
   <li class="li"><img src="img/2.png" /></li>
   <li class="li"><img src="img/3.png" /></li>
   <li class="li"><img src="img/4.png" /></li>
  </ul>
 </body>
</html>
<script>
 $(".li").click(function() {
  $(this).toggleClass('float')
 })
</script>

Explanation of ideas

It's about changing from one state to another, giving and taking away a class.

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 mouse hover link popup follow image example code

<<:  Detailed explanation of Linux text processing command sort

>>:  Centos7.5 configuration java environment installation tomcat explanation

Recommend

Detailed explanation of Linux text editor Vim

Vim is a powerful full-screen text editor and the...

Vue implements click and passes in event objects and custom parameters at the same time

Just pass in custom parameters HTML <div id=&q...

Summary of 7 types of logs in MySQL

There are the following log files in MySQL: 1: re...

Using CSS to implement image frame animation and curve motion

The basic principle of all animations is to displ...

MySQL stored functions detailed introduction

Table of contents 1. Create a stored function 2. ...

Detailed steps for deploying Tomcat server based on IDEA

Table of contents Introduction Step 1 Step 2: Cre...

CSS to achieve the transition animation effect of the picture when the mouse is placed on it

Code <div class="test"> <div&g...

Detailed explanation of scheduled tasks for ordinary users in Linux

Preface Ordinary users define crontab scheduled t...

Vue uses WebSocket to simulate the chat function

The effect shows that two browsers simulate each ...

JavaScript to implement search data display

This article shares the data display code for Jav...

Vue template compilation details

Table of contents 1. parse 1.1 Rules for intercep...

Introduction to partitioning the root directory of Ubuntu with Vmvare virtual machine

Table of contents Preface Rationale Procedure 1. ...

MySQL performance optimization tips

MySQL Performance Optimization MySQL is widely us...

Alibaba Cloud Nginx configures https to implement domain name access project (graphic tutorial)

Step 1: Sign a third-party trusted SSL certificat...

Solution to MySql Error 1698 (28000)

1. Problem description: MysqlERROR1698 (28000) so...