Jquery仿FLASH实现孙悟空筋斗云式的动态菜单

最新推荐文章于 2022-03-29 01:23:54 发布
最新推荐文章于 2022-03-29 01:23:54 发布
阅读量155 收藏 1
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/webdm/archive/2011/06/23/2087813.html
版权

代码简介：

代码内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery仿FLASH实现孙悟空筋斗云式的动态菜单_网页代码站(www.webdm.cn)</title>
<style type=text/css>
  #respond INPUT#submit {
	BORDER-BOTTOM: #888888 1px solid; BORDER-LEFT: #888888 1px solid; BACKGROUND: #99cc33 0px 0px; COLOR: #ffffff; BORDER-TOP: #888888 1px solid; CURSOR: pointer; 

BORDER-RIGHT: #888888 1px solid
}
HTML {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BODY {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px;color:#DDD
}
H1 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H2 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H3 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H4 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H5 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
H6 {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
ADDRESS {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BLOCKQUOTE {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
DD {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
DL {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
HR {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}

FORM {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px;
}
UL {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
.resize {
	WIDTH: 500px; HEIGHT: 150px
}
.replybtn {
	BORDER-BOTTOM: #aaaaaa 1px solid; BORDER-LEFT: #aaaaaa 1px solid; PADDING-BOTTOM: 4px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; BACKGROUND: #e5f4fd 0px 0px; COLOR: 

#666666; BORDER-TOP: #aaaaaa 1px solid; FONT-WEIGHT: bold; BORDER-RIGHT: #aaaaaa 1px solid; PADDING-TOP: 4px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-

bottomright: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px
}
.topad {
	BORDER-BOTTOM: #f0f0f0 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #f0f0f0 1px solid; LINE-HEIGHT: 100px; WIDTH: 460px; BACKGROUND: #fcfcfc 0px 0px; HEIGHT: 100px; 

COLOR: #eaeaea; MARGIN-LEFT: 115px; FONT-SIZE: 1.6em; BORDER-TOP: #f0f0f0 1px solid; BORDER-RIGHT: #f0f0f0 1px solid
}
.postad {
	MARGIN-TOP: 12px
}
.postad A {
	WIDTH: 566px; DISPLAY: block; BACKGROUND: url(http://www.diymom.cn/image/oneqoo.gif) 0px 0px; HEIGHT: 90px
}
.postad A:hover {
	BACKGROUND: url(http://www.diymom.cn/image/oneqoo.gif) 0px -92px
}
.wp-caption {
	BORDER-BOTTOM: #dddddd 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #dddddd 1px solid; BACKGROUND-COLOR: #fbfbfb; MARGIN: 10px; BORDER-TOP: #dddddd 1px solid; 

BORDER-RIGHT: #dddddd 1px solid; PADDING-TOP: 4px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-topleft: 3px; -moz-border-

radius-topright: 3px
}
.aligncenter {
	DISPLAY: block; MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}
DL.aligncenter {
	DISPLAY: block; MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}
.wp-caption-text {
	TEXT-ALIGN: center; PADDING-BOTTOM: 9px; PADDING-LEFT: 9px; PADDING-RIGHT: 9px; FONT-SIZE: 12px; PADDING-TOP: 9px
}
#comments IMG {
	BORDER-BOTTOM: #dcdcdc 1px solid; BORDER-LEFT: #dcdcdc 1px solid; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND: #fafafa 0px 0px; BORDER-

TOP: #dcdcdc 1px solid; BORDER-RIGHT: #dcdcdc 1px solid; PADDING-TOP: 3px
}
HTML {
	FONT-SIZE: 62.5%
}
BODY {
	LINE-HEIGHT: 1.8em; FONT-FAMILY: "微软雅黑","Microsoft YaHei",Verdana,arial,helvetica,sans-serif; BACKGROUND: #000000; FONT-SIZE: 1.2em
}
H1 {
	MARGIN: 0px
}
H2 {
	MARGIN: 0px
}
H3 {
	MARGIN: 0px
}
H4 {
	MARGIN: 0px
}
H5 {
	MARGIN: 0px
}
H6 {
	MARGIN: 0px
}
H1 {
	FONT-SIZE: 2em
}
H2 {
	FONT-SIZE: 1.8em
}
H3 {
	BORDER-BOTTOM: #eeeeee 1px solid; MARGIN-BOTTOM: 12px; COLOR: #80be06; FONT-SIZE: 1.4em
}
H4 {
	BORDER-BOTTOM: #eeeeee 1px solid; MARGIN-TOP: 13px; COLOR: #99cc33; FONT-SIZE: 1.4em
}
H5 {
	FONT-SIZE: 1.3em
}
H6 {
	FONT-SIZE: 1.2em
}
A {
	COLOR: #598d32; TEXT-DECORATION: none
}
A:hover {
	COLOR: #80be06; TEXT-DECORATION: none
}
A IMG {
	BORDER-BOTTOM: medium none; POSITION: relative; BORDER-LEFT: medium none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 

medium none; BORDER-RIGHT: medium none; PADDING-TOP: 0px
}
UL {
	LIST-STYLE: none none outside
}
UL LI {
	
}
A.more-link {
	
}

sidebar UL.sidebar UL.p {
	PADDING-BOTTOM: 0.6em; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0.2em
}
CODE {
	FONT-FAMILY: "微软雅黑","Microsoft YaHei",Verdana,"Courier New",Courier,monospace
}
BLOCKQUOTE {
	BORDER-LEFT: #dddddd 4px solid; MARGIN: 1em 0px 0px; BACKGROUND: #f5f5f5 0px 0px
}
BLOCKQUOTE P {
	PADDING-BOTTOM: 1em; PADDING-LEFT: 1em; PADDING-RIGHT: 1em; PADDING-TOP: 1em
}
BLOCKQUOTE BLOCKQUOTE {
	MARGIN: 0px 1em; WIDTH: auto; BACKGROUND: #ffffff 0px 0px; FLOAT: none
}
DD {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 2em; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
FORM {
	FONT-FAMILY: "微软雅黑","Microsoft YaHei",Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px
}
INPUT {
	FONT-FAMILY: "微软雅黑","Microsoft YaHei",Verdana,Arial,Helvetica,sans-serif
}
TEXTAREA {
	FONT-FAMILY: "微软雅黑","Microsoft YaHei",Verdana,Arial,Helvetica,sans-serif
}
P IMG {
	BORDER-BOTTOM: #dcdcdc 1px solid; BORDER-LEFT: #dcdcdc 1px solid; PADDING-BOTTOM: 8px; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; MAX-WIDTH: 100%; BACKGROUND: #fafafa 

0px 0px; BORDER-TOP: #dcdcdc 1px solid; BORDER-RIGHT: #dcdcdc 1px solid; PADDING-TOP: 8px
}
IMG.centered {
	DISPLAY: block; MARGIN-LEFT: auto; MARGIN-RIGHT: auto
}
IMG.alignright {
	BORDER-BOTTOM: #ededed 1px solid; BORDER-LEFT: #ededed 1px solid; PADDING-BOTTOM: 4px; MARGIN: 3px 0px 2px 10px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; DISPLAY: 

inline; BORDER-TOP: #ededed 1px solid; BORDER-RIGHT: #ededed 1px solid; PADDING-TOP: 4px
}
IMG.alignleft {
	BORDER-BOTTOM: #ededed 1px solid; BORDER-LEFT: #ededed 1px solid; PADDING-BOTTOM: 4px; MARGIN: 3px 10px 2px 0px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; DISPLAY: 

inline; BORDER-TOP: #ededed 1px solid; BORDER-RIGHT: #ededed 1px solid; PADDING-TOP: 4px
}
.alignleft {
	FLOAT: left
}
.alignright {
	FLOAT: right
}
.clear {
	PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; CLEAR: both; PADDING-TOP: 0px
}
SMALL {
	FONT-SIZE: 11px
}
.small {
	FONT-SIZE: 11px
}
.xsmall {
	COLOR: #8f8f8f; FONT-SIZE: 10px
}
.lavaLamp {
	POSITION: relative; BACKGROUND-COLOR: white; FLOAT: left
}
.lavaLamp LI {
	TEXT-ALIGN: center; LINE-HEIGHT: 34px; LIST-STYLE-TYPE: none; WIDTH: 83px; FLOAT: left
}
.lavaLamp LI.back {
	Z-INDEX: 1; POSITION: absolute; WIDTH: 9px; BACKGROUND: url(http://www.webdm.cn/images/20100919/bgtab.gif) no-repeat 0px 0px; HEIGHT: 42px
}
.lavaLamp LI A {
	Z-INDEX: 2; POSITION: relative; FONT-VARIANT: small-caps; WIDTH: 84px; DISPLAY: block; HEIGHT: 42px; COLOR: #555555; FONT-SIZE: 1.2em; TEXT-DECORATION: none
}
.lavaLamp LI A:hover {
	COLOR: #ffffff
}
.lavaLamp LI.current-cat A {
	COLOR: darkgreen
}
.post {
	BORDER-BOTTOM: #eeeeee 1px solid; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; MARGIN-BOTTOM: 16px; BORDER-TOP: 

#eeeeee 1px solid; BORDER-RIGHT: #eeeeee 1px solid; PADDING-TOP: 20px
}
.post H2 {
	CLEAR: both
}
.post H2 A {
	FONT-FAMILY: "微软雅黑","Microsoft YaHei",Verdana,Geneva,Arial,Helvetica,sans-serif; COLOR: #80be06; FONT-SIZE: 24px
}
.post H2 A:hover {
	COLOR: #eeeeee; TEXT-DECORATION: none
}
.post UL LI {
	LINE-HEIGHT: 15px; MARGIN-BOTTOM: 5px; HEIGHT: 15px; FONT-SIZE: 13px; PADDING-TOP: 5px
}
.post UL LI A {
	PADDING-LEFT: 21px; DISPLAY: block; BACKGROUND: url(http://www.webdm.cn/images/20100919/bullet.gif) no-repeat 0px 0px
}
.post UL LI A:hover {
	BACKGROUND: url(http://www.webdm.cn/images/20100919/bullet.gif) no-repeat 0px -15px; FONT-WEIGHT: bold
}
.entry-date {
	MARGIN: 10px 0px; COLOR: #757575; FONT-SIZE: 12px
}
.entry-meta {
	COLOR: #757575; MARGIN-LEFT: 20px; FONT-SIZE: 0.9em
}
.entry-content {
	MARGIN: 10px
}
#comments-display {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 0px
}
#comments OL {
	PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: decimal; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#comments OL LI {
	BORDER-BOTTOM: #eeeeee 1px solid; PADDING-BOTTOM: 3px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; MARGIN-BOTTOM: 10px; BACKGROUND: #fafafa 0px 0px; PADDING-TOP: 3px
}
#comments SPAN.comment-author {
	FONT-SIZE: 16px
}
H4#comments-count {
	
}
.comment-left {
	TEXT-ALIGN: right; COLOR: #888888
}
.comment-right {
	
}
#respond {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px
}
#wrapper {
	TEXT-ALIGN: left; WIDTH: 985px; height:42px;clear:both;BACKGROUND: #ffffff 0px 0px;
}
#top {
	PADDING-BOTTOM: 0px; MARGIN: 0px 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; CLEAR: both; PADDING-TOP: 0px
}
#topleft {
	MARGIN: 10px 0px; PADDING-LEFT: 15px; WIDTH: 358px; FLOAT: left; HEIGHT: 100px
}
H1#sitename {
	MARGIN: 0px; PADDING-TOP: 30px
}
H1#sitename A {
	FONT-FAMILY: "微软雅黑","Microsoft YaHei",Verdana,"Myriad Web","Myriad Pro",Myriad,Arial,Helvetica,sans-serif; COLOR: #80be06; FONT-SIZE: 1.5em; TEXT-DECORATION: 

none
}
H1#sitename A:hover {
	COLOR: #666666
}
#topleft P {
	PADDING-BOTTOM: 0px; MARGIN-TOP: 1px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-FAMILY: "微软雅黑","Microsoft YaHei",Verdana,"Myriad Web","Myriad 

Pro",Myriad,Arial,Helvetica,sans-serif; FLOAT: right; COLOR: #222222; FONT-SIZE: 16px; PADDING-TOP: 0px
}
#topright {
	WIDTH: 966px; BACKGROUND: #80be06 0px 0px; FLOAT: left
}
UL#categories {
	TEXT-ALIGN: right; LINE-HEIGHT: 14px; PADDING-RIGHT: 16px
}
UL#categories B {
	DISPLAY: inline; COLOR: #696969
}
UL#categories LI {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: inline; PADDING-TOP: 0px
}
UL#categories UL {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: inline; PADDING-TOP: 0px
}
UL#categories A {
	FONT-SIZE: 1em; FONT-WEIGHT: normal; TEXT-DECORATION: none
}
UL#categories A:hover {
	COLOR: #000000
}
#search {
	TEXT-ALIGN: right; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND: #80be06 0px 0px; FLOAT: right; PADDING-TOP: 3px
}
#search INPUT#s {
	BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; WIDTH: 160px; FLOAT: left; HEIGHT: 19px; COLOR: #666666; FONT-SIZE: 13px; BORDER-TOP: #ffffff 1px 

