HTML5+jQuery寫的網頁懸浮菜單特效
2024-01-25 分類： 網站建設
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;
<!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寫的網頁懸浮菜單特效
文章出自：http://www.2m8n56k.cn/news48/315348.html
成都網站建設公司_創新互聯，為您提供品牌網站制作、微信小程序、動態網站、網站設計、全網營銷推廣、品牌網站設計
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
猜你還喜歡下面的內容
- 了解這些免費的SEO工具如何成為您的救星 2024-01-25
- 短信、郵件、微信外網頁可以通過成都微信小程序開發定制嗎？ 2024-01-25
- 美國獨立服務器的內存 2024-01-25
- 本地服務器機房和數據中心的優缺點 2024-01-25
- 微信怎么營銷？千篇一律太過時 2024-01-25
- 企業網站建設設計一個直擊用戶體驗的網站首頁的三個原則 2024-01-25
- 如何搭建不同的網站 2024-01-25
- 創新互聯|創業開一家網絡科技公司做網絡營銷如何賺錢盈利？ 2024-01-25
- 微信運營者必須具備的6大能力 2024-01-25
- 微信朋友圈營銷：七招教你搞定朋友圈內容營銷 2024-01-25
- 成都網站建設怎樣提高客戶體驗? 2024-01-25
- 成都360度全景展示很快會進入我們的生活 2024-01-25
- 成都外貿網站開發公司 2024-01-25
- 網站外包服務內容以及外包推廣的優勢 2024-01-25
- 十二個Dreamweaver鮮為人知的小秘訣 2024-01-25
- 成都app開發：看看殯葬業O2O！ 2024-01-25
- 企業服務咨詢公司網站設計幾個看似好心的錯誤(企業服務咨詢公司排名) 2024-01-25
- 企業官網如何進行網站設計 2024-01-25
- 開發小程序到底對商戶有哪些好處呢 2024-01-25