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 ideasIt'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:
|
<<: Detailed explanation of Linux text processing command sort
>>: Centos7.5 configuration java environment installation tomcat explanation
Recommend
Vue implements multi-grid input box on mobile terminal
Recently, the company has put forward a requireme...
Full-screen drag upload component based on Vue3
This article mainly introduces the full-screen dr...
How to isolate users in docker containers
In the previous article "Understanding UID a...
Installation tutorial of mysql 5.7 under CentOS 7
1. Download and install the official MySQL Yum Re...
The difference between div and span in HTML (commonalities and differences)
Common points: The DIV tag and SPAN tag treat som...
Web Design Tutorial (5): Web Visual Design
<br />Previous article: Web Design Tutorial ...
Steps to run ASP.NET Core in Docker container
There are too much knowledge to learn recently, a...
HTML form_PowerNode Java Academy
1. Form 1. The role of the form HTML forms are us...
How to run Spring Boot application in Docker
In the past few days, I have studied how to run s...
JavaScript to achieve simple tab bar switching case
This article shares the specific code for JavaScr...
Summary of JavaScript custom object methods
Table of contents 1. Use object to create an obje...
Detailed steps for porting busybox to build a minimal root file system
Busybox: A Swiss Army knife filled with small com...
JavaScript implements countdown on front-end web page
Use native JavaScript to simply implement the cou...
Method of building redis cluster based on docker
Download the redis image docker pull yyyyttttwwww...
Solution to changing the data storage location of the database in MySQL 5.7
As the data stored in the MySQL database graduall...