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. [C语言](*p)++与 ++(*p)与 *p++ 与 ++*p

    首先亮明个人观点,不要认为这样写都算写的不好,还强调大神一般不写这种代码,可读性不高 其实是你的C语言基础太差,读不懂,大神还真的就是这么写的.可以看看C语言库函数中的一些写法 *P++ :*和++都 ...

  2. Bootstrap_排版

    标题: Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体 ...

  3. 【leetcode❤python】101. Symmetric Tree

    #-*- coding: UTF-8 -*-# Definition for a binary tree node.# class TreeNode(object):#     def __init_ ...

  4. C#正则表达式获取组名，按照组名输出匹配内容

    最近写了个正则表达式匹配的工具,可以按照组名输出匹配内容,还是挺方便的,代码留存一下,以后用的话,直接copy了. Regex regex = new Regex(this.textBoxRegex. ...

  5. [python]实现单机版一行wordcount

    用过spark,对wordcount这个演示程序记忆犹新,于是想试着实现一个简单的wordcount.又因为在学习函数式编程,希望可以把数据看成一个整体,在现有的函数上进行操作.于是就有了这一行代码. ...

  6. 【原创分享】python获取乌云最新提交的漏洞，邮件发送

    #!/usr/bin/env python # coding:utf-8 # @Date : 2016年4月21日 15:08:44 # @Author : sevck (sevck@jdsec.co ...

  7. vimperator学习教程

    有人总是说Vim难学,而Vimperator把火狐变成了VIM,所以很多人就认为只有那些VIM的狂热者才会用这个插件,但实际上并不是这样.Vimperator在安装之后,只要稍加练习,就可以让我们的浏 ...

  8. Codeforces Round #379 (Div. 2) C. Anton and Making Potions 二分

    C. Anton and Making Potions time limit per test 4 seconds memory limit per test 256 megabytes input ...

  9. 转 C编译: 使用gdb调试

    C编译: 使用gdb调试   作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! gdb是the GNU Debugger的简称.它是 ...

  10. linux下文件系统类型的学习

    1. 以超级用户权限登陆Linux,进入  /lib/modules/2.6.32--504.el6.x86_64/kernel/fs目录执行 ls 命令(不同Linux发行版本的Fs目录有些不同你可 ...