突出展示案例

<!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. Linux高级系统恢复技术

    一,MBR毁坏: 查看系统分区在那: 毁坏MBR: 如果没有重启动,可以直接恢复: 如果重启之后就不可启动系统,需要恢复系统: 出现这样的情况: force off关机,使用光盘启动,添加一个镜像光盘 ...

  2. H5异步加载多图

    异步加载多图(可能没啥用,加载慢)(图片预加载,提前给浏览器缓存图片) 1. 用一个计数变量记录需要加载的图片个数 2. 用new Image()去加载,加载完给此对象的src赋值要加载的url路径( ...

  3. Leetcode面试题17.20_连续中值

    题目地址 实现一个数列的动态添加和查询中位数. 复杂点的话应该可以写个平衡树什么的,然后查询第k大,还可以删除数字. 简单点的话显然可以维护两个堆,一个大顶堆一个小顶堆,而且大顶堆最多比小顶堆多一个, ...

  4. Python常用库 - os库

    os简单介绍 os 模块提供了非常丰富的方法用来处理文件和目录 os关于目录路径的方法 # 获取当前路径 path = os.getcwd() # 获取当前绝对路径 os.path.abspath(p ...

  5. 【二】、UML基础知识——图图解乾坤

    [二].UML基础知识 UML概述 UML是一个通用的可视化建模语言,不同于编程语言,它通过一些标准的图形符号和文字来对系统进行建模.用于对软件进行描述.可视化处理.构建软件系统的文档.是一套总结了以 ...

  6. Windows server 2012 出现大量无名已断开连接用户清楚办法

    打开cmd命令窗口,执行  taskkill /f /im winlogon.exe /t

  7. Python 编程入门（1）：基本数据类型

    以下所有例子都基于最新版本的 Python,为了便于消化,每一篇都尽量短小精悍,希望你能尽力去掌握 Python 编程的「概念」,可以的话去动手试一下这些例子(就算目前还没完全搞懂),加深理解. 程序 ...

  8. 特殊符号unicode编码

    包括箭头类.基本形状类.货币类.数学类.音乐符号类.对错类.星星类.星座类.国际象棋类.扑克牌类.希腊字母.十字类.法律符号.标点符号,详情见以下网址:http://caibaojian.com/un ...

  9. 【python基础语法】多重循环嵌套，函数（第6天课堂笔记）

    1.什么是函数?函数有什么作用? 函数都是有特定功能的,都是由一些有特定功能的进行封装完成的 2.已经学过了哪些内置函数?分别有什么作用? print:输出 input:输入 type:查询数据类型 ...

  10. MNIST 源码解析

    # Copyright 2015 Google Inc. All Rights Reserved. # # Licensed under the Apache License, Version 2.0 ...