突出展示案例

<!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. firewall-cmd命令

    firewalld 基本操作 安装firewalld # yum install firewalld firewall-config firewalld启动,停止,开机启动与否,查看状态 # syst ...

  2. 普通台式机装centos7系统

    一.环境 台式机配置如下: 配置:CPU -i5-7400 内存:8G 硬盘:1T 原装系统: win7 64x 使用软碟通刻录U盘做系统启动盘,教程: 教你用UltraISO+U盘制作启动盘和安装各 ...

  3. PHPExcel使用

       参考链接: 官方github:https://github.com/PHPOffice/PHPExcel 设置表格字体颜色等操作:http://www.cnblogs.com/grimm/p/9 ...

  4. 如何用apply实现一个bind？

    面试题:如何用apply实现一个bind? Function.prototype._bind = function(target) { // 保留调用_bind方法的对象 let _this = th ...

  5. nginx location展示及文件共享

    nginx 目录展示及文件访问 效果: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d5G9wfKK-1570116907804)(E:\Users\FangJunX ...

  6. SQL中的事务ACID

    概述: 事务是由一系列语句构成的逻辑工作单元.事务和存储过程等批处理有一定程度上的相似之处, 通常都是为了完成一定业务逻辑而将一条或者多条语句“封装”起来,使它们与其他语句之间出现一个逻辑上的边界,并 ...

  7. IIS在已有站点上->添加应用程序命令

    已有站点:HTTP80 %systemroot%\system32\inetsrv\APPCMD ADD APP /SITE.NAME:"HTTP80" /path:/Redire ...

  8. 一台服务器搭建部署两个或多个Redis实例

    问题描述: 今天程序那边说测试服里面有两个项目,为了数据不冲突,想一台服务器搞两个Redis实例, 然后自己这边查询了一下,确实可以这么整,只需要区分端口号和区分配置文件方面就行, 原理与nginx和 ...

  9. 一个抓猫的游戏 消遣GAME 持续更新中！

    一个抓猫的游戏 版本 Catch_Cat_V0.30 https://files-cdn.cnblogs.com/files/send-off-a-friend/Catch_Cat_V0.3.rar ...

  10. opencv —— imread、namedWindow & imshow、cvtColor、imwrite 加载、显示、修改、保存图像

    加载图像:imread 函数 Mat imread(const string& filename, int flags = 1): filename:需要载入的图像的路径名. flags:加载 ...