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
Vue3 encapsulates the side navigation text skeleton effect component
Vue3 project encapsulation side navigation text s...
How to set directory whitelist and IP whitelist in nginx
1. Set a directory whitelist: Do not set restrict...
React passes parameters in several ways
Table of contents Passing parameters between pare...
Detailed explanation of Docker daemon security configuration items
Table of contents 1. Test environment 1.1 Install...
6 ways to view the port numbers occupied by Linux processes
For Linux system administrators, it is crucial to...
Design a simple HTML login interface using CSS style
login.html part: <!DOCTYPE html> <html l...
How to achieve centered layout in CSS layout
1. Set the parent container to a table and the ch...
foreman ubuntu16 quick installation
Quickstart Guide The Foreman installer is a colle...
Detailed steps for using AES.js in Vue
Use of AES encryption Data transmission encryptio...
Implementation process of the magnifying glass effect in the Javascript example project
Table of contents Preface Case: Imitation of JD.c...
The reason why MySQL manually registers the binlog file and causes master-slave abnormalities
1. Source of the problem A friend @水米田 asked me a...
Solve the problem of ifconfig being unavailable in docker
Recently, when I was learning docker, I found tha...
CSS Standard: vertical-align property
<br />Original text: http://www.mikkolee.com...
How to build a virtual machine with vagrant+virtualBox
1. Introduction Vagrant is a tool for building an...
A brief analysis of the difference between and and where in MySQL connection query
1. Create a table CREATE TABLE `student` ( `id` i...