solid; BORDER-RIGHT: #ffffff 1px solid
}
#search INPUT#searchsubmit {
	BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: #80be06 0px 0px; FLOAT: 

left; HEIGHT: 23px; COLOR: #ffffff; BORDER-TOP: #ffffff 1px solid; CURSOR: pointer; BORDER-RIGHT: #ffffff 1px solid; PADDING-TOP: 0px
}
#header {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; CLEAR: both; PADDING-TOP: 0px
}
#homecontent {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; CLEAR: both; PADDING-TOP: 0px
}
#container {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; CLEAR: both; PADDING-TOP: 0px
}
#headerleft {
	WIDTH: 639px; BACKGROUND: #eeeeee 0px 0px; FLOAT: left; HEIGHT: 242px; COLOR: #ffffff; OVERFLOW: hidden
}
#headerleft A.readmore {
	COLOR: #ffffff; FONT-WEIGHT: normal; TEXT-DECORATION: none
}
#headerleft A.readmore:hover {
	COLOR: #ffffff; TEXT-DECORATION: none
}
A.readmore {
	TEXT-DECORATION: none
}
A.readmore:hover {
	TEXT-DECORATION: none
}
#headerleft UL {
	PADDING-BOTTOM: 30px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px
}
#topnews_rightnarrow {
	WIDTH: 300px
}
.topnews-meta {
	PADDING-BOTTOM: 20px; COLOR: #696969; FONT-SIZE: 10px
}
.topnews-meta A {
	FONT-SIZE: 1.2em; FONT-WEIGHT: normal; TEXT-DECORATION: none
}
.topnews-meta A:hover {
	TEXT-DECORATION: none
}
.topnews-excerpt {
	HEIGHT: 120px; OVERFLOW: hidden
}
H2#topnews-title A {
	FONT-FAMILY: "微软雅黑","Microsoft YaHei",Verdana,Geneva,Arial,Helvetica,sans-serif; COLOR: #ffffff; FONT-SIZE: 24px
}
#headerright {
	WIDTH: 320px; MARGIN-BOTTOM: 16px; FLOAT: right
}
#featured {
	PADDING-BOTTOM: 16px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; CLEAR: both; FONT-SIZE: 1em; PADDING-TOP: 0px
}
#featured A:hover {
	TEXT-DECORATION: none
}
#featured .box {
	BORDER-BOTTOM: #ebebeb 1px solid; BACKGROUND: #ffffff 0px 0px; BORDER-TOP: #ebebeb 1px solid; BORDER-RIGHT: #ebebeb 1px solid
}
#featured H2 {
	LINE-HEIGHT: 1.2em; MARGIN: 0px; FONT-SIZE: 1.4em
}
#featured P {
	LINE-HEIGHT: 1.6em; MARGIN: 0px; COLOR: #000000; FONT-SIZE: 1.2em; PADDING-TOP: 0px
}
.featuredleft {
	POSITION: absolute
}
.featuredright {
	POSITION: absolute; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 209px; PADDING-RIGHT: 0px; DISPLAY: block; COLOR: #262626; FONT-SIZE: 1em; FONT-WEIGHT: normal; 

PADDING-TOP: 0px; LEFT: 454px; opacity: 0.9
}
.featuredright A {
	TEXT-DECORATION: none
}
.featuredright A:hover {
	TEXT-DECORATION: none
}
#featured UL {
	LIST-STYLE: none none outside; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#featured UL LI {
	POSITION: relative; BORDER-LEFT: #ebebeb 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 10px; WIDTH: 50px; PADDING-RIGHT: 10px; DISPLAY: 

