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

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

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} .con {
margin: 20px auto;
width: 200px;
border: 1px solid #ccc;
position: relative
} .con_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-color: #000;
opacity: 0;
z-index: 10;
transition: all 1s linear 0s;
} .con_img {
width: 100%;
height: 200px;
overflow: hidden;
z-index: 1;
} .con img {
width: 100%;
transition: all 1s linear 0s;
} .con:hover img {
transform: scale(1.2)
} .con:hover .con_layer {
opacity: 0.5;
} .line {
margin: 60px auto;
border: 1px solid #fff;
width: 0;
} .para {
color: #fff;
margin: 40px auto;
text-align: center;
} .clearfix {
zoom: 1;
} .clearfix:after {
content: ".";
display: block;
width: 0;
height: 0;
clear: both;
visibility: hidden
} .nav {
background-color: #0099cc;
list-style: none;
position: relative;
z-index: 999
} .nav li {
float: left;
width: 200px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
transition: all 0.5s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-ms-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
} .nav li a {
display: block;
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
} .nav li:hover a {
font-weight: bold;
} .nav .nav_bg {
position: absolute;
left: 0;
top: 0;
background-color: #FF9900;
z-index: -1;
border-radius: 5px;
box-shadow: 0px 0px 4px #333
} .next {
padding: 0 20px;
width: 200px;
height: 36px;
margin: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background: red url("ico-bg.png") no-repeat center;
transition:all 1s linear 0s;
} .next:hover {
background:green url("ico-bg.png") no-repeat 200px center; }
</style>
</head>
<body>
<div class="con">
<div class="con_img">
<img src="1.jpg" alt=""/>
</div>
<div class="con_layer">
<div class="para">我是图文解说</div>
<div class="line"></div>
</div>
<p>
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
我是图文解说我是图文解说
</p>
</div>
<ul class="nav clearfix">
<li><a href="javascript:void (0);">111</a></li>
<li><a href="javascript:void (0);">222</a></li>
<li><a href="javascript:void (0);">333</a></li>
<li><a href="javascript:void (0);">444</a></li>
<li><a href="javascript:void (0);">555</a></li>
<li><a href="javascript:void (0);">666</a></li>
<li class="nav_bg"></li>
</ul>
<div class="next"></div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(".con").hover(function () {
$(".line").animate({width: "120px"}, 1000)
}, function () {
$(".line").animate({width: 0}, 1000)
});
var flag = 200;
$(".nav").find("li").on("mouseover", function () {
var $index = $(this).index();
$(".nav_bg").css({left: $index * flag + "px"})
});
/* $(".nav").find("li").hover(function () {
var $index = $(this).index();
$(".nav_bg").css({left: $index * flag + "px"})
},function(){
$(".nav_bg").css({left:0})
})*/
</script>
</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. UE4简单AI

    首先做个小小的声明把,由于俺之前也没接触过AI ,所以有一些专业的词汇可能翻译存在各种问题,如果你发现的话,还是希望能够提出来哦,我们一起进步. 记住配合视频食用更佳哦~ 视频连接:http://ww ...

  2. 【原文】前端程序员必须知道的高性能Javascript知识

    原文:前端程序员必须知道的高性能Javascript知识 想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...

  3. jquery之 on()方法

    原文地址:http://www.365mini.com/page/jquery-on.htm on()函数用于为指定元素的一个或多个事件绑定事件处理函数. 此外,你还可以额外传递给事件处理函数一些所需 ...

  4. 如何选择正确的DevOps工具

    坦白的讲:世界上没有哪种工具能够像DevOps这么神奇(或敏捷,或精益).DevOps在开发和运营团队之间建立了完美的合作与沟通,因此与其说这是一种神奇的工具,不如说是一种文化的转变. 然而,团队之间 ...

  5. Creating Dynamic LOV in Oracle D2k Forms

    Dynamic Lov is a good idea for the form where too many Lov requirement is there with different recor ...

  6. [SAP ABAP开发技术总结]IDoc

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

  7. [C和指针]第一部分

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

  8. poj 3304线段与直线相交

    http://poj.org/problem?id=3304 Segments Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: ...

  9. SQL SERVER赋权限

    --创建登录账户 use master GO EXEC sp_addlogin 'jacky', 'pwd' --EXEC sp_droplogin 'jacky' --删除登陆账户 use Test ...

  10. 个人博客作业_week2

    1. 是否需要有代码规范   1.这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率,浪费时间的东西. 我不同意这个论点.      有句俗语’无规矩不成方圆‘,这亘古传承的至理同样适用 ...