1、鼠标经过导航中li时，一个活动的li跟随鼠标移动，最终移动到鼠标的停留的位置。（如需鼠标离开后让活动的li回到初始位置，则用jq hover事件，当鼠标离开时，给活动的li设置left是0）

2、鼠标经过div时，图片放大，layer层出现

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         .con {
  13.             margin: 20px auto;
  14.             width: 200px;
  15.             border: 1px solid #ccc;
  16.             position: relative
  17.         }
  18.  
  19.         .con_layer {
  20.             position: absolute;
  21.             top: 0;
  22.             left: 0;
  23.             width: 100%;
  24.             height: 200px;
  25.             background-color: #000;
  26.             opacity: 0;
  27.             z-index: 10;
  28.             transition: all 1s linear 0s;
  29.         }
  30.  
  31.         .con_img {
  32.             width: 100%;
  33.             height: 200px;
  34.             overflow: hidden;
  35.             z-index: 1;
  36.         }
  37.  
  38.         .con img {
  39.             width: 100%;
  40.             transition: all 1s linear 0s;
  41.         }
  42.  
  43.         .con:hover img {
  44.             transform: scale(1.2)
  45.         }
  46.  
  47.         .con:hover .con_layer {
  48.             opacity: 0.5;
  49.         }
  50.  
  51.         .line {
  52.             margin: 60px auto;
  53.             border: 1px solid #fff;
  54.             width: 0;
  55.         }
  56.  
  57.         .para {
  58.             color: #fff;
  59.             margin: 40px auto;
  60.             text-align: center;
  61.         }
  62.  
  63.         .clearfix {
  64.             zoom: 1;
  65.         }
  66.  
  67.         .clearfix:after {
  68.             content: ".";
  69.             display: block;
  70.             width: 0;
  71.             height: 0;
  72.             clear: both;
  73.             visibility: hidden
  74.         }
  75.  
  76.         .nav {
  77.             background-color: #0099cc;
  78.             list-style: none;
  79.             position: relative;
  80.             z-index: 999
  81.         }
  82.  
  83.         .nav li {
  84.             float: left;
  85.             width: 200px;
  86.             height: 46px;
  87.             line-height: 46px;
  88.             text-align: center;
  89.             cursor: pointer;
  90.             transition: all 0.5s linear 0s;
  91.             -webkit-transition: all 0.2s linear 0s;
  92.             -moz-transition: all 0.2s linear 0s;
  93.             -ms-transition: all 0.2s linear 0s;
  94.             -o-transition: all 0.2s linear 0s;
  95.         }
  96.  
  97.         .nav li a {
  98.             display: block;
  99.             width: 100%;
  100.             height: 100%;
  101.             color: #fff;
  102.             text-decoration: none;
  103.         }
  104.  
  105.         .nav li:hover a {
  106.             font-weight: bold;
  107.         }
  108.  
  109.         .nav .nav_bg {
  110.             position: absolute;
  111.             left: 0;
  112.             top: 0;
  113.             background-color: #FF9900;
  114.             z-index: -1;
  115.             border-radius: 5px;
  116.             box-shadow: 0px 0px 4px #333
  117.         }
  118.  
  119.         .next {
  120.             padding: 0 20px;
  121.             width: 200px;
  122.             height: 36px;
  123.             margin: 20px;
  124.             border: 1px solid #ccc;
  125.             border-radius: 5px;
  126.             background: red url("ico-bg.png") no-repeat center;
  127.             transition:all 1s linear 0s;
  128.         }
  129.  
  130.         .next:hover {
  131.             background:green url("ico-bg.png") no-repeat 200px center;
  132.  
  133.         }
  134.     </style>
  135. </head>
  136. <body>
  137. <div class="con">
  138.     <div class="con_img">
  139.         <img src="1.jpg" alt=""/>
  140.     </div>
  141.     <div class="con_layer">
  142.         <div class="para">我是图文解说</div>
  143.         <div class="line"></div>
  144.     </div>
  145.     <p>
  146.         我是图文解说我是图文解说
  147.         我是图文解说我是图文解说
  148.         我是图文解说我是图文解说
  149.         我是图文解说我是图文解说
  150.         我是图文解说我是图文解说
  151.         我是图文解说我是图文解说
  152.     </p>
  153. </div>
  154. <ul class="nav clearfix">
  155.     <li><a href="javascript:void (0);">111</a></li>
  156.     <li><a href="javascript:void (0);">222</a></li>
  157.     <li><a href="javascript:void (0);">333</a></li>
  158.     <li><a href="javascript:void (0);">444</a></li>
  159.     <li><a href="javascript:void (0);">555</a></li>
  160.     <li><a href="javascript:void (0);">666</a></li>
  161.     <li class="nav_bg"></li>
  162. </ul>
  163. <div class="next"></div>
  164. </body>
  165. <script src="jquery-1.11.3.min.js"></script>
  166. <script>
  167.     $(".con").hover(function () {
  168.         $(".line").animate({width: "120px"}, 1000)
  169.     }, function () {
  170.         $(".line").animate({width: 0}, 1000)
  171.     });
  172.     var flag = 200;
  173.     $(".nav").find("li").on("mouseover", function () {
  174.         var $index = $(this).index();
  175.         $(".nav_bg").css({left: $index * flag + "px"})
  176.     });
  177.     /* $(".nav").find("li").hover(function () {
  178.      var $index = $(this).index();
  179.      $(".nav_bg").css({left: $index * flag + "px"})
  180.      },function(){
  181.      $(".nav_bg").css({left:0})
  182.      })*/
  183. </script>
  184. </html>

