效果如图：

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

                                                                            

实现需求：

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

代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>高亮显示</title>

         <style type="text/css">

             *{

                 padding: 0px;

                 margin: 0px;

             }

             body{

                 background-color: black;

             }

             .wrap{

                 width: 630px;

                 margin: 100px auto;

                 padding: 10px 0px 0px 10px;

                 height: 394px;

                 border: 1px solid white;

             }

             .wrap ul{

                 list-style: none;

             }

             .wrap ul li{

                 margin: 0px 10px 10px 0px;

                 float: left;

             }

             .wrap img{

                 opacity: 0.5;

                 display: block;

             }

         </style>

         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             //页面加载的时候,获取li,注册鼠标移入和鼠标移出事件

             $(function(){

                 //鼠标移入事件

                 $(".wrap>ul>li>img").mouseover(function(){

                     $(this).css("opacity",1);

                 });

                  //鼠标移出事件

                 $(".wrap>ul>li>img").mouseout(function(){

                     $(this).css("opacity",0.5);

                 });

             });

         </script>

     </head>

     <body>

         <div class="wrap">

             <ul>

                 <li><img src="data:images/01.jpg" ></li>

                 <li><img src="data:images/02.jpg" ></li>

                 <li><img src="data:images/03.jpg" ></li>

                 <li><img src="data:images/04.jpg" ></li>

                 <li><img src="data:images/05.jpg" ></li>

                 <li><img src="data:images/06.jpg" ></li>

             </ul>

         </div>

     </body>

 </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----（类似抽奖转盘）高亮显示的更多相关文章

  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. vue + skyline 搭建 一个开发环境

    1.之前用的是ext +  skyline搭建环境 ,正好最近是做前端的事情,有时间用vue + skyline 搭建一个三维场景 2.准备vue 2.x  ,UI 用的是iview 和element ...

  2. Flutter 中 ListView 的使用

    这个小例子使用的是豆瓣 API 中 正在上映的电影的开放接口,要实现的主要效果如下: JSON 数据结构 Item 结构 Item 的结构是一个 Card 包含着一个 Row 然后这个 Row 里面左 ...

  3. 一步一步 Pwn RouterOS之调试环境搭建&&漏洞分析&&poc

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 本文分析 Vault 7 中泄露的 RouterOs 漏洞.漏洞影 ...

  4. Android Studio 快速实现上传项目到Github（详细步骤）

    前言: 本文主要讲解如何将Android Studio项目上传至GitHub,在此之前,先介绍几个概念. Android Studio:是谷歌推出一个Android集成开发工具,基于IntelliJ ...

  5. Android批量打包提速 - 1分钟900个市场不是梦

    版权声明: 欢迎转载,但请保留文章原始出处 作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/4152323.html 黎明前的黑暗 使用Ant或者Gradl ...

  6. Android自定义Button按钮显示样式

    关于listview和button都要改变android原来控件的背景,在网上查找了一些资料不是很全,所以现在总结一下android的selector的用法. 首先android的selector是在 ...

  7. C#代码实现在控制台输入密码显示星号

    在控制台输入的内容C#默认按照字符串进行处理,如果直接让用户一次输入完毕就很难实现 显示星号的功能.但是如果让用户一次只能输入一个字符就,在将用户输入的字符替换为星号就可以实现了! 首先,C#中能让用 ...

  8. python是如何找到对应的package的？

    我们在写python代码或者阅读别人的代码时,可能会碰到对应module无法找到的问题,这时如何解决呢?我们如果对python解释器如何查找对应的module有比较深刻的理解,那么我们就可以轻松解决相 ...

  9. java笔记--线程休眠sleep()的运用

    线程休眠sleep()方法的运用 在多线程编程中,有时需要让某个线程优先执行.除了可以设置这个线程的优先级为最高外,更加理想的方法是休眠其他线程,若有线程中断了正在休眠的线程,则抛出Interrupt ...

  10. Mysql5.7 的错误日志中最常见的note级别日志解释

          在使用mysql5.7的时候,发现了不少在mysql5.6上不曾见过的日志,级别为note, 最常见的note日志以下三种,下面我们来逐个解释. 第一种,Aborted connectio ...