经验分享程序开发文档资料数据资源其它资源

jQuery旅游网站左侧分类菜单代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery旅游网站左侧分类菜单代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery旅游网站左侧分类菜单代码

HTML代码(index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery旅游网站左侧分类菜单代码</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!--[if IE 6]>
<script type="text/javascript" language="javascript" src="js/png.js"></script>
<![endif]-->

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/web.js"></script>

</head>
<body>

<div class="product_sort fl">
	<div class="hd">旅游产品导航</div>
	<div class="bd">
		<div class="item">
			<div class="title one"><a href="#"><i></i>出境游</a></div>
			<div class="list">
				<a href="#">泰国</a>
				<a href="#">首尔</a>
				<a href="#">曼谷</a>
				<a href="#">大阪</a>
				<a href="#">普吉岛</a>
			</div>
			<div class="arrow">&gt;</div>
			<div class="line"></div>
			<div class="subitem">
				<div class="inner">
					<div class="tit tit1">
						<div class="name">泰国</div>
						<ul>
							<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>
							<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>
							<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>
							<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>
					</div>
					<div class="tit">
						<div class="name">印度尼西亚</div>
						<ul>
							<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>
							<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>
					</div>
				</div>
			</div>
		</div>
		
		<div class="item">
			<div class="title two"><a href="#"><i></i>国内游</a></div>
			<div class="list">
				<a href="#">泰国</a>
				<a href="#">首尔</a>
				<a href="#">曼谷</a>
				<a href="#">大阪</a>
				<a href="#">普吉岛</a>
			</div>
			<div class="arrow">&gt;</div>
			<div class="line"></div>
			<div class="subitem">
				<div class="inner">
					<div class="tit tit1">
						<div class="name">泰国</div>
						<ul>
							<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>
							<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>
							<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>
							<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>
					</div>
					<div class="tit">
						<div class="name">印度尼西亚</div>
						<ul>
							<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>
							<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>
					</div>
				</div>
			</div>
		</div>
		
		<div class="item">
			<div class="title three"><a href="#"><i></i>周边游</a></div>
			<div class="list">
				<a href="#">泰国</a>
				<a href="#">首尔</a>
				<a href="#">曼谷</a>
				<a href="#">大阪</a>
				<a href="#">普吉岛</a>
			</div>
			<div class="arrow">&gt;</div>
			<div class="line"></div>
			<div class="subitem">
				<div class="inner">
					<div class="tit tit1">
						<div class="name">泰国</div>
						<ul>
							<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>
							<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>
							<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>
							<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>
					</div>
					<div class="tit">
						<div class="name">印度尼西亚</div>
						<ul>
							<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>
							<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>
					</div>
				</div>
			</div>
		</div>
		
		<div class="item">
			<div class="title four"><a href="#"><i></i>邮轮</a></div>
			<div class="list">
				<a href="#">泰国</a>
				<a href="#">首尔</a>
				<a href="#">曼谷</a>
				<a href="#">大阪</a>
				<a href="#">普吉岛</a>
			</div>
			<div class="arrow">&gt;</div>
			<div class="line"></div>
			<div class="subitem">
				<div class="inner">
					<div class="tit tit1">
						<div class="name">泰国</div>
						<ul>
							<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>
							<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>
							<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>
							<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>
					</div>
					<div class="tit">
						<div class="name">印度尼西亚</div>
						<ul>
							<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>
							<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>
					</div>
				</div>
			</div>
		</div>
		
		<div class="item">
			<div class="title five"><a href="#"><i></i>东南亚</a></div>
			<div class="list">
				<a href="#">泰国</a>
				<a href="#">首尔</a>
				<a href="#">曼谷</a>
				<a href="#">大阪</a>
				<a href="#">普吉岛</a>
			</div>
			<div class="arrow">&gt;</div>
			<div class="line"></div>
			<div class="subitem">
				<div class="inner">
					<div class="tit tit1">
						<div class="name">泰国</div>
						<ul>
							<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>
							<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>
							<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>
							<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>
					</div>
					<div class="tit">
						<div class="name">印度尼西亚</div>
						<ul>
							<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>
							<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>
					</div>
				</div>
			</div>
		</div>
		
		<div class="item">
			<div class="title six"><a href="#"><i></i>日本、韩国、朝鲜</a></div>
			<div class="list">
				<a href="#">泰国</a>
				<a href="#">首尔</a>
				<a href="#">曼谷</a>
				<a href="#">大阪</a>
				<a href="#">普吉岛</a>
			</div>
			<div class="arrow">&gt;</div>
			<div class="line"></div>
			<div class="subitem">
				<div class="inner">
					<div class="tit tit1">
						<div class="name">泰国</div>
						<ul>
							<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>
							<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>
							<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>
							<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>
					</div>
					<div class="tit">
						<div class="name">印度尼西亚</div>
						<ul>
							<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>
							<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>
					</div>
				</div>
			</div>
		</div>
		
		<div class="item">
			<div class="title seven"><a href="#"><i></i>欧美</a></div>
			<div class="list">
				<a href="#">泰国</a>
				<a href="#">首尔</a>
				<a href="#">曼谷</a>
				<a href="#">大阪</a>
				<a href="#">普吉岛</a>
			</div>
			<div class="arrow">&gt;</div>
			<div class="line"></div>
			<div class="subitem">
				<div class="inner">
					<div class="tit tit1">
						<div class="name">泰国</div>
						<ul>
							<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>
							<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>
							<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>
							<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>
					</div>
					<div class="tit">
						<div class="name">印度尼西亚</div>
						<ul>
							<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>
							<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>
					</div>
				</div>
			</div>
		</div>
		
		<div class="item">
			<div class="title eight"><a href="#"><i></i>澳洲</a></div>
			<div class="list">
				<a href="#">泰国</a>
				<a href="#">首尔</a>
				<a href="#">曼谷</a>
				<a href="#">大阪</a>
				<a href="#">普吉岛</a>
			</div>
			<div class="arrow">&gt;</div>
			<div class="line"></div>
			<div class="subitem">
				<div class="inner">
					<div class="tit tit1">
						<div class="name">泰国</div>
						<ul>
							<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>
							<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>
							<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>
							<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>
					</div>
					<div class="tit">
						<div class="name">印度尼西亚</div>
						<ul>
							<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>
							<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>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
//首页旅游产品分类
$(".product_sort .bd .item").hover(function(){
	$(this).addClass("layer");
},function(){
	$(this).removeClass("layer");
});
</script>
</body>
</html>

JS代码(png.js):

/*** DD_belatedPNG:Adds IE6 support:PNG images for CSS background-image and HTML <IMG/>.* Author:Drew Diller* Email:drew.diller@gmail.com* URL:http://www.dillerdesign.com/experiment/DD_belatedPNG/* Version:0.0.8a* Licensed under the MIT License:http://dillerdesign.com/experiment/DD_belatedPNG/#license** Example usage:* DD_belatedPNG.fix('.png_bg');
	// argument is a CSS selector* DD_belatedPNG.fixPng( someNode );
	// argument is an HTMLDomElement**/
var DD_belatedPNG={
	ns:"DD_belatedPNG",imgSize:{
}
,delay:10,nodesFixed:0,createVmlNameSpace:function(){
	if(document.namespaces&&!document.namespaces[this.ns]){
	document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}
}
,createVmlStyleSheet:function(){
	var b,a;
	b=document.createElement("style");
	b.setAttribute("media","screen");
	document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);
	if(b.styleSheet){
	b=b.styleSheet;
	b.addRule(this.ns+"\\:*","{
	behavior:url(#default#VML)}
");
	b.addRule(this.ns+"\\:shape","position:absolute;
	");
	b.addRule("img."+this.ns+"_sizeFinder","behavior:none;
	border:none;
	position:absolute;
	z-index:-1;
	top:-10000px;
	visibility:hidden;
	");
	this.screenStyleSheet=b;
	a=document.createElement("style");
	a.setAttribute("media","print");
	document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);
	a=a.styleSheet;
	a.addRule(this.ns+"\\:*","{
	display:none !important;
}
");
	a.addRule("img."+this.ns+"_sizeFinder","{
	display:none !important;
}
")}
}
,readPropertyChange:function(){
	var b,c,a;
	b=event.srcElement;
	if(!b.vmlInitiated){
	return}
if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){
	DD_belatedPNG.applyVML(b)}
if(event.propertyName=="style.display"){
	c=(b.currentStyle.display=="none")?"none":"block";
	for(a in b.vml){
	if(b.vml.hasOwnProperty(a)){
	b.vml[a].shape.style.display=c}
}
}
if(event.propertyName.search("filter")!=-1){
	DD_belatedPNG.vmlOpacity(b)}
}
,vmlOpacity:function(b){
	if(b.currentStyle.filter.search("lpha")!=-1){
	var a=b.currentStyle.filter;
	a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;
	b.vml.color.shape.style.filter=b.currentStyle.filter;
	b.vml.image.fill.opacity=a}
}
,handlePseudoHover:function(a){
	setTimeout(function(){
	DD_belatedPNG.applyVML(a)}
,1)}
,fix:function(a){
	if(this.screenStyleSheet){
	var c,b;
	c=a.split(",");
	for(b=0;
	b<c.length;
	b++){
	this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}
}
}
,applyVML:function(a){
	a.runtimeStyle.cssText="";
	this.vmlFill(a);
	this.vmlOffsets(a);
	this.vmlOpacity(a);
	if(a.isImg){
	this.copyImageBorders(a)}
}
,attachHandlers:function(i){
	var d,c,g,e,b,f;
	d=this;
	c={
	resize:"vmlOffsets",move:"vmlOffsets"}
;
	if(i.nodeName=="A"){
	e={
	mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"}
;
	for(b in e){
	if(e.hasOwnProperty(b)){
	c[b]=e[b]}
}
}
for(f in c){
	if(c.hasOwnProperty(f)){
	g=function(){
	d[c[f]](i)}
;
	i.attachEvent("on"+f,g)}
}
i.attachEvent("onpropertychange",this.readPropertyChange)}
,giveLayout:function(a){
	a.style.zoom=1;
	if(a.currentStyle.position=="static"){
	a.style.position="relative"}
}
,copyImageBorders:function(b){
	var c,a;
	c={
	borderStyle:true,borderWidth:true,borderColor:true}
;
	for(a in c){
	if(c.hasOwnProperty(a)){
	b.vml.color.shape.style[a]=b.currentStyle[a]}
}
}
,vmlFill:function(e){
	if(!e.currentStyle){
	return}
else{
	var d,f,g,b,a,c;
	d=e.currentStyle}
for(b in e.vml){
	if(e.vml.hasOwnProperty(b)){
	e.vml[b].shape.style.zIndex=d.zIndex}
}
e.runtimeStyle.backgroundColor="";
	e.runtimeStyle.backgroundImage="";
	f=true;
	if(d.backgroundImage!="none"||e.isImg){
	if(!e.isImg){
	e.vmlBg=d.backgroundImage;
	e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}
else{
	e.vmlBg=e.src}
g=this;
	if(!g.imgSize[e.vmlBg]){
	a=document.createElement("img");
	g.imgSize[e.vmlBg]=a;
	a.className=g.ns+"_sizeFinder";
	a.runtimeStyle.cssText="behavior:none;
	position:absolute;
	left:-10000px;
	top:-10000px;
	border:none;
	margin:0;
	padding:0;
	";
	c=function(){
	this.width=this.offsetWidth;
	this.height=this.offsetHeight;
	g.vmlOffsets(e)}
;
	a.attachEvent("onload",c);
	a.src=e.vmlBg;
	a.removeAttribute("width");
	a.removeAttribute("height");
	document.body.insertBefore(a,document.body.firstChild)}
e.vml.image.fill.src=e.vmlBg;
	f=false}
e.vml.image.fill.on=!f;
	e.vml.image.fill.color="none";
	e.vml.color.shape.style.backgroundColor=d.backgroundColor;
	e.runtimeStyle.backgroundImage="none";
	e.runtimeStyle.backgroundColor="transparent"}
,vmlOffsets:function(d){
	var h,n,a,e,g,m,f,l,j,i,k;
	h=d.currentStyle;
	n={
	W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop}
;
	a=(n.L+n.bLW==1)?1:0;
	e=function(b,p,q,c,s,u){
	b.coordsize=c+","+s;
	b.coordorigin=u+","+u;
	b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";
	b.style.width=c+"px";
	b.style.height=s+"px";
	b.style.left=p+"px";
	b.style.top=q+"px"}
;
	e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);
	e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);
	g={
	X:0,Y:0}
;
	if(d.isImg){
	g.X=parseInt(h.paddingLeft,10)+1;
	g.Y=parseInt(h.paddingTop,10)+1}
else{
	for(j in g){
	if(g.hasOwnProperty(j)){
	this.figurePercentage(g,n,j,h["backgroundPosition"+j])}
}
}
d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);
	m=h.backgroundRepeat;
	f={
	T:1,R:n.W+a,B:n.H,L:1+a}
;
	l={
	X:{
	b1:"L",b2:"R",d:"W"}
,Y:{
	b1:"T",b2:"B",d:"H"}
}
;
	if(m!="repeat"||d.isImg){
	i={
	T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)}
;
	if(m.search("repeat-")!=-1){
	k=m.split("repeat-")[1].toUpperCase();
	i[l[k].b1]=1;
	i[l[k].b2]=n[l[k].d]}
if(i.B>n.H){
	i.B=n.H}
d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}
else{
	d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}
}
,figurePercentage:function(d,c,f,a){
	var b,e;
	e=true;
	b=(f=="X");
	switch(a){
	case"left":case"top":d[f]=0;
	break;
	case"center":d[f]=0.5;
	break;
	case"right":case"bottom":d[f]=1;
	break;
	default:if(a.search("%")!=-1){
	d[f]=parseInt(a,10)/100}
else{
	e=false}
}
d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));
	if(d[f]%2===0){
	d[f]++}
