jQuery realizes image highlighting
|
It is very common to highlight images on a page. Here is how to use jQuery to achieve the effect of highlighting images.
HTML code part <body> <div> /*Add picture*/ <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg"> <img src="img/5.jpg"> <img src="img/6.jpg"> </div> </body> CSS code part
<style>
html{background:#000;}
div{
width:700px;
height:410px;
border:1px solid #ddd;
margin:50px auto;
padding:0 20px;
}
div img{
margin: 10px 10px 0 20px;
}
</style>jQuery code part
<script>
// Add hover event to the big box $("div").hover(function(){
// Add hover event to each img $("img").hover(function(){
// Add animation to the current img to change the transparency $(this).stop(true).animate({opacity:1},100)
$(this).siblings().stop(true).animate({opacity:.5})
})
})
// When the mouse moves away from the big box, add animation to change the transparency $("div").mouseout(function(){
$("img").animate({opacity:1},100)
})
</script>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:
|
>>: How to obtain a permanent free SSL certificate from Let's Encrypt in Docker
Recommend
How to add a column to a large MySQL table
The question is referenced from: https://www.zhih...
Two query methods when the MySQL query field type is json
The table structure is as follows: id varchar(32)...
Parsing MySQL binlog
Table of contents 1. Introduction to binlog 2. Bi...
Several implementation methods of the tab bar (recommended)
Tabs: Category + Description Tag bar: Category =&...
Linux checkup, understand your Linux status (network IO, disk, CPU, memory)
Table of contents 1. Core commands 2. Common comm...
The website is grayed out. Compatible code including images supports all browsers
Generally, on national days of mourning, days of ...
HTML head tag detailed introduction
There are many tags and elements in the HTML head ...
How to mount a disk in Linux and set it to automatically mount on boot
Knowing that everyone's time is precious, I w...
The implementation principle of Tomcat correcting the JDK native thread pool bug
To improve processing power and concurrency, Web ...
Docker enables multiple port mapping commands
as follows: docker run -d -p 5000:23 -p 5001:22 -...
Vue integrates Tencent Map to implement API (with DEMO)
Table of contents Writing Background Project Desc...
Robots.txt detailed introduction
Robots.txt is a plain text file in which website ...
Java example code to generate random characters
Sample code: import java.util.Random; import java...
Detailed explanation of nginx current limiting module in Nginx source code research
Table of contents 1. Current limiting algorithm 2...
A brief analysis of the relationship between various Tomcat logs and the segmentation of catalina.out files
The relationship between Tomcat logs A picture is...