突出展示案例

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }

    ul {

      list-style: none;

    }

    body {

      background: #000;

    }

    .wrap {

      margin: 100px auto 0;

      width: 630px;

      height: 394px;

      padding: 10px 0 0 10px;

      background: #000;

      overflow: hidden;

      border: 1px solid #fff;

    }

    .wrap li {

      float: left;

      margin: 0 10px 10px 0;

    }

    .wrap img {

      display: block;

      border: 0;

    }

  </style>

  <script src="../jquery-1.12.4.js"></script>

  <script>

    $(function () {

      $(".wrap>ul>li").mouseenter(function () {

        $(this).css("opacity", 1).siblings("li").css("opacity", 0.4);

      })

      $(".wrap").mouseleave(function () {

        //让所有的li都变亮

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

      })

    });

  </script>

</head>

<body>

  <div class="wrap">

    <ul>

      <li><a href="#"><img src="data:images/01.jpg" alt="" /></a></li>

      <li><a href="#"><img src="data:images/02.jpg" alt="" /></a></li>

      <li><a href="#"><img src="data:images/03.jpg" alt="" /></a></li>

      <li><a href="#"><img src="data:images/04.jpg" alt="" /></a></li>

      <li><a href="#"><img src="data:images/05.jpg" alt="" /></a></li>

      <li><a href="#"><img src="data:images/06.jpg" alt="" /></a></li>

    </ul>

  </div>

</body>

</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. [ERROR]pip insall pyodbc

    - 错误代码如下: pip install pyodbc Looking in indexes: http://172.16.1.250/repository/douban/simple Collec ...

  2. Objective-C编程 — 并行编程

    多线程 线程的基本概念 线程 (thread)是进程(process)A 内假想的持有 CPU 使用权的执行单位.一般情况下,一个进程 只有一个线程,但也可以创建多个线程并在进程中并行执行.应用在执行 ...

  3. Android中通过ImageSwitcher实现相册滑动查看照片功能(附代码下载)

    场景 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将需要滚动查看的照 ...

  4. C#_.net core 3.0自定义读取.csv文件数据_解决首行不是标题的问题_Linqtocsv改进

    linqtocsv文件有不太好的地方就是:无法设置标题的行数,默认首行就是标题,这不是很尴尬吗?   并不是所有的csv文件严格写的首行是标题,下面全是数据,我接受的任务就是读取很多.csv报表数据, ...

  5. 使用CSV Data Set Config配置原件，参数化数据

    对接口数据的参数化方式大概有三种方式,1:jmeter内置函数:2:借助CSV Data Set Config配置原件:3:jdbc连接数据库,使用数据表字段 此处主要讲第二种:借助CSV Data ...

  6. （三）LoadRunner术语认识

    场景:主要表现为controller中设计与执行测试用例中的用户场景.主要工作有,在controller中选择虚拟用户脚本.设置虚拟用户数量.配置虚拟用户运行时的行为.选择负载发生器.设置执行时间等. ...

  7. oracle中sql语句的to_date语法

    完整日期:TO_DATE('2009-4-28 00:00:00', 'yyyy-mm-dd hh24:mi:ss'); to_date('2008/09/20','yyyy/mm/dd') 创建视图 ...

  8. SpringCloud踩坑

    今天在使用 SpringCloud 时遇到了一个问题,感觉有不少小伙伴会遇到,所以记录下来 版本说明 SpringBoot 2.2.4.RELEASE SpringCloud Greenwich.SR ...

  9. 探究Redis两种持久化方式下的数据恢复

    对长期奋战在一线的后端开发人员来说,都知道redis有两种持久化方式RDB和AOF,虽说大家都知道这两种方式大概运作方式,但想必有实操的人不会太多. 这里是自己实操两种持久化方式的一点点记录. 先看以 ...

  10. adams技巧汇总

    T+左键        平动模型 R+左键        旋转模型 Z+左键        动态缩放 F或Ctrl+F     以最大比例全面显示模型 S+左键        沿着垂直于屏幕的轴线旋转 ...