return d[f]}
,fixPng:function(c){
	c.style.behavior="none";
	var g,b,f,a,d;
	if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){
	return}
c.isImg=false;
	if(c.nodeName=="IMG"){
	if(c.src.toLowerCase().search(/\.png$/)!=-1){
	c.isImg=true;
	c.style.visibility="hidden"}
else{
	return}
}
else{
	if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){
	return}
}
g=DD_belatedPNG;
	c.vml={
	color:{
}
,image:{
}
}
;
	b={
	shape:{
}
,fill:{
}
}
;
	for(a in c.vml){
	if(c.vml.hasOwnProperty(a)){
	for(d in b){
	if(b.hasOwnProperty(d)){
	f=g.ns+":"+d;
	c.vml[a][d]=document.createElement(f)}
}
c.vml[a].shape.stroked=false;
	c.vml[a].shape.appendChild(c.vml[a].fill);
	c.parentNode.insertBefore(c.vml[a].shape,c)}
}
c.vml.image.shape.fillcolor="none";
	c.vml.image.fill.type="tile";
	c.vml.color.fill.on=false;
	g.attachHandlers(c);
	g.giveLayout(c);
	g.giveLayout(c.offsetParent);
	c.vmlInitiated=true;
	g.applyVML(c)}
}
;
	try{
	document.execCommand("BackgroundImageCache",false,true)}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
	DD_belatedPNG.createVmlStyleSheet();

