jquery背景跟随鼠标滑动导航

本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考。具体如下:
运行效果截图如下:

具体代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="gb2312">
<title>左边跟随鼠标滑动导航</title>
<meta name="keywords" content="滑动导航" />
<meta name="description" content="左边跟随鼠标滑动导航" />
<style>
/*---------重置---------*/
html {
 font-size: 100%;
 -webkit-text-size-adjust:100%;
 -ms-text-size-adjust:100%;
*overflow:auto;
 _overflow-x:hidden;
}
body {
 margin:0;
}
p, ul, ol, form, dl, h1, h2, h3, h4, h5, h6 {
 margin-top:0;
 margin-bottom:0;
}
dl, dd {
 margin-left:0;
}
ul, ol {
 padding-left:0;
*margin-left:0;
 list-style-type: none;
}
ul li {
*zoom:1;
*vertical-align:bottom;
}
em, var, cite, i {
 font-style:normal;
}
small {
 font-size:inherit;
}
s, a {
 text-decoration:none;
}
:focus {
 outline:none;
}
blockquote, q {
 quotes:none;
 margin:0;
}
table {
 border-collapse:collapse;
 border-spacing:0;
 empty-cells:show;/*table-layout:fixed;*/
}
img, iframe {
 border:none;
}
img {
 vertical-align: top;
 -ms-interpolation-mode: bicubic;/*ie7防止图片缩小失真的*/
}
/*---------竖向菜单(非必需)---------*/
.bl-vernav li {
 border-bottom:1px solid #ddd;
 margin-bottom:-1px;
 padding-top:1px;
}
.bl-vernav a {
 display:block;
 height:20px;
 line-height:20px;
 padding:10px 16px;
}
.bl-vernav a:hover {
 background:#F8F8F8;
 text-decoration:none;
}
/*.bl-vernav .cur a{ background:#428BCA; color:#fff;}*/

.bl-vernav-ord {
 border:1px solid #ddd;
}
.vernav-level li li {
 border-left:none;
 border-right:none;
}
.vernav-level li li a {
 padding-left:40px;
}
.vernav-level .cur .one {
 background:#F8F8F8;
}
.vernav-level li .cur a {
 background:#F8F8F8;
}
/*diy*/
 .bl-vernav-wrap {
 position:relative;
}
.bl-vernav-wrap .sideLine {
 position:absolute;
 left:-6px;
 top:0;
 z-index:1;
 line-height:0;
 font-size:0;
 border-left:#FF5F3E solid 7px;
 background-color:#F8F8F8;
}
.bl-vernav {
 position:relative;
 z-index:2;
}
.bl-vernav a:hover {
 background-color:transparent;
}
.demobox {
 width:460px;
 font-size:14px;
 color:#333;
 font-family:'Hiragino Sans GB', 'Microsoft Yahei', "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, STHeiti;
}
a {
 color:#333;
 text-decoration:none;
}
</style>
</head>

<body>
<div class="demobox">
 <h1 class="h3">左边条纹跟随鼠标滑动导航</h1>
 <br/>
 <div class="bl-vernav-wrap">
  <div class="sideLine"></div>
  <ul class="bl-vernav vernav-level">
   <li><a href=#>

希望本文所述对大家学习jquery程序设计有所帮助。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型。改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize。 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改。效果图如下: Html代码如下: !doctype htmlhtml lang="zh-CN"head meta charset="utf-8" titlebanner图/title link
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。在WebSocket API中,浏览器和服务器只需要要做一个握手(handshaking)的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 WebSocket是一个通信的协议,分为服务器和客户端。服务器放在后台,保持与客户端的长连接,完成双方通信的任务。客户端一般都是实现在支持HTML5浏览器核心中,通过提供JavascriptAPI使用网页可以建立websocket连接。 在我写这
本文实例讲述了js鼠标点击图片切换效果实现代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: html代码: div id="menuWrapper" class="menuWrapper bg1" ul class="menu" id="menu" li class="bg1" a id="bg1" href=#> css代码: ul.menu li a{ float:left; width:265px; height:50px; margin-top:450px; text-a
如果希望自己的浏览器禁止运行网页上的 JavaScript 脚本的话,可以按照下面的方法将自己的浏览器设置一下: 【1】:打开 IE 浏览器,然后选择 【工具】-- 【Internet 选项】--【安全】--【自定义级别】然后在打开的窗体中向下拉滚动条,找到 "脚本" 选项,里面的第一项就是 Java 小程序脚本,选择下面三个选项中的"禁用"就可以了.如下图: 【2】:不过要注意,一旦将这一项禁用后,虽然可以提高了系统的安全性,但是网页的一些功能也会被屏蔽掉,比如,在你写的程序中有用 JavaScript
BootStrap学习从现在开始,前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter Bootstrap,建议你去了解一下。小编也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习。 bootstrap深受广大
随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能。 前言 一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对这本书的评价只有两个字犀利,可能是对javascript理
本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="utf-8"titleupload/titlelink rel="stylesheet" type="text/css" href=#> CSS代码: .upload-span{display:inline-block;width:120px;height:40px;color:#FFFFFF;text-alig

Bootstrap每天必学之简单入门 - 2015-11-21 14:11:49

在上一篇文章中主要是简单的介绍了一下Bootstrap,这篇文章进一步了解相关内容,为之后的学习打下基础。 从Visual Studio 2013前不久的更新中看,微软是将Bootstrap3的新版本加入到了VS当中,所以学习Bootstrap3也没什么顾虑了。 一、下载BootStrap 官网的文件很详细简单,对于下载来说也有多种方式。对于我们开发者来说,估计最简单的方式就是直接下载编译和压缩后的CSS、JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件。打开解压包之后可以发现包含三

Bootstrap每天必学之基础排版 - 2015-11-21 14:11:43

本次主要来了解的是排版,这个大部分在HTML的基本标签中也是存在的,所以相对比较简单,为了保证系列的完整性,也顺带复习下,还是记录一下。主要内容如下: 1.标题 2.页面主体 3.强调 4.缩略语 5.地址 6.引用 7.列表 一、标题 Html中的所有标题标签,从h1到h6均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。 div class="container" h1 class="page-header"标题/h1 h1h1. Bootstrap he
先给大家展示效果图: 在上篇文章给大家介绍 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室 ,本文继续介绍Node.js中使用socket创建私聊和公聊聊天室,具体详情请看下文吧。 nodejs的应用中,关于socket应该是比较出彩的了,socket.io在github上有几万人的star,它的成功应该是不输于express的,为了方便了解整个socket.io的使用. 例子请点击 http://chat.lovewebgames.com/ 源码下载 https://gith