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

阅读  ·  发布日期 2017-12-27  ·  新乡网站建设
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>



  • 本文标题:HTML5+jQuery写的网页悬浮菜单特效
  • 本文链接:https://leyun.net.cn/news/sheji/2728.html

  • 更多有关新乡 网站建设网站设计网站制作网站优化微信营销开发营销型网站建设等互联网应用服务都可以联系我们! 点击联系乐云网络
    声明:本站部分文章信息来源于网络转载,只是出于传递更多信息之目的,并不意味赞同其观点或对其内容的真实性负责。版权归原作者所有,如有侵权请立即与我们联系,我们将及时处理。