HTML5+jQuery寫的網(wǎng)頁懸浮菜單特效

2024-01-25 分類：網(wǎng)站建設(shè)

HTML代碼
<!DOCTYPE html>

<html>

<head>

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

<title>實用網(wǎng)站右側(cè)常駐懸浮導(dǎo)航菜單js特效代碼</title>

</head>

<body>

<div class="box">

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

<a href='#'><span>1</span>菜單導(dǎo)航</a>

<a href='#'><span>2</span>時間日期</a>

<a href='#'><span>3</span>焦點圖</a>

<a href='#'><span>4</span>tab標(biāo)簽</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以上版本，百度下載直接放到網(wǎng)站根目錄即可）
<script src="jquery文件></script>//本地沒有的朋友百度下載直接放到網(wǎng)站根目錄即可，把“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>

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

本文題目：HTML5+jQuery寫的網(wǎng)頁懸浮菜單特效
文章出自：http://chinadenli.net/news48/315348.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、微信小程序、動態(tài)網(wǎng)站、網(wǎng)站設(shè)計、全網(wǎng)營銷推廣、品牌網(wǎng)站設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

了解這些免費的SEO工具如何成為您的救星 2024-01-25
短信、郵件、微信外網(wǎng)頁可以通過成都微信小程序開發(fā)定制嗎？ 2024-01-25
美國獨立服務(wù)器的內(nèi)存 2024-01-25
本地服務(wù)器機房和數(shù)據(jù)中心的優(yōu)缺點 2024-01-25
微信怎么營銷？千篇一律太過時 2024-01-25
企業(yè)網(wǎng)站建設(shè)設(shè)計一個直擊用戶體驗的網(wǎng)站首頁的三個原則 2024-01-25
如何搭建不同的網(wǎng)站 2024-01-25

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

HTML5+jQuery寫的網(wǎng)頁懸浮菜單特效