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

jQuery背景跟随鼠标移动的网页导航
- 作者:网页模板
- 大小:0.01MB
- 点击次数:421
- 发布时间:2014-07-26 13:14
-
分享到:0
特效介绍
背景跟随鼠标移动的网页导航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代码
热门网页特效
热门PSD模板
热门CSS模板
热门网站源码
热门酷站欣赏
热门建站资源
热门建站教程
热门文章
- 网站声明
- 本网站内容如果没有注明出处,所有权均归本站,提供免费下载试用,但不得用于商业盈利。如果注明出处,则来自于互联网,本站不做商业用途。如果本站有内容侵犯到您的权益,请致函站长邮箱,本站当立即删除。
- E-Mail联系我们
我爱模板网 版权所有 皖ICP备13019395号 Copyright © 2013 5imoban.net All Rights Reserved.
jQuery背景跟随鼠标移动的网页导航的更多相关文章
- 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效
今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...
- HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...
- jQuery粘性跟随滚动条滚动的导航栏源代码下载
jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...
- 基于jQuery鼠标悬停上下滑动导航条
基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="menu2& ...
- JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
- [MFC]SDI在图片背景上实现文本跟随鼠标移动
SDI是单文档接口应用程序的简称.本文要实现的是在视图区域显示一张图片,然后在图片表层显示文字,并且文字跟随鼠标移动.思考一下,可以判断这个问题一共分为以下几个部分:1.显示图片:2.找到鼠标的位置: ...
- jQuery实际案例⑥——图片跟随鼠标、五角星评分案例
一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...
- html页面设置一个跟随鼠标移动的DIV(jQuery实现)
说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
随机推荐
- 使用PHP自动部署GIT代码
最近在使用Coding的代码托管,顺便设置了WebHook自动部署,过程还是挺艰辛的,主要还是没搞懂Linux的权限控制,不过好在弄好了,分享一下获益最深的一篇文章,供大家参考,原文是英文版的,我的英 ...
- sublime 控制台输入解决方案
下面的配置是通过konsole控制台自带的参数解决了sublime不能输入的问题,这种方式适合任何一种语言 { "cmd": ["konsole"," ...
- Dragon Balls--hdu3635(并查集)
Dragon Balls Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- angular 入门教程1
使用angularjs也有一年之久了.从初识angularjs时的激动和兴奋到现在淡定的使用,这其中也是有不少的心酸(刚用的时候和各种js插件的配合使用快把我弄疯了). 细想起来.用MVVM的这种js ...
- Data Mining 概念
数据挖掘概念: 数据挖掘是在大型数据库中.自动的发现有用信息的过程. 然. 这个有用只是一个感性的东西.比如我们从表中索引一行数据.这个算不上数据挖掘.因为它依赖的是数据的明显特征. 数据挖掘基本步骤 ...
- Esper
https://www.igvita.com/2011/05/27/streamsql-event-processing-with-esper/ http://torycatkin.iteye.com ...
- android 自定义AlertDialog(一段)
java: final AlertDialog dialog = new AlertDialog.Builder(mContext) .create(); dialog.setCancelable(f ...
- C based
switch(ch){case '\n': lines += 1; /*fail thru*/case ' ':case '\t': words += 1;default: c ...
- [C++ 2011 STL (VS2012 Update4) 源代码阅读系列(2)]熟悉一些宏定义和模版偏特化或叫模版专门化
[C++ 2011 STL (VS2012 Update4) 源代码阅读系列(2)]熟悉一些宏定义和模版偏特化或叫模版专门化 // point_test.cpp : 知识点练习和测试,用于单步调试,跟 ...
- 滚动视差效果——background-attachment
滚动视差效果的实现原理是在同一个页面上将页面元素分为多层,例如可以分为背景.内容.贴图层,在滚动页面的时候让三者滚动的速度不一,从而在人的视觉上能够形成一种立体的近似效果.最近在做一个项目wiki的时 ...