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
Docker Detailed Illustrations
1. Introduction to Docker 1.1 Virtualization 1.1....
MYSQL string forced conversion method example
Preface Since the types of the same fields in the...
Introduction to partitioning the root directory of Ubuntu with Vmvare virtual machine
Table of contents Preface Rationale Procedure 1. ...
CSS scroll bar style modification code
CSS scroll bar style modification code .scroll::-...
Use of Linux passwd command
1. Command Introduction The passwd command is use...
How to install and configure WSL on Windows
What is WSL Quoting a passage from Baidu Encyclop...
Let's talk in detail about whether setState in React is a macro task or a micro task
Table of contents Preface Is the interviewer aski...
Simple summary of tomcat performance optimization methods
Tomcat itself optimization Tomcat Memory Optimiza...
WeChat applet selects the image control
This article example shares the specific code for...
Summary of Mysql slow query operations
Mysql slow query explanation The MySQL slow query...
Writing Snake Game with Native JS
This article shares the specific code of writing ...
Practice of using SuperMap in Vue
Table of contents Preface Related Materials Vue p...
Basic usage and examples of yum (recommended)
yum command Yum (full name Yellow dog Updater, Mo...
Some conclusions on developing mobile websites
The mobile version of the website should at least...
Detailed tutorial on deploying Django project under CentOS
Basic Environment Pagoda installation service [Py...