jQuery----（类似抽奖转盘）高亮显示
程序员文章站
2022-07-05 15:35:43
效果如图： 原图 鼠标进入后开始变化图 实现需求： 页面加载开始，效果如原图所示，在鼠标进入盒子后，图片在当前鼠标位置高亮显示，其余图片变暗，依次交替进行。 代码： 代码分析： 1.页面结构HTML+CSS： 盒子居中 margin:100px auto; 盒子中包括一个ul，li中包含img 2. ......
效果如图：
原图 鼠标进入后开始变化图
实现需求：
页面加载开始，效果如原图所示，在鼠标进入盒子后，图片在当前鼠标位置高亮显示，其余图片变暗，依次交替进行。
代码：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>高亮显示</title>
6 <style type="text/css">
7 *{
8 padding: 0px;
9 margin: 0px;
10 }
11 body{
12 background-color: black;
13 }
14
15 .wrap{
16 width: 630px;
17 margin: 100px auto;
18 padding: 10px 0px 0px 10px;
19 height: 394px;
20 border: 1px solid white;
21 }
22 .wrap ul{
23 list-style: none;
24 }
25 .wrap ul li{
26 margin: 0px 10px 10px 0px;
27 float: left;
28 }
29 .wrap img{
30 opacity: 0.5;
31 display: block;
32 }
33 </style>
34 <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
35 <script type="text/javascript">
36 //页面加载的时候,获取li,注册鼠标移入和鼠标移出事件
37 $(function(){
38 //鼠标移入事件
39 $(".wrap>ul>li>img").mouseover(function(){
40 $(this).css("opacity",1);
41 });
42 //鼠标移出事件
43 $(".wrap>ul>li>img").mouseout(function(){
44 $(this).css("opacity",0.5);
45 });
46 });
47 </script>
48 </head>
49 <body>
50 <div class="wrap">
51 <ul>
52 <li><img src="images/01.jpg" ></li>
53 <li><img src="images/02.jpg" ></li>
54 <li><img src="images/03.jpg" ></li>
55 <li><img src="images/04.jpg" ></li>
56 <li><img src="images/05.jpg" ></li>
57 <li><img src="images/06.jpg" ></li>
58 </ul>
59 </div>
60 </body>
61 </html>
代码分析：
1.页面结构html+css：
盒子居中 margin:100px auto;
盒子中包括一个ul，li中包含img
2.鼠标进入img，当前img高亮显示
$(".wrap>ul>li>img").mouseover(function(){ $(this).css("opacity",1); });
3.鼠标移出img，取消当前img高亮显示
$(".wrap>ul>li>img").mouseout(function(){ $(this).css("opacity",0.5); });
图片、jquery资料下载地址：qq群694406023（百度云资料太浪费内存了~~~~~~~~）
欢迎大家进群交流，相互探讨。
上一篇： 自动化测试 selenium 环境搭建
下一篇： 妈妈这是猫干的