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
How to use firewall iptables strategy to forward ports on Linux servers
Forwarding between two different servers Enable p...
Detailed explanation of docker command to backup linux system
tar backup system sudo tar cvpzf backup.tgz --exc...
Detailed explanation of the difference between url ending with / and without / in nginx proxy_pass configuration
When nginx configures proxy_pass, the difference ...
How to install redis in docker and set password and connect
Redis is a distributed cache service. Caching is ...
How to smoothly go online after MySQL table partitioning
Table of contents Purpose of the table For exampl...
In-depth explanation of Set and WeakSet collections in ES6
Table of contents Set is a special collection who...
Autotrash tool for Linux to automatically delete old junk files at a scheduled time
Autotrash is a command line program that automate...
XHTML Tutorial: The Difference Between Transitional and Strict
In fact, XHTML 1.0 is divided into two types (thr...
Differences between Windows Server win2003, win2008R2, win2012, win2016, and win2019 system versions
Recently, Microsoft released the 2019 server syst...
js tag syntax usage details
Table of contents 1. Introduction to label statem...
Example code for implementing 3D text hover effect using CSS3
This article introduces the sample code of CSS3 t...
Detailed explanation of JavaScript object conversion to primitive value
Table of contents Object.prototype.valueOf() Obje...
Solution to Nginx SSL certificate configuration error
1. Introduction When a web project is published o...
Detailed explanation of MySQL 5.7 MGR single master determination master node method
Our bank's MGR will be launched at the end of...
Which scenarios in JavaScript cannot use arrow functions
Table of contents 1. Define object methods 2. Def...