首页所有案例网站建设微信公众号开发电商视觉APP开发网络营销公司最新联系咨询

HTML5+jQuery写的网页悬浮菜单特效

2017年10月09日

HTML代码
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>实用网站右侧常驻悬浮导航菜单js特效代码</title>

</head>

<body>

<div class="box">

<a href='#'><span>0</span>Flash素材</a>

<a href='#'><span>1</span>菜单导航</a>

<a href='#'><span>2</span>时间日期</a>

<a href='#'><span>3</span>焦点图</a>

<a href='#'><span>4</span>tab标签</a>

<a href='#'><span>5</span>jquery特效</a>

<a href='#'><span>6</span>在线客服</a>

<a href='#'><span>7</span>广告代码</a>

<a href='#'><span>8</span>相册代码</a>

<a href='#'><span>9</span>图片特效</a>

<a href='#'><span>10</span>名站特效</a>

<a href='#'><span>11</span>视频播放</a>

<a href='#'><span>12</span>其他代码</a>

</div>

</body>

</html>

CSS代码
* {

margin:0;

padding:0;

list-style-type:none;

}

a, img {

border:0;

text-decoration:none;

}

body {

font:12px/180% Arial, Helvetica, sans-serif, "新宋体";

background:#DCDCDC;

}

.box {

position:fixed;

top:0;

right:0;

z-index:9999;

width:140px;

cursor:pointer;

margin:100px 0 0 0;

}

body{

background-image:url(about:blank);

background-attachment:fixed;

}

.box{

position:absolute;

top:expression(eval(document.documentElement.scrollTop));

}

.box a {

display:block;

position:relative;

height:30px;

line-height:30px;

margin-bottom:2px;

background:#fff;

padding-right:10px;

width:130px;

overflow:hidden;

color:#333;

cursor:pointer;

right:-110px;

}

.box a:hover {

text-decoration:none;

color:#1974A1;

}

.box a:hover span {

background:#5FA429

}

.box a span {

display:block;

float:left;

width:30px;

background:#636871;

color:#fff;

font-size:16px;

text-align:center;

margin-right:10px;

font-style:normal;

}

JS代码(需要引用Jquery1.1以上版本,百度下载直接放到网站根目录即可)
<script src="jquery文件></script>//本地没有的朋友百度下载直接放到网站根目录即可,把“jquery文件“ 替换成你的jquery文件名

<script type="text/javascript">

$(function() {

var timer = null;

$(".box").mouseenter(function() {

clearTimeout(timer);

var that = $(this);

timer = setTimeout(function() {

that.find("a").each(function(index,ele){

setTimeout(function(){

$(ele).stop().animate({right:0},200);

},50*index);

})

},200)

}).mouseleave(function() {

if(timer) {

clearTimeout(timer);

}

$(this).find("a").each(function(index,ele) {

setTimeout(function(){

$(ele).stop().animate({right:-110},200);

},50*index);

})

})

})

</script>

<script type="text/javascript">

function stops(){

return false;

}

document.oncontextmenu=stops;

</script>


本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!

标签: 网站设计公司 、 网站建设公司 、 网站制作 、 网站设计 、 网站建设 、 广州网站设计公 司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作

填写服务需求或选择下列套餐服务。

 创业版建站套餐 9800 经典版建站套餐 16800 豪华版建站套餐 26800> 微商城个性版 29800>

* 服务套餐价格会不定时变化,请认真填写需求信息,我们会在24小时内与您取得联系。

网站建设套餐

创业版9800元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
设计师+前端+程序
1个初稿方案(可修改1次)
15个工作日
金牌1对1服务(不接受面谈)
服务内容
1.5个页面设计,3屏=1页.
2.后台管理系统
3.新闻管理系统
4.产品管理系统
5.留言管理系统
6.在线客服
赠送内容
1.免费维护1年
2.SEO关键词设置
3.第三方流量统计

网站建设套餐

经典版16800元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
设计师+前端+程序
2个初稿方案(可修改2次)
20个工作日
金牌1对1全程上门服务
服务内容
1.10个页面设计,3屏=1页.
2.H5动效设计
2.后台管理系统
3.新闻管理系统
4.产品管理系统
5.招聘管理系统
6.留言管理系统
7.在线客服
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.1000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.SEO关键词设置
7.第三方流量统计

网站建设套餐

豪华版26800元

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
PC端+Pad+手机端
高级设计+高级前端+高级程序
3个初稿方案(可修改5次)
30个工作日
金牌1对1全程上门服务
服务内容
1.20个页面设计,3屏=1页.
2.H5动效设计
3.后台管理系统
4.新闻管理系统
5.产品管理系统
6.招聘管理系统
7.留言管理系统
8.基础会员功能
9.在线客服
10.第三方插件接入
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.2000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.SEO关键词优化指导
7.SEO关键词设置
8.第三方流量统计

微信商城套餐

微商城个性版 29800

网站类型
项目参与人员
提供初稿方案
项目所需时间
顾问服务内容
永久版微商城
高级设计+高级前端+高级程序
2个初稿方案
35个工作日
金牌1对1全程上门服务
服务内容
1.整套UI设计
2.会员管理
3.商品管理
4.订单管理
5.内容管理
6.广告管理
7.促销管理
8.报表统计
赠送内容
1.网站备案
2.COM/NET/CN域名1个
3.2000M虚拟空间
4.免费维护1年
5.微信公众号绑定
6.第三方流量统计
线上服务咨询020-82352603填写需求索取报价