突出展示案例

<!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. Windows+Python+Selenium基础篇之1-环境搭建

    1.所需工具包1.1Selenium for python1.2  Python  1.3  Notepad++或python IDE 2.  环境搭建2.1  下载和安装Pythonpython2. ...

  2. 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. 少量代码设计一个登录界面 - .NET CORE(C#) WPF开发 阅读导航 本文背景 代码 ...

  3. 12.python内置模块之sys模块介绍

    python的sys模块是与python解释器交互的一个接口,提供对解释器使用或维护的一些变量的访问,即与解释器强烈交互的函数. sys模块的常用函数: 1.sys.argv:命令行参数列表.第一个元 ...

  4. git系列之---码云gitee 添加SHH公钥

    公钥 很多服务器都是需要认证的,SHH 认证是其中的一种:在客户端生成公钥,把生成的公钥添加到服务器,你以后连接服务器的时候就不用每次都输入用户名和密码了:很多git服务器都是用ssh认证方式,你需要 ...

  5. Windwos应急响应和系统加固(1)——Windwos操作系统版本介绍

    Windwos操作系统版本介绍 1. Micorsoft  Windows XP  ·Microsoft官方发布时间以及终止提供服务时间:2001.10.25-2014.4.8   产生漏洞:MS08 ...

  6. linux 基础入门(9) 系统服务 systemctl 与 xinted的运用

    9.系统服务 9.1系统服务 可以把计算机理解为一个地点比如中关村大街系统服务理解为中关村大街的理发店.饭店.商场等等,每一个都是一个系统服务,为客户提供不同内容的服务 服务:常驻在内存中的程序,且可 ...

  7. js中(function(){})()的写法用处

    直到今天我才明白的一个玩意!!! 来来来,首先嘛,JS中函数有两种命名方式 1.一种是声明式. 而声明式会导致函数提升,function会被解释器优先编译.即我们用声明式写函数,可以在任何区域声明,不 ...

  8. Git的基本使用 -- 文件的添加、撤销、对比、删除

    显示当前工作区.暂存区.仓库的状态 git status 当工作区的所有文件都提交到仓库,并和仓库保持一致时 有修改的文件时,会显示有改动的文件,并提示如何提交这些修改 添加到暂存区,还未提交到仓库时 ...

  9. VBA-UTF-8文件的操作

    1.读入UTF-8文件    Dim value As String   Dim vLines As Variant Call ReadCsvUTF_8(vFile.Path, value) vLin ...

  10. Bash脚本编程学习笔记06：条件结构体

    简介 在bash脚本编程中,条件结构体使用if语句和case语句两种句式. if语句 单分支if语句 if TEST; then CMD fi TEST:条件判断,多数情况下可使用test命令来实现, ...