block; FLOAT: left; HEIGHT: 322px; OVERFLOW: hidden; CURSOR: pointer; PADDING-TOP: 10px
}
#featured UL LI DIV {
	TEXT-ALIGN: justify; DISPLAY: block
}
#featured .block1 {
	WIDTH: 659px
}
#homeleft {
	WIDTH: 629px; FLOAT: left
}
#content {
	WIDTH: 629px; FLOAT: left
}
#homeleft P {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0.2em
}
.bread {
	POSITION: absolute; TEXT-ALIGN: center; PADDING-BOTTOM: 0px; MARGIN: -13px 0px 0px 15px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; DISPLAY: block; FLOAT: left; COLOR: 

#555555; FONT-SIZE: 1.1em; PADDING-TOP: 0px
}
.bread P {
	PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FLOAT: left; FONT-SIZE: 1.3em; FONT-WEIGHT: bold; PADDING-TOP: 0px
}
#homeleft H4 {
	TEXT-ALIGN: center; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #ffffff; MARGIN-TOP: -18px; PADDING-LEFT: 8px; WIDTH: 121px; PADDING-RIGHT: 8px; DISPLAY: block; MARGIN-

BOTTOM: 0px; FLOAT: right; FONT-SIZE: 1.4em; PADDING-TOP: 0px
}
#homeleft H4 A {
	COLOR: #555555; FONT-WEIGHT: bold
}
#homeleft H4 A:hover {
	COLOR: #80be06; TEXT-DECORATION: none
}
#homeleft H2 {
	FONT-FAMILY: "微软雅黑","Microsoft YaHei",Verdana,Geneva,Arial,Helvetica,sans-serif; FLOAT: none; FONT-SIZE: 17px
}
#homeleft .date {
	PADDING-LEFT: 200px; BACKGROUND: url(http://www.webdm.cn/images/20100919/comment.gif) no-repeat 185px 6px; COLOR: #666666; FONT-SIZE: 11px
}
#homeleft UL LI {
	BORDER-BOTTOM: #eeeeee 1px solid; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; MARGIN: 0px 0px 16px; PADDING-LEFT: 10px; WIDTH: 608px; PADDING-RIGHT: 10px; 