鼠标经过导航中li时，一个彩色模块跟着鼠标移动的更多相关文章

  1. colormap中的内嵌彩色模块和调用方式

    内嵌彩色模块代码: import numpy as npimport matplotlib.pyplot as plt # Have colormaps separated into categori ...

  2. 在Delphi中DBGrid有一个MouseMove事件,当鼠标移动时怎么知道光标在哪个单元格上面

    procedure TForm1.DBGrid1MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);var coords:TGr ...

  3. 问题1：鼠标指向导航栏li，但li中a样式未改变

    <!--HTML代码--><div class="nav-mid-left"> <ul> <li><a href=" ...

  4. JS-鼠标跟随块（一个小圆点跟着鼠标跑）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）

    界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...

  6. 使用 JavaScript 中的 document 对象查找 HTML 元素，实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时，按钮高亮显示；

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...

  7. JavaScript的事件对象中的特殊属性和方法（鼠标，键盘）

    鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...

  8. 一起来学Spring Cloud | 第一章 ：如何搭建一个多模块的springcloud项目

    在spring cloud系列章节中,本来已经写了几个章节了,但是自己看起来有些东西写得比较杂,所以重构了一下springcloud的章节内容,新写了本章节,先教大家在工作中如何搭建一个多模块的spr ...

  9. Python从内存中使用编译后的模块

    在Windows编程的时候,有些时候,我们经常会要使用一些非常规的方法,比如说从内存中加载DLL,然后使用DLL中的函数.于是就思索在用Python的时候是否能够将几个编译好的Pyc合并成一个,然后使 ...

随机推荐

  1. PCL点云库：ICP算法

    ICP(Iterative Closest Point迭代最近点)算法是一种点集对点集配准方法.在VTK.PCL.MRPT.MeshLab等C++库或软件中都有实现,可以参见维基百科中的ICP Alg ...

  2. Metasploit辅助模块

    msf > show auxiliary Auxiliary ========= Name                                                  Di ...

  3. 字段符号FIELD-SYMBOLS

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. Servlet&jsp基础：第三部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  5. 小C的故事（快速学C语言，，，极速版！）

    前几天这篇博客写了太多废话! 删啦~~. 本篇博客只是为chd A协的全嫩小鲜肉入门C语言的预科, 如果你在此处学习C语言, 不幸走火入魔, 小弱概不负责. //请直接随便找个C语言编译器,抄一下下面 ...

  6. DB2常识

    1.DB2组件 appendixa. db2 database product and packaging informatin一节AESE: 高级企业服务器版(Advanced enterprise ...

  7. FlexSlider插件的详细设置参数 http://www.woothemes.com/flexslider/ -----幻灯片插件

    $(window).load(function() { $('.flexslider').flexslider({ namespace: 'flex-', //控件的命名空间,会影响样式前缀 anim ...

  8. maven使用入门（pom）

    mvn clean complie mvn clean test mvn clean package mvn clean install(该任务将该项目输出的jar安装到了Maven本地仓库中) 各个 ...

  9. mysql概要（六）连接

    内连接 [join on / from 表1,表二 ]效果一样 区别是:可以理解为首先取得笛卡儿积后,再 内连接:取俩表的匹配数据: 左连接:取的俩表匹配数据,并且保留未匹配数据中左表的数据,右表数据 ...

  10. Java Socket编程----通信是这样炼成的

    Java最初是作为网络编程语言出现的,其对网络提供了高度的支持,使得客户端和服务器的沟通变成了现实,而在网络编程中,使用最多的就是Socket.像大家熟悉的QQ.MSN都使用了Socket相关的技术. ...