效果如图：

　　　　　　　　　　　　　　　　　　　　原图　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　鼠标进入后开始变化图

                                                                            

实现需求：

页面加载开始，效果如原图所示，在鼠标进入盒子后，图片在当前鼠标位置高亮显示，其余图片变暗，依次交替进行。

代码：

  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="data:images/01.jpg" ></li>
  53.                  <li><img src="data:images/02.jpg" ></li>
  54.                  <li><img src="data:images/03.jpg" ></li>
  55.                  <li><img src="data:images/04.jpg" ></li>
  56.                  <li><img src="data:images/05.jpg" ></li>
  57.                  <li><img src="data: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); });

  1.  

jQuery----（类似抽奖转盘）高亮显示的更多相关文章

  1. jquery实现抽奖转盘

    用jquery通过配置参数实现抽奖转盘 1.html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  2. 利用java实现抽奖转盘(着重安全控制)

    本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...

  3. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  4. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  5. 使用CSS3+jquery.js 实现微信抽奖转盘效果

    上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...

  6. Html5-Canvas实现简易的抽奖转盘

    ###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...

  7. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  8. jquery实现抽奖

    用jquery实现抽奖小程序   用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jq ...

  9. android仿漫画源码、抽奖转盘、Google相册、动画源码等

    Android精选源码 android实现仿今日头条的开源项目 波浪效果,实现流量的动态显示 美妆领域的app, 集成了摄像头取色, 朋友圈, 滤镜等 android仿漫画源码 android一个视差 ...

随机推荐

  1. 分享泛微公司OA系统用于二次开发的sql脚本

    本单位用的oa系统就是泛微公司的oa协同办公平台,下面是我对他进行二次开发统计用到的写数据库脚本,只做开发参考使用,对于该系统的二次开发技术交流可以加我q:2050372586 [仪表盘]格式sql编 ...

  2. 配置ftp服务器只能上传不能进行其他操作

    又到期末考试了,今年当了数据挖掘助教,课程有一道编程大作业,需要搭建ftp服务器,实现文件上传,但是禁止下载重命名.服务器系统是ubuntu12.04 server,使用的ftp服务器也是linux下 ...

  3. Android技术博客精华汇总

    MVC/MVP/MVVM/MVPVM 更好的架构设计 MVC,MVP 和 MVVM 的图示 http://www.apkbus.com/blog-822721-68034.html Android架构 ...

  4. Windows7设置锁屏密码

    1.设置开机密码 2.设置屏幕保护程序 注意,不要选择无,选择其他的都可以,比如:气泡.彩带.空白

  5. JVM知识（三）：内存模型和可见性

    这篇文章我们将根据JVM的内存模型探索java当中变量的可见性以及不同的java指令在并发时可能发生的指令重排序的情况.来聊聊java线程对一个变量的更新怎么通知另一个线程,及volatile的作用和 ...

  6. zabbix使用问题

    1中文乱码 https://www.linuxidc.com/Linux/2017-08/146162.htm 软件 说明 备注 zabbix 3.4.7 操作系统 Centos7 问题描述:图表内容 ...

  7. ActionContext和ServletActionContext小结（转）

    ActionContext和ServletActionContext小结 1. ActionContext 在Struts2开发中,除了将请求参数自动设置到Action的字段中,我们往往也需要在Act ...

  8. RHEL7系统管理之网络管理

    1. RHEL7的网络介绍 在RHEL7中, NetworkManager 提供的默认联网服务是一个动态网络控制和配置守护进程, 支持ifcfg类型的配置文件. NetworkManager 可用于连 ...

  9. 【Redis】命令学习笔记——字符串（String）（23个超全字典版）

    Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). 本篇基于redis 4.0.11版本,学习字符串( ...

  10. iOS手势处理

    iOS手势处理 iOS手势有着如下几种: UITapGestureRecognizer UIPinchGestureRecognizer UIRotationGestureRecognizer UIS ...