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. UIView如何管理它的子视图

    UIView提供了很多建立和管理视图的方法. 1.添加视图 insertSubview:atIndex:   //放在子视图数组的具体索引位置 insertSubview:aboveSubview:  ...

  2. SAP ST03N工作负载的后台作业定义

    ST03N可以把SAP的运行情况的统计数据展现出来,根据这些数据可以进行性能的分析. 1.登录到000集团,定义作业SAP_COLLECTOR_FOR_PERFMONITOR,周期每个小时执行.作业内 ...

  3. V-rep学习笔记:机器人逆运动学数值解法(Damped Least Squares / Levenberg-Marquardt Method)

    The damped least squares method is also called the Levenberg-Marquardt method. Levenberg-Marquardt算法 ...

  4. oracle, create table, insufficient privileges

    SQL> exec pro_gz_day_report;          ORA-01031: insufficient privileges          ORA-06512: at & ...

  5. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  6. 数据词典与ABAP类型映射

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

  7. git :设置 object-c 的忽略文件

    使用 git 命令行来进行版本控制的时候, 需要设置忽略文件. 这里能找到所有语言的忽略文件的内容:https://github.com/github/gitignore OBJECT的忽略文件内容: ...

  8. yii CDbCriteria 类的总结

    在编程中,我们通常会需要查询些东西,但是通过查询的时候,yii有个集成的类--- CDbCriteria():通过该类,我们可以更加便捷的调用数据. 参考网址:http://www.cnblogs.c ...

  9. 2013 Multi-University Training Contest 1

    HDU-4605 Magic Ball Game 题意:给定一颗以1为根的数,每个节点要么有两个孩子节点,要么没有孩子,每个节点有一个重量,现在从节点1往下放置一个小球,根据小球和节点的重量的不同球落 ...

  10. E2 2014.08.05 更新日志

    增加功能 增加手机.平板兼容模块,用手机平板也能正常登陆和使用软件 介绍  演示 对数据库全面优化,全面提升数据量很大时统计分析的性能 完善功能 销售分析增加按商品分类分析 完善客户明细窗口的客户信息 ...