JS代码(web.js):

var ua = navigator.userAgent.toLowerCase();
	var isIE6 = ua.indexOf("msie 6") > -1;
	//�ж��Ƿ�ΪIE6// remove css image flicker//IE6��Ĭ�ϲ����汳��ͼƬ��CSS��ÿ�θ��ͼƬ��λ��ʱ�������·��������������������IE6���汳��ͼƬif(isIE6){
	try{
	document.execCommand("BackgroundImageCache",false,true);
}
catch(e){
}
}
//png24if (!!window.DD_belatedPNG){
	DD_belatedPNG.fix('img,.header .mid .btn_group ul li.login a,.header .mid .searchbox .btn_input,.recommend .recommend_con .item .btn_buy,.routes .routes_left .bd .league ul li .teletext .tip');
}
;

CSS代码(index.css):

@charset "utf-8";/* CSS Document */
html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,blockquote,pre,form,fieldset,table,th,td,input,textarea,hr,img,label,span,select,strong,b{margin:0px;padding:0px;}
fieldset,img,abbr,acronym{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
q:before,q:after{content:'';}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
caption,th,td{text-align:left;font-weight:normal;}
a,img,button{border:none;text-decoration:none;}
a,button{text-decoration:none;}
a,img{border:none;outline:none;}
a{color:#333;text-decoration:none;outline:none;}
ul,ol{list-style:none;}
table{word-break:break-all;word-wrap:break-word;}
body{font-family:宋体,Arial,Lucida Grande,Lucida Sans Unicode,Verdana,sans-serif;font-size:12px;font-weight:normal;color:#000;width:100%;background:#fff;}
/*清除浮动*/
.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;}
.clearfix{display:inline-table;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
.ma{margin-left:auto;margin-right:auto;}
.w980{width:980px;}
.mt10{margin-top:10px;}
/*旅游产品分类*/
.product_sort{margin:20px;width:226px;height:644px;background:#fff url(../images/img_226x95.jpg) no-repeat left bottom;border:solid 1px #3299fd;position:relative;z-index:90;}
.product_sort .hd{width:226px;background:url(../images/img_226x40.jpg) no-repeat;height:40px;line-height:40px;text-indent:15px;font-size:15px;font-weight:bold;font-family:"微软雅黑";color:#fff;}
.product_sort .bd{padding-bottom:10px;}
.product_sort .bd .item{border-bottom:solid 1px #3299fd;height:60px;position:relative;}
.product_sort .bd .item .title{width:226px;text-indent:43px;height:30px;overflow:hidden;line-height:42px;font-size:14px;font-weight:bold;color:#292929;}
.product_sort .bd .item .title a{color:#3299fd;position:relative;}
.product_sort .bd .item .title a i{position:absolute;background:url(../images/icon_nav.jpg) no-repeat;}
.product_sort .bd .item .one a i{width:19px;height:19px;background-position:0 0;left:-25px;top:-3px;}
.product_sort .bd .item .two a i{width:22px;height:20px;background-position:0 -51px;left:-28px;top:-5px;}
.product_sort .bd .item .three a i{width:31px;height:23px;background-position:0 -101px;left:-34px;top:-7px;}
.product_sort .bd .item .four a i{width:25px;height:17px;background-position:0 -156px;left:-29px;top:-3px;}
.product_sort .bd .item .five a i{width:28px;height:17px;background-position:0 -207px;left:-33px;top:-1px;}
.product_sort .bd .item .six a i{width:28px;height:17px;background-position:0 -259px;left:-32px;top:-3px;}
.product_sort .bd .item .seven a i{width:26px;height:20px;background-position:0 -309px;left:-31px;top:-6px;}
.product_sort .bd .item .eight a i{width:26px;height:21px;background-position:0 -360px;left:-32px;top:-7px;}
.product_sort .bd .item .list{width:210px;padding-left:15px;height:30px;line-height:30px;overflow:hidden;}
.product_sort .bd .item .list a{font-family:"微软雅黑";color:#333;}
.product_sort .bd .item .list a:hover{text-decoration:underline;}
.product_sort .bd .item .arrow{font-family:"微软雅黑";font-size:20px;color:#c0d7f9;position:absolute;right:10px;top:14px;}
.product_sort .bd .item .line{position:absolute;right:-2px;top:0px;width:2px;height:60px;background-color:#fff;z-index:95;display:none;}
.product_sort .bd .item .subitem{display:none;}
.product_sort .bd .layer .line{display:block;}
.product_sort .bd .layer .arrow{display:none;}
.product_sort .bd .layer .subitem{width:731px;background:#fff;border:solid 1px #3299fd;border-left:none;font-family:"微软雅黑";position:absolute;left:227px;_left:228px;top:-15px;z-index:95;min-height:60px;height:auto!important;height:60px;padding:5px 10px 15px 10px;display:block;}
.product_sort .bd .layer .subitem .inner .tit{font-size:12px;text-align:left;border-top:1px dashed #d7d7d7;padding:5px 0;}
.product_sort .bd .layer .subitem .inner .tit1{border-top:none;}
.product_sort .bd .layer .subitem .inner .tit .name{display:block;width:90px;color:#3299fd;cursor:pointer;float:left;padding-top:3px;}
.product_sort .bd .layer .subitem .inner ul{overflow:hidden;zoom:1;display:block;margin-left:90px;width:630px;}
.product_sort .bd .layer .subitem .inner ul li{float:left;padding:0 8px;height:25px;}
.product_sort .bd .layer .subitem .inner ul li a{color:#222;display:block;}
.product_sort .bd .layer .subitem .inner ul li a:hover{color:#3299fd;text-decoration:underline;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
52.07 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
52.07 KB
立即下载
严琬
了解
打赏作者 鼓励作者
jquery特效5
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章