突出展示案例

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title></title>
  7.   <style type="text/css">
  8.     * {
  9.       margin: 0;
  10.       padding: 0;
  11.     }
  12.  
  13.     ul {
  14.       list-style: none;
  15.     }
  16.  
  17.     body {
  18.       background: #000;
  19.     }
  20.  
  21.     .wrap {
  22.       margin: 100px auto 0;
  23.       width: 630px;
  24.       height: 394px;
  25.       padding: 10px 0 0 10px;
  26.       background: #000;
  27.       overflow: hidden;
  28.       border: 1px solid #fff;
  29.     }
  30.  
  31.     .wrap li {
  32.       float: left;
  33.       margin: 0 10px 10px 0;
  34.  
  35.     }
  36.  
  37.     .wrap img {
  38.       display: block;
  39.       border: 0;
  40.     }
  41.   </style>
  42.  
  43.   <script src="../jquery-1.12.4.js"></script>
  44.   <script>
  45.  
  46.     $(function () {
  47.       $(".wrap>ul>li").mouseenter(function () {
  48.         $(this).css("opacity", 1).siblings("li").css("opacity", 0.4);
  49.       })
  50.       $(".wrap").mouseleave(function () {
  51.         //让所有的li都变亮
  52.         $(this).find("li").css("opacity", 1);
  53.       })
  54.  
  55.     });
  56.  
  57.   </script>
  58.  
  59. </head>
  60.  
  61. <body>
  62.   <div class="wrap">
  63.     <ul>
  64.       <li><a href="#"><img src="data:images/01.jpg" alt="" /></a></li>
  65.       <li><a href="#"><img src="data:images/02.jpg" alt="" /></a></li>
  66.       <li><a href="#"><img src="data:images/03.jpg" alt="" /></a></li>
  67.       <li><a href="#"><img src="data:images/04.jpg" alt="" /></a></li>
  68.       <li><a href="#"><img src="data:images/05.jpg" alt="" /></a></li>
  69.       <li><a href="#"><img src="data:images/06.jpg" alt="" /></a></li>
  70.     </ul>
  71.   </div>
  72. </body>
  73.  
  74. </html>

jQuery---突出展示案例的更多相关文章

  1. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  2. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  3. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  4. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  5. iOS开发——UI进阶篇（一）UITableView，索引条，汽车数据展示案例

    一.什么是UITableView 在iOS中,要实现展示列表数据,最常用的做法就是使用UITableViewUITableView继承自UIScrollView,因此支持垂直滚动,而且性能极佳 UIT ...

  6. jquery视频展示 图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JQuery 事件及案例

    JQuery事件与JavaScript事件相似,只是把其中的on去掉 1.click,dblclick事件 案例1:点击缩略图换背景 <html xmlns="http://www.w ...

  8. jQuery的appendTo案例

    案例要求:点击双击第一个下拉列表框的选项可以把对应选项移到第二个下拉列表框中,选中第一个列表框的选项(可多选)单击-->按钮可使被选中项移动到右边下拉列表框中,单击==>按钮时将左边的所有 ...

  9. 使用Jquery Viewer 展示图片信息

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

随机推荐

  1. apache 访问状态 分析

    状态查看: 1.查看apache 各状态连接数 [root]#netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' ...

  2. 如何在命令行添加换行符到git commit -m "xxx"

    需求来源: 需要将自动识别的组件信息.更新信息.任务跟踪单号.下载链接等信息自动提交并推送至gerrit, 然后作为触发条件启动另一个协作业务流程. 方法1:单引号开放方法 git commit -m ...

  3. Linux文件结构-底层文件访问&文件目录和维护

    每个运行中的程序被称为进程(process),它有一些与之关联的文件描述符(一些小值整数).可以通过文件描述符访问打开的文件或设备. 一个程序运行时,一般会有三个文件描述符与之对应 0:标准输入 1: ...

  4. 与WinRT组件进行操作

    1,原理: WinRT是一个新的类库,应用程序可以用它访问操作系统的功能. 在内部,WinRT以组件的形式实现.COM Component Object Model- WinRT使用.net元数据来描 ...

  5. SAP 对HU做货物移动报错-Only 0 serial numbers entered instead of 30 -

    SAP 对HU做货物移动报错-Only 0 serial numbers entered instead of 30 - 元旦刚过,就收到客户的业务人员报错说,当其对HU做转库(同一个公司代码下工厂到 ...

  6. 此Flash Player 与您的地区不相容，请重新安装Adobe Flash Player问题解决

    flash29老版本安装说明: 如果你是Google Chrome 54及以上版本,那么直接安装 install_flash_player_**_ppapi.exe 即可,Chrome 能识别加载,无 ...

  7. JAVA系统架构高并发解决方案 分布式缓存 分布式事务解决方案

    JAVA系统架构高并发解决方案 分布式缓存 分布式事务解决方案

  8. 面向对象+闭包+三种对象的声明方式（字面式、new Object、构造函数、工厂模式、原型模式、混合模式）

    面向对象: 对代码的一种抽象,对外统一提供调用接口的编程思想 对象的属性:事物自身拥有的东西 对象的方法:事物的功能 对象:事物的一个实例 对象的原型:.prototype -> 内存地址 -& ...

  9. php操作mysql（数据库常规操作）

    php操作数据库八步走 <?php .建立连接 $connection '); .判断连接是否成功 if (mysqli_connect_error() != null) { die(mysql ...

  10. 《C++Primer》第五版习题答案--第六章【学习笔记】

    <C++Primer>第五版习题答案--第六章[学习笔记] ps:答案是个人在学习过程中书写,可能存在错漏之处,仅作参考. 作者:cosefy Date: 2020/1/16 第六章:函数 ...