BACKGROUND: #ffffff 0px 0px; HEIGHT: 131px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #eeeeee 1px solid; PADDING-TOP: 10px
}
UL#cat-excerpts {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#homeright {
	WIDTH: 320px; FLOAT: right
}
#footer {
	PADDING-BOTTOM: 5px; MARGIN: 0px 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #80be06 0px 0px; COLOR: #ffffff; CLEAR: both; PADDING-TOP: 5px
}
#footer A {
	COLOR: #ffffff; FONT-WEIGHT: normal; TEXT-DECORATION: none
}
#footer A:hover {
	COLOR: #333333; TEXT-DECORATION: none
}
.sidebar {
	WIDTH: 320px; FLOAT: right
}
.sidebar UL.sidebar {
	LIST-STYLE: none none outside; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 16px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-SIZE: 1.2em; PADDING-TOP: 0px
}
.sidebar UL.sidebar LI {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; COLOR: #666; PADDING-TOP: 0px
}
.sidebar UL.sidebar H2 {
	POSITION: absolute; TEXT-ALIGN: center; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #ffffff; MARGIN-TOP: -20px; PADDING-LEFT: 8px; WIDTH: 120px; PADDING-RIGHT: 8px; 

DISPLAY: block; FLOAT: left; COLOR: #555555; FONT-SIZE: 1.1em; PADDING-TOP: 0px
}
.sidebar UL.sidebar UL {
	PADDING-BOTTOM: 0px; MARGIN-TOP: 2px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
.sidebar UL.sidebar LI {
	BORDER-BOTTOM: #eeeeee 1px solid; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-LEFT: 10px; WIDTH: 93%; PADDING-RIGHT: 10px; 

BACKGROUND: #ffffff 0px 0px; FLOAT: left; FONT-SIZE: 12px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #eeeeee 1px solid; PADDING-TOP: 10px
}
.sidebar UL.sidebar UL LI {
	BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 15px; PADDING-LEFT: 0px; WIDTH: 50%; PADDING-RIGHT: 0px; MARGIN-BOTTOM: 5px; FLOAT: left; 

HEIGHT: 15px; COLOR: #80be06; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px
}
.sidebar UL.sidebar UL LI A {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 24px; PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND: url(http://www.webdm.cn/images/20100919/bullet.gif) no-repeat 0px 0px; 

PADDING-TOP: 0px
}
.sidebar UL.sidebar UL LI A:hover {
	BACKGROUND: url(http://www.webdm.cn/images/20100919/bullet.gif) no-repeat 0px -15px
}
#fragment-1 UL LI {
	
}
UL.ui-tabs-nav {
	LIST-STYLE: none none outside; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url

(http://www.webdm.cn/images/20100919/grey.png) repeat-x left bottom; PADDING-TOP: 0px
}
UL.ui-tabs-nav LI {
	BORDER-BOTTOM: #efefef 1px solid; BORDER-LEFT: #efefef 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 17px; PADDING-RIGHT: 17px; BACKGROUND: #fafafa 0px 0px; FLOAT: 

left; HEIGHT: 30px; BORDER-TOP: #efefef 1px solid; FONT-WEIGHT: bold; BORDER-RIGHT: #efefef 1px solid; PADDING-TOP: 0px
}
UL.ui-tabs-nav LI.ui-tabs-selected {
	BORDER-BOTTOM: #ffffff 1px solid; BORDER-LEFT: #ebebeb 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 26px; PADDING-RIGHT: 26px; BACKGROUND: #ffffff 0px 0px; 

BORDER-TOP: #ebebeb 1px solid; BORDER-RIGHT: #ebebeb 1px solid; PADDING-TOP: 0px
}
.ui-tabs-hide {
	DISPLAY: none
}
.ui-tabs-nav:after {
	DISPLAY: block; CLEAR: both; CONTENT: " "
}
.ui-tabs-nav A {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; FLOAT: left; PADDING-TOP: 0px
}
.ui-tabs-nav A SPAN {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; FLOAT: left; PADDING-TOP: 0px
}
.ui-tabs-nav A {
	MARGIN: 4px; OUTLINE-STYLE: none; PADDING-LEFT: 0px; OUTLINE-WIDTH: 0px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
.ui-tabs-nav A:link {
	COLOR: #aaaaaa
}
.ui-tabs-nav A:visited {
	COLOR: #aaaaaa
}
.ui-tabs-nav .ui-tabs-selected A {
	Z-INDEX: 2; POSITION: relative
}
.ui-tabs-nav .ui-tabs-selected A:link {
	COLOR: #598d32; FONT-SIZE: 14px; CURSOR: text; FONT-WEIGHT: bold
}
.ui-tabs-nav .ui-tabs-selected A:visited {
	COLOR: #598d32; FONT-SIZE: 14px; CURSOR: text; FONT-WEIGHT: bold
}
.ui-tabs-nav .ui-tabs-disabled A:link {
	COLOR: #598d32; FONT-SIZE: 14px; CURSOR: text; FONT-WEIGHT: bold
}
.ui-tabs-nav .ui-tabs-disabled A:visited {
	COLOR: #598d32; FONT-SIZE: 14px; CURSOR: text; FONT-WEIGHT: bold
}
.ui-tabs-nav A:hover {
	CURSOR: pointer
}
.ui-tabs-nav A:focus {
	CURSOR: pointer
}
.ui-tabs-nav A:active {
	CURSOR: pointer
}
.ui-tabs-nav .ui-tabs-unselect A:hover {
	CURSOR: pointer
}
.ui-tabs-nav .ui-tabs-unselect A:focus {
	CURSOR: pointer
}
.ui-tabs-nav .ui-tabs-unselect A:active {
	CURSOR: pointer
}
.ui-tabs-panel {
	BORDER-BOTTOM: #ebebeb 1px solid; BORDER-LEFT: #ebebeb 1px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; HEIGHT: 170px; OVERFLOW: hidden; 

BORDER-TOP: #ebebeb; BORDER-RIGHT: #ebebeb 1px solid; PADDING-TOP: 10px
}
.ui-tabs-panel UL {
	BACKGROUND: #ffffff 0px 0px
}
.ui-tabs-panel LI {
	LINE-HEIGHT: 15px; WIDTH: 50%; MARGIN-BOTTOM: 11px; FLOAT: left; HEIGHT: 15px; FONT-SIZE: 13px; OVERFLOW: hidden
}
.ui-tabs-panel LI A {
	PADDING-LEFT: 20px; WIDTH: 80%; DISPLAY: block; BACKGROUND: url(http://www.webdm.cn/images/20100919/bullet.gif) no-repeat 0px 0px
}
.ui-tabs-panel LI A:hover {
	BACKGROUND: url(http://www.webdm.cn/images/20100919/bullet.gif) no-repeat 0px -15px; FONT-WEIGHT: bold
}
* HTML .ui-tabs-nav {
	DISPLAY: inline-block
}
:first-child + HTML .ui-tabs-nav {
	DISPLAY: inline-block
}
.topnews_image {
	WIDTH: 174px; FLOAT: left; MARGIN-RIGHT: 10px
}
.featured_image {
	POSITION: absolute; WIDTH: 430px; HEIGHT: 322px
}
.postnav {
	PADDING-BOTTOM: 3px; PADDING-LEFT: 10px; WIDTH: 607px; PADDING-RIGHT: 10px; MARGIN-BOTTOM: 16px; FLOAT: left; COLOR: #666666; FONT-SIZE: 1.2em; FONT-WEIGHT: bold; 

PADDING-TOP: 3px
}
.prev {
	FLOAT: left
}
.next {
	FLOAT: right
}
.note {
	LINE-HEIGHT: 30px; FLOAT: left; HEIGHT: 30px; COLOR: #ffffff; MARGIN-LEFT: 10px; FONT-SIZE: 13px; OVERFLOW: hidden
}
.note A {
	COLOR: #ffffff; FONT-WEIGHT: bold
}
  
</style>
<SCRIPT type=text/javascript src="http://www.webdm.cn/images/20100919/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://www.webdm.cn/images/20100919/lavalamp.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://www.webdm.cn/images/20100919/webdm.js"></SCRIPT>
<SCRIPT type=text/javascript>
$(function(){$(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</SCRIPT>

</head>
<body style="text-align:center"><br><br>

<DIV id=wrapper>
<UL class=lavaLamp>
  <LI><A href="#">家门口</A></LI>
  <LI><A href="#">DIY不累</A></LI>
  <LI><A href="#">享家生活</A></LI>
  <LI><A href="#">家教无法</A></LI>
  <LI><A href="#">杂七杂八</A></LI>
  <LI><A href="#">童心童乐</A></LI>
  <LI><A href="#">翻翻衣橱</A></LI>
  <LI><A href="#">留言板</A></LI>
  <LI><A href="#">门牌号</A></LI>
</UL>
<A title="Rss Feed" href="http://www.webdm.cn/"><IMG style="FLOAT: right" src="http://www.webdm.cn/images/20100919/RSS_icons.png"></A>
</DIV>
<p></p>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/cbd34b22-6570-485e-94f9-574e4f1ff3bd.html

转载于:https://www.cnblogs.com/webdm/archive/2011/06/23/2087813.html

weixin_34018202
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
菜单栏筋斗云效果
一笑的博客
10-13 990
鼠标经过的时候，利用offsetLeft获得当前盒子距离左侧的距离，把这个值赋给缓动动画的end值。 当点击的时候记住当前的offsetLeft值，当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值。<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <
用JQuery实现筋斗云特效
06-11
这个不错啊。可以实现菜单栏中的背景提示.就是导航栏中的
横向滚动(筋斗云特效)jQuery导航代码
09-20
横向滚动(筋斗云特效)jQuery导航代码 比较简单。
jquery实现的精美个性筋斗云动态菜单
01-23
jquery实现的精美个性筋斗云动态菜单
jquery仿FLASH筋斗云动态菜单.zip
07-04
jquery仿FLASH筋斗云动态菜单是一款基于jquery实现的鼠标滑过跟随的类似flash动画菜单特效。
筋斗云效果
a63438840的博客
07-24 172
布局 div.nav > span.#cloud div.nav> ul >li 案例分析： ①鼠标经过某个小 li ，筋斗云跟着到当前小 li 位置 ②鼠标离开某个小 li , 筋斗云复原为原来的位置 ③鼠标点击了某个小 li ，筋斗云就会留在点击这个小 li 的位置 ④利用动画函数做动画效果，原先筋斗云的起始位置是0， ⑤鼠标经过某个小 l...
jquery仿FLASH筋斗云动态菜单特效代码
03-20
jquery仿FLASH筋斗云动态菜单是一款基于jquery实现的鼠标滑过跟随的类似flash动画菜单特效。
仿Flash效果，jquery实现的筋斗云动态菜单。
05-20
仿Flash效果，jquery实现的筋斗云动态菜单。
jQuery 实现仿Flash的卡通筋斗云动感菜单
05-16
内容索引:脚本资源,jQuery,仿Flash,筋斗云,jQuery动画菜单　jQuery 实现卡通筋斗云动感菜单，仿Flash动画的效果，简要解析一下，用一张背景透明的图片实现了筋斗云人模样，然后用jquery控件这片云彩响应鼠标焦点并做...
导航栏筋斗云特效
Surpass-oneself的博客
04-24 1127
这个导航栏的效果非常简单是，在鼠标经过的时候，筋斗云会在导航中运动，一旦鼠标点击之后，筋斗云会停止在导航栏上。分析解觉思路：      思路首先获取元素 再次，有个鼠标onmouseover事件和onclick事件 最后是 onmouseout事件遍历 lis然后 执行 onmouseover事件 事件处理的过程中我们需要那些数据，一是存储鼠标经过的位置 二是存储鼠标离开的位置 最后是鼠标点击的位...
【前端】javascript实现导航栏筋斗云效果特效
weixin_30788239的博客
10-29 343
实现效果： 　　实现效果如下图所示 实现原理： 什么是筋斗云效果： 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。 实现思路： 鼠标经过的时候，利用offsetLeft获得当前盒子距离左侧的距离，把这个值赋给缓动动画的end值。 当点击的时候记住当前的offsetLeft值，当鼠标经过的时候把之前点击的offsetLeft给现在经过...
css筋斗云,JavaScript实现精美个性导航栏筋斗云效果
weixin_34112399的博客
08-04 464
实现效果：实现效果如下图所示实现原理：什么是筋斗云效果：•这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。实现思路：•鼠标经过的时候，利用offsetLeft获得当前盒子距离左侧的距离，把这个值赋给缓动动画的end值。•当点击的时候记住当前的offsetLeft值，当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值。实现代码：下面是实现代码以及详细注...
js实现筋斗云效果
车联网开发的博客
08-12 2305
理解缓动动画的原理 &lt;!DOCTYPE html&gt; &lt;!--create by ydj on 2018-08-12--&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;筋斗云&lt;/title&gt; &lt;style&gt;
筋斗云导航,绝对能用，不能用你打我
zuoyou9461的博客
03-29 223
纯Html+CSS+jQ 缓动-动画——筋斗云导航 CV工程师，拿来即用（^0*0^）
jQuery实现百度导航li拖放排列效果，即时更新数据库
weixin_34309543的博客
07-26 76
index.php中 var autoSave = false; 控制不自动提交。 index.php &lt;?php require 'db.php'; $query = "SELECT `id`,`order`,`name` FROM `limove` ORDER BY `order`"; $lis = mysql_query($query,$conn)...
jQuery简单实现导航栏根据滑动自动悬浮效果
任鹏鹏博客
09-15 8903
jQuery简单实现导航栏根据滑动自动悬浮效果 今天在网上看一些别人的一些网站，都觉得很厉害，写插件什么的，无意间看到一款基于插件为导航栏自动悬浮插件，当时看到之后觉得挺简单，然后便自己也开始试着写了一下。 主要用处就是一个导航栏本来是固定的，没有自动悬浮在网站的最顶部，但是当页面下滑到导航栏的位置时，开始自动悬浮。再次向上拉到导航栏的位置时，导航栏再次固定。菜鸟编程，大鸟勿喷。 案例开始,全部
jQuery仿腾讯云滑动下拉导航菜单效果代码
最新发布
05-13
以下是一个简单的jQuery代码，可以实现类似腾讯云的滑动下拉导航菜单效果： HTML代码： ```html 菜单 链接1 链接2 链接3 ``` CSS样式： ```css .dropdown { position: relative; display: inline-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值