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
JavaScript color viewer
This article example shares the specific code of ...
Example of disabling browser cache configuration in Vue project
When releasing a project, you will often encounte...
How to build a deep learning environment running Python in Docker container
Check virtualization in Task Manager, if it is en...
HTML elements (tags) and their usage
a : Indicates the starting or destination positio...
Comparing Document Locations
<br />A great blog post by PPK two years ago...
Summary of the use of MySQL date and time functions
This article is based on MySQL 8.0 This article i...
mysql indexof function usage instructions
As shown below: LOCATE(substr,str) Returns the fi...
How to make a website front end elegant and attractive to users
The temperament of a web front-end website is a fe...
Nginx learning how to build a file hotlink protection service example
Preface Everyone knows that many sites now charge...
Detailed use of Echarts in vue2 vue3
Table of contents 1. Installation 2. Use Echarts ...
Detailed explanation of several commands in Linux to obtain detailed hardware information
In Linux systems, especially server systems, it i...
JS realizes the calculation of the total price of goods in the shopping cart
JS calculates the total price of goods in the sho...
How to automatically delete records before a specified time in Mysql
About Event: MySQL 5.1 began to introduce the con...
Detailed explanation of the reasons and solutions for floating elements to collapse the height of their parent elements
Floating elements cause their parent elements to ...
A very detailed summary of communication between Vue components
Table of contents Preface 1. Props, $emit one-way...