jQuery背景跟随鼠标移动的网页导航

转载

mob604756f692f5 2015-06-08 09:17:00

文章标签 jquery .net 建站 css 鼠标移动 文章分类 jQuery 前端开发

jQuery背景跟随鼠标移动的网页导航

作者：网页模板大小：0.01MB 点击次数：421 发布时间：2014-07-26 13:14

分享到：0

特效介绍

jQuery背景跟随鼠标移动的网页导航_jquery 背景跟随鼠标移动的网页导航jQuery代码，导航的背景会跟着鼠标移动，并会动态的左右晃动，渐渐停止。

使用方法

1、JS代码：

`01`	`<script type=``"text/javascript"` `src=``"http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"``></script>`

`02`	`<script type=``"text/javascript"` `src=``"js/jquery.plugins.js"``></script>`

`03`	`<script type=``"text/javascript"``>`

`04`	`$(``function``() {`

`05`	`$(``".meun"``).lavaLamp({`

`06`	`fx:` `"backout"``,`

`07`	`speed: 700,`

`08`	`click:` `function``(event, menuItem) {`

`09`	`return` `true``;`

`10`	`}`

`11`	`});`

`12`	`});`

`13`	`</script>`

`14`	`<!--[``if` `lt IE 7]>`

`15`	`<style type=``"text/css"``>`

`16`	`.meun_bg{background:none!important; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=``'images/image87.png'``,sizingMethod=``'crop'``)}`

`17`	`</style>`

`18`	`<![endif]-->`

2、CSS代码：

查看代码

打印?

`01`	`<style type=``"text/css"``>`

`02`	`*{``margin``:``0``;``padding``:``0``;``list-style-type``:``none``;}`

`03`	`a,img{``border``:``0``;}`

`04`	`/* meun */`

`05`	`.meun{``position``:``relative``;``height``:``68px``;``width``:``967px``;``padding-left``:``13px``;``background``:``url``(images/meun_bg.png)` `no-repeat` `0` `8px``;``overflow``:``hidden``;``margin``:``40px` `auto``;}`

`06`	`.meun_bg{` `position``:``absolute``;``top``:``0px``;``left``:``0px``;``background``:``url``(images/image``87``.png)` `no-repeat``;``height``:``8px``;``width``:``980px``;``overflow``:``hidden``;}`

`07`	`.meun li{``float``:``left``;}`

`08`	`.meun li.back{``background``:``url``(images/meun_tab.png)` `no-repeat``;``padding-left``:``8px``;``height``:``68px``;``overflow``:``hidden``;``z-index``:``8``;``position``:``absolute``;}`

`09`	`.meun li.back .``left``{``background``:``url``(images/meun_tab.png)` `no-repeat` `right``0``;``height``:``68px``;``float``:``right``;``width``:``8px``;}`

`10`	`.meun li.back .arrow{``float``:``left``;``width``:``92%``;``height``:``68px``;``position``:``relative``;}`

`11`	`.meun li.back .arrow .``icon``{``position``:``absolute``;``top``:``56px``;``left``:``45%``;``background``:``url``(images/arrow.gif)` `no-repeat``;``height``:``5px``;``width``:``9px``;``overflow``:``hidden``;}`

`12`	`.meun li a{` `font-family``:``"微软雅黑"``,``"黑体"``;``text-decoration``:``none``;``color``:``#fff``;``font-size``:``18px``;``z-index``:``10``;``display``:``block``;``float``:``left``;``position``:``relative``;``overflow``:``hidden``;``padding``:``25px``33px` `0``;``height``:``43px``;}`

`13`	`.meun li a span{``cursor``:``pointer``;}`

`14`	`</style>`

3、HTML代码：

`01`	`<``div` `class``=``"meun"``>`

`02`	`<``div` `class``=``"meun_bg"``></``div``>`

`03`	`<``ul``>`

`04`	`<``li``><``a` `href``=``"http://www.5imoban.net/"``><``span``>首页</``span``></``a``></``li``>`

`05`	`<``li``><``a` `href``=``"http://www.5imoban.net/"``><``span``>jquery 特效</``span``></``a``></``li``>`

`06`	`<``li``><``a` `href``=``"http://www.5imoban.net/"``><``span``>javascript特效</``span``></``a``></``li``>`

`07`	`<``li` `class``=``"current"``><``a` `href``=``"http://www.5imoban.net/"``><``span``>网页模板</``span``></``a``></``li``>`

`08`	`<``li``><``a` `href``=``"http://www.5imoban.net/"``><``span``>div+css教程</``span``></``a``></``li``>`

`09`	`<``li``><``a` `href``=``"http://www.5imoban.net/"``><``span``>html5教程</``span``></``a``></``li``>`

`10`	`</``ul``>`

`11`	`</``div``>`

注：<li class="current">表示当前背景在哪里。例如，如果在首页，请在首页的li添加样式current。

本文标签：
网页导航jQuery代码

jQuery背景跟随鼠标移动的网页导航效果预览jQuery背景跟随鼠标移动的网页导航本地下载

顶

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

jQuery背景跟随鼠标移动的网页导航

jQuery背景跟随鼠标移动的网页导航

51CTO博客