2023年5月 – 吾学网

5月 31, 2023

2023年世界田联路跑标牌赛事赛历（国内）

作者 5xue 在健身

2023年3月12日
MEISHAN RENSHOU HALF MARATHON（眉山仁寿半程马拉松）
SUZHOU BAY HALF MARATHON（苏州湾马拉松）
SUZHOU JINJI LAKE HALF MARATHON（苏州环金鸡湖国际半程马拉松）

2023年3月19日
NANJING PUKOU MARATHON（南京浦口马拉松）
CHANGAN AUTOMO CHONGQING MARATHON（长安汽车重庆马拉松）
WUXI MARATHON（无锡马拉松）

2023年3月26日
GUILIN MARATHON（桂林马拉松）
HANGZHOU QIANTANG WOMEN’S HALF MARATHON（杭州钱塘女子半程马拉松）

2023年4月2日
C&D XIAMEN MARATHON（厦门马拉松）
SHIJIAZHUANG MARATHON（石家庄马拉松）

2023年4月9日
NANJING XIANLIN HALF MARATHON（南京仙林半程马拉松）
XUZHOU MARATHON（徐州马拉松，未查到举办信息）
YANGLING MARATHON（杨凌马拉松）

2023年4月16日
BEIJING HALF MARATHON（北京半程马拉松）
JUNLEBAO ZHENG-KAI INTERNATIONAL MARATHON（郑开马拉松）
SHANGHAI HALF MARATHON（上海半程马拉松）
WUHAN MARATHON（武汉马拉松）
YANGZHOU JIANZHEN HALF MARATHON（扬州鉴真半程马拉松）

2023年4月22日
QINGDAO MARATHON（青岛马拉松）

2023年4月30日
YICHANG MARATHON（宜昌马拉松）

2023年5月21日
MIYUN ECO MARATHON（密云生态马拉松）
TAIYUAN MARATHON（太原马拉松）

2023年6月11日
JILIN CITY INTERNATIONAL MARATHON（吉林市国际马拉松）
LANZHOU MARATHON（兰州马拉松）

2023年6月25日
GUIZHOU ZHENNING HUANGGHOSHU HALF MARATHON（贵州·镇宁黄果树半程马拉松）

2023年7月31日
COOL CITY LIUPANSHUI SUMMER MARATHON（凉都六盘水夏季马拉松，举办方5月9日公布的鸣枪时间为7月16日7点30分）

2023年8月27日
HARBIN MARATHON（哈尔滨马拉松）

2023年9月24日
HENGSHUI LAKE MARATHON（衡水湖马拉松）
SHENYANG MARATHON（沈阳马拉松）

2023年10月1日
BOZHOU MARATHON（亳州马拉松）
DAWEI HALF ECO-MARATHON（大圩生态半程马拉松）

2023年10月15日
CHANGZHOU WEST TAIHU LAKE HALF MARATHON（常州西太湖半程马拉松）
CHIZHOU MARATHON（池州马拉松）
SHANGHAI ELITE 10K RACE（上海国际10公里精英赛）

2023年10月22日
THE 33RD DALIAN MARATHON（第33届大连马拉松）
XI’AN MARATHON（西安马拉松）
YELLOW RIVER ESTUARY MARATHON（黄河口马拉松）

2023年10月29日
CHANGDE LIUYE LAKE MARATHON（常德柳叶湖马拉松）
CHANGSHA MARATHON（长沙马拉松）
CHENGDU MARATHON（成都马拉松）
SUZHOU TAIHU MARATHON（苏州太湖马拉松）

2023年11月5日
ROUND LIHU LAKE HALF MARATHON（环蠡湖半程马拉松）
2023 BEIKE BEIJING MARATHON（北京马拉松）
CHONGQING WOMEN’S HALF MARATHON（重庆女子半程马拉松）
HANGZHOU MARATHON（杭州马拉松）
XICHANG QIONGHAI LAKE WETLAND INTERNATIONAL MARATHON（西昌邛海湿地国际马拉松）

2023年11月12日
NANCHANG MARATHON（南昌马拉松）
SLEEMON SHAOXING MARATHON（喜临门绍兴马拉松）
ZHOUSHAN ISLANDS MARATHON（舟山群岛马拉松）

2023年11月19日
YIWU HALF MARATHON（义乌半程马拉松）
2023 HEFEI MARATHON（合肥马拉松）
CHINA ASEAN INTERNATIONAL MARATHON（中国-东盟国际马拉松）
ZHAOQING HALF MARATHON（肇庆半程马拉松）

2023年11月26日
TENGCHONG MARATHON（腾冲马拉松）
BAISE MARATHON（百色马拉松）
SHANGHAI MARATHON（上海马拉松）
SHAOXING SHANGYU CAO’E RIVER HALF MARATHON（绍兴·上虞曹娥江半程马拉松）

2023年12月3日
AGRICULTURAL BANK OF CHINA CUP 2023 THREE GORGES MARATHON（中国农业银行杯2023长江三峡马拉松）
NANNING MARATHON（南宁马拉松）
SCO KUNMING MARATHON（上合昆明马拉松）
SHENZHEN BAOAN INTERNATIONAL MARATHON（深圳宝安马拉松）

2023年12月10日
GUANGZHOU MARATHON（广州马拉松）

2023年12月17日
FUZHOU MARATHON（福州马拉松）
HUANGSHI CIHU HALF MARATHON（黄石磁湖半程马拉松）
SHENZHEN MARATHON（深圳马拉松）

2023年12月24日
GUANGZHOU HUANGPU MARATHON（广州黄埔马拉松）

2023年12月31日
2023 GAOCHUN CITTASLOW MARATHON（2023高淳慢城马拉松）
HAINAN DANZHOU MARATHON（海南儋州马拉松）

参考原文：https://worldathletics.org/competitions/world-athletics-label-road-races

5月 23, 2023

2023长春马拉松安全完赛

作者 5xue 在健身

2023年5月21日，2023长春马拉松安全完赛，净时成绩3小时55分40秒，平均配速5′35″，这是第1次在正式比赛中做到全程匀速跑，分段成绩如下：

愿下一个马拉松成绩会更好！

5月 16, 2023

纯css多级下拉菜单可以遮住表单支持IE6

作者 5xue 在 Html与Css

外国人写的纯css多级下拉菜单，可以遮住表单，支持IE5.5, IE6, IE7, IE8, Firefox, Safari(PC), Opera and Google Chrome …

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Menu with sub levels over select boxes iframe fix for IE6  method 4</title>
<meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, menu, horizontal, dropdown, drop, multi, level, cross, browser, valid, professional, iframe, fix" />
<meta name="Description" content="CSS play - menu with sub levels over select boxes iframe fix for IE6 - method 4" />
<style type="text/css">
html {background:#f0f0f0}
body {padding:0; margin:0; text-align:center; font-family:arial, sans-serif; font-size:76%;}

#leftCol {min-height:200px; margin-top:10px; text-align:justify;}
#leftCol p {font-size:13px; padding:0; margin:5px 0 0 3px; color:#333; line-height:20px;}
#leftCol h3 {font-size:16px; font-weight:bold; color:#151; padding:10px 0 5px 0; margin:0 0 0 3px;}
#form {width:700px; margin:30px auto;}
#form legend {font-family:arial, sans-serif; color:#fff;}

/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/iframe-shim.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#menu {width:750px; height:531px; background:#2b3f5c; text-align:center; margin:0 auto;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:#ccccd0; border:1px solid #333; border-color:#eee #555 #222 #fff;}
#menu ul {display:inline-block;} 

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul ul {position:absolute; left:-9999px;}

#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}

#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/

#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 20px;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}

#menu ul li:hover > ul {visibility:visible; left:0; top:21px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px; margin-left:-4px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px; margin-right:-4px;}


#menu a:hover ul {left:0; top:23px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}

#menu li.left ul a {text-align:right;}


#menu a:hover a:hover ul, 
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul, 
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}

#menu a:hover ul ul, 
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul, 
#menu li.left a:hover a:hover ul ul {left:-9999px;}

#menu li a.drop {background:transparent url(t1-down.gif) no-repeat right center;}
#menu li a.fly {background:transparent url(t1-right.gif) no-repeat right center;}
#menu li.left ul a.fly {background:transparent url(t1-left.gif) no-repeat left center;}

#menu li a:hover,
#menu li a.fly:hover {color:#c60; background-color:#c0c0c8;} 
#menu li:hover > a,
#menu ul li:hover > a.fly {color:#c60; background-color:#c0c0c8;}

#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-6px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-left:-4px;}

#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-right:-4px;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#menu ul {display:inline;}
</style>
<![endif]-->

<!--[if lte IE 6]>
<style type="text/css">
#menu ul ul {_azimuth: expression(this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe src="javascript:'+"''"+'" style="filter:alpha(opacity=0); padding:0; margin:0; border:0;"></iframe>'),'inherit');}
#menu iframe {position:absolute; left:-9999px; top:0;}
#menu :hover iframe {left:expression(this.nextSibling.offsetLeft);top:expression(this.nextSibling.offsetTop);width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);}
</style>
<![endif]-->
</head>
<body>
<div id="menu">
	<ul class="level1">
		<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
		<li class="level1-li"><a class="level1-a drop" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="level2">
				<li><a href="#url">Email</a></li>
				<li><a href="#url">Telephone</a></li>
				<li><a href="#url">Online Form</a></li>
				<li><a href="#url">Snail Mail Address</a><b></b></li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="level1-li"><a class="level1-a drop" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="level2">
				<li><a href="#url">Ski Hire Facilities</a></li>
				<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul class="level3">
						<li><a href="#url">Beginners Slopes</a></li>
						<li><a href="#url">Intermediate Slopes</a></li>
						<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
						<!--[if lte IE 6]><table><tr><td><![endif]-->
							<ul class="level4">
								<li><a href="#url">Local</a></li>
								<li><a href="#url">Nearby</a></li>
								<li><a href="#url">With instructor</a></li>
								<li><a href="#url">Snow boarding</a><b></b></li>
							</ul>
						<!--[if lte IE 6]></td></tr></table></a><![endif]-->
						</li>
						<li><a href="#url">Expert</a></li>
					</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
				</li>
				<li><a href="#url">Night Life</a></li>
				<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul class="level3">
						<li><a href="#url">Snow Hotel</a></li>
						<li><a href="#url">The Snowman</a></li>
						<li><a href="#url">Ice Cavern</a></li>
						<li><a href="#url">Ski Inn</a><b></b></li>
					</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
				</li>
				<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul class="level3">
						<li><a href="#url">From Airport</a></li>
						<li><a href="#url">In Resort</a></li>
						<li><a href="#url">Multiple Resorts</a><b></b></li>
					</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
				</li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="level1-li"><a class="level1-a drop" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="level2">
				<li><a href="#url">Where to go</a></li>
				<li><a href="#url">What to do</a></li>
				<li><a href="#url">Places of interest</a></li>
				<li><a href="#url">National parks & Museums</a><b></b></li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="level1-li left"><a class="level1-a drop" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="level2">
				<li><a href="#url">Money Exchange</a></li>
				<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul class="level3">
						<li><a href="#url">Lift Passes</a></li>
						<li><a href="#url">Insurance</a></li>
						<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
						<!--[if lte IE 6]><table><tr><td><![endif]-->
							<ul class="level4">
								<li><a href="#url">Boots</a></li>
								<li><a href="#url">Skis</a></li>
								<li><a href="#url">Ski Wear</a></li>
								<li><a href="#url">Goggles</a><b></b></li>
							</ul>
						<!--[if lte IE 6]></td></tr></table></a><![endif]-->
						</li>
						<li><a href="#url">Ski Schools</a></li>
						<li><a href="#url">Snow Report</a></li>
					</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
				</li>
				<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul class="level3">
						<li><a href="#url">Austrian</a></li>
						<li><a href="#url">German</a></li>
						<li><a href="#url">French</a></li>
						<li><a href="#url">English</a><b></b></li>
					</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
				</li>
				<li><a href="#url">Short Breaks</a></li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
	</ul>
	<form id="form" action="..." method="post" onsubmit="alert('This is a test.');return false">
	<fieldset>
		<legend>OPTIONS<br /><br /></legend>
		<select name="choice1">
			<option selected="selected" label="none" value="none">none</option>
			<optgroup label="Group 1">
				<option label="cg1a" value="val_1a">Selection group 1a</option>
				<option label="cg1b" value="val_1b">Selection group 1b</option>
				<option label="cg1c" value="val_1c">Selection group 1c</option>
			</optgroup>
			<optgroup label="Group 2">
				<option label="cg2a" value="val_2a">Selection group 2a</option>
				<option label="cg2b" value="val_2a">Selection group 2b</option>
			</optgroup>
			<optgroup label="Group 3">
				<option label="cg3a" value="val_3a">Selection group 3a</option>
				<option label="cg3a" value="val_3a">Selection group 3b</option>
			</optgroup>
		</select>
		<select name="choice2">
			<option selected="selected" label="none" value="none">none</option>
			<optgroup label="Group 1">
				<option label="cg1a" value="val_1a">Selection group 1a</option>
				<option label="cg1b" value="val_1b">Selection group 1b</option>
				<option label="cg1c" value="val_1c">Selection group 1c</option>
			</optgroup>
			<optgroup label="Group 2">
				<option label="cg2a" value="val_2a">Selection group 2a</option>
				<option label="cg2b" value="val_2a">Selection group 2b</option>
			</optgroup>
			<optgroup label="Group 3">
				<option label="cg3a" value="val_3a">Selection group 3a</option>
				<option label="cg3a" value="val_3a">Selection group 3b</option>
			</optgroup>
		</select>
		<select name="choice3">
			<option selected="selected" label="none" value="none">none</option>
			<optgroup label="Group 1">
				<option label="cg1a" value="val_1a">Selection group 1a</option>
				<option label="cg1b" value="val_1b">Selection group 1b</option>
				<option label="cg1c" value="val_1c">Selection group 1c</option>
			</optgroup>
			<optgroup label="Group 2">
				<option label="cg2a" value="val_2a">Selection group 2a</option>
				<option label="cg2b" value="val_2a">Selection group 2b</option>
			</optgroup>
			<optgroup label="Group 3">
				<option label="cg3a" value="val_3a">Selection group 3a</option>
				<option label="cg3a" value="val_3a">Selection group 3b</option>
			</optgroup>
		</select>
		<select name="choice4">
			<option selected="selected" label="none" value="none">none</option>
			<optgroup label="Group 1">
				<option label="cg1a" value="val_1a">Selection group 1a</option>
				<option label="cg1b" value="val_1b">Selection group 1b</option>
				<option label="cg1c" value="val_1c">Selection group 1c</option>
			</optgroup>
			<optgroup label="Group 2">
				<option label="cg2a" value="val_2a">Selection group 2a</option>
				<option label="cg2b" value="val_2a">Selection group 2b</option>
			</optgroup>
			<optgroup label="Group 3">
				<option label="cg3a" value="val_3a">Selection group 3a</option>
				<option label="cg3a" value="val_3a">Selection group 3b</option>
			</optgroup>
		</select>
		<br /><br /><br />
		<select name="choice5">
			<option selected="selected" label="none" value="none">none</option>
			<optgroup label="Group 1">
				<option label="cg1a" value="val_1a">Selection group 1a</option>
				<option label="cg1b" value="val_1b">Selection group 1b</option>
				<option label="cg1c" value="val_1c">Selection group 1c</option>
			</optgroup>
			<optgroup label="Group 2">
				<option label="cg2a" value="val_2a">Selection group 2a</option>
				<option label="cg2b" value="val_2a">Selection group 2b</option>
			</optgroup>
			<optgroup label="Group 3">
				<option label="cg3a" value="val_3a">Selection group 3a</option>
				<option label="cg3a" value="val_3a">Selection group 3b</option>
			</optgroup>
		</select>
		<select name="choice6">
			<option selected="selected" label="none" value="none">none</option>
			<optgroup label="Group 1">
				<option label="cg1a" value="val_1a">Selection group 1a</option>
				<option label="cg1b" value="val_1b">Selection group 1b</option>
				<option label="cg1c" value="val_1c">Selection group 1c</option>
			</optgroup>
			<optgroup label="Group 2">
				<option label="cg2a" value="val_2a">Selection group 2a</option>
				<option label="cg2b" value="val_2a">Selection group 2b</option>
			</optgroup>
			<optgroup label="Group 3">
				<option label="cg3a" value="val_3a">Selection group 3a</option>
				<option label="cg3a" value="val_3a">Selection group 3b</option>
			</optgroup>
		</select>
		<select name="choice7">
			<option selected="selected" label="none" value="none">none</option>
			<optgroup label="Group 1">
				<option label="cg1a" value="val_1a">Selection group 1a</option>
				<option label="cg1b" value="val_1b">Selection group 1b</option>
				<option label="cg1c" value="val_1c">Selection group 1c</option>
			</optgroup>
			<optgroup label="Group 2">
				<option label="cg2a" value="val_2a">Selection group 2a</option>
				<option label="cg2b" value="val_2a">Selection group 2b</option>
			</optgroup>
			<optgroup label="Group 3">
				<option label="cg3a" value="val_3a">Selection group 3a</option>
				<option label="cg3a" value="val_3a">Selection group 3b</option>
			</optgroup>
		</select>
		<select name="choice8">
			<option selected="selected" label="none" value="none">none</option>
			<optgroup label="Group 1">
				<option label="cg1a" value="val_1a">Selection group 1a</option>
				<option label="cg1b" value="val_1b">Selection group 1b</option>
				<option label="cg1c" value="val_1c">Selection group 1c</option>
			</optgroup>
			<optgroup label="Group 2">
				<option label="cg2a" value="val_2a">Selection group 2a</option>
				<option label="cg2b" value="val_2a">Selection group 2b</option>
			</optgroup>
			<optgroup label="Group 3">
				<option label="cg3a" value="val_3a">Selection group 3a</option>
				<option label="cg3a" value="val_3a">Selection group 3b</option>
			</optgroup>
		</select>
	</fieldset>
	<p>
		<input id="button1" type="submit" value="Send" /> 
		<input id="button2" type="reset" value="Reset" />
	</p>
	</form>
</div>
<div id="leftCol">
	<h3>Information</h3>
	<p>Using the latest techniques for variable width dropdown/flyout menus in which the widths are set by the link text, this menu adds a fix for the IE6 select box bug so that the menu drops over the select boxes.</p>
	<p>Again this uses CSS expressions to add the iframes and style them to fit.</p>
	<p>To make the page validate I have moved the IE6 expression styling into a separate stylesheet, but this can be all in one if you are not worried about validation.</p>
	<p>Tested in IE5.5, IE6, IE7, IE8, Firefox, Safari(PC), Opera and Google Chrome.</p>
</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> Stu Nicholls | CSSplay | Menu with sub levels over select boxes iframe fix for IE6 method 4</title>

html {background:#f0f0f0}

body {padding:0; margin:0; text-align:center; font-family:arial, sans-serif; font-size:76%;}

#leftCol {min-height:200px; margin-top:10px; text-align:justify;}

#leftCol p {font-size:13px; padding:0; margin:5px 0 0 3px; color:#333; line-height:20px;}

#leftCol h3 {font-size:16px; font-weight:bold; color:#151; padding:10px 0 5px 0; margin:0 0 0 3px;}

#form {width:700px; margin:30px auto;}

#form legend {font-family:arial, sans-serif; color:#fff;}

/* ================================================================

This copyright notice must be kept untouched in the stylesheet at

all times.

The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menus/iframe-shim.html

This stylesheet and the associated (x)html may be modified in any

way to fit your requirements.

=================================================================== */

#menu {width:750px; height:531px; background:#2b3f5c; text-align:center; margin:0 auto;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:#ccccd0; border:1px solid #333; border-color:#eee #555 #222 #fff;}

#menu ul {display:inline-block;}

#menu li {margin:0; padding:0; list-style:none;}

#menu li {display:inline-block; display:inline;}

#menu ul ul {position:absolute; left:-9999px;}

#menu ul.level1 {margin:0 auto;}

#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}

#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/

#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 20px;}

#menu ul.level1 li.level1-li a.level1-a {float:left;}

#menu ul li:hover > ul {visibility:visible; left:0; top:21px;}

#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px; margin-left:-4px;}

#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}

#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px; margin-right:-4px;}

#menu a:hover ul {left:0; top:23px;}

#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}

#menu li.left ul a {text-align:right;}

#menu a:hover a:hover ul,

#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}

#menu li.left a:hover a:hover ul,

#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}

#menu a:hover ul ul,

#menu a:hover a:hover ul ul {left:-9999px;}

#menu li.left a:hover ul ul,

#menu li.left a:hover a:hover ul ul {left:-9999px;}

#menu li a.drop {background:transparent url(t1-down.gif) no-repeat right center;}

#menu li a.fly {background:transparent url(t1-right.gif) no-repeat right center;}

#menu li.left ul a.fly {background:transparent url(t1-left.gif) no-repeat left center;}

#menu li a:hover,

#menu li a.fly:hover {color:#c60; background-color:#c0c0c8;}

#menu li:hover > a,

#menu ul li:hover > a.fly {color:#c60; background-color:#c0c0c8;}

#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-6px;}

#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-left:-4px;}

#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}

#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-right:-4px;}

</style>

<!--[if lte IE 7]>

#menu ul {display:inline;}

</style>

<![endif]-->

<!--[if lte IE 6]>

#menu ul ul {_azimuth: expression(this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe src="javascript:'+"''"+'" style="filter:alpha(opacity=0); padding:0; margin:0; border:0;"></iframe>'),'inherit');}

#menu iframe {position:absolute; left:-9999px; top:0;}

#menu :hover iframe {left:expression(this.nextSibling.offsetLeft);top:expression(this.nextSibling.offsetTop);width:expression(this.nextSibling.offsetWidth);height:expression(this.nextSibling.offsetHeight);}

</style>

<![endif]-->

</head>

<body>

<li class="level1-li"><a class="level1-a drop" href="#url">Contact Us</a>

<li><a href="#url">Email</a></li>

<li><a href="#url">Telephone</a></li>

<li><a href="#url">Online Form</a></li>

<li><a href="#url">Snail Mail Address</a><b></b></li>

</ul>

</li>

<li class="level1-li"><a class="level1-a drop" href="#url">Resort</a>

<li><a href="#url">Ski Hire Facilities</a></li>

<li><a class="fly" href="#url">Main Ski Slopes</a>

<li><a href="#url">Beginners Slopes</a></li>

<li><a href="#url">Intermediate Slopes</a></li>

<li><a class="fly" href="#url">Advanced Skill Levels</a>

<li><a href="#url">Local</a></li>

<li><a href="#url">Nearby</a></li>

<li><a href="#url">With instructor</a></li>

<li><a href="#url">Snow boarding</a><b></b></li>

</ul>

</li>

<li><a href="#url">Expert</a></li>

</ul>

</li>

<li><a href="#url">Night Life</a></li>

<li><a class="fly" href="#url">Restaurants</a>

<li><a href="#url">Snow Hotel</a></li>

<li><a href="#url">The Snowman</a></li>

<li><a href="#url">Ice Cavern</a></li>

</ul>

</li>

<li><a href="#url">From Airport</a></li>

<li><a href="#url">In Resort</a></li>

<li><a href="#url">Multiple Resorts</a><b></b></li>

</ul>

</li>

</ul>

</li>

<li class="level1-li"><a class="level1-a drop" href="#url">Surrounding Area</a>

<li><a href="#url">Where to go</a></li>

<li><a href="#url">Places of interest</a></li>

<li><a href="#url">National parks & Museums</a><b></b></li>

</ul>

</li>

<li class="level1-li left"><a class="level1-a drop" href="#url">Information</a>

<li><a href="#url">Money Exchange</a></li>

<li><a class="fly" href="#url">Resort Essential Information</a>

<li><a href="#url">Lift Passes</a></li>

<li><a href="#url">Insurance</a></li>

<li><a class="fly" href="#url">Gear Rental</a>

<li><a href="#url">Boots</a></li>

<li><a href="#url">Goggles</a><b></b></li>

</ul>

</li>

<li><a href="#url">Ski Schools</a></li>

<li><a href="#url">Snow Report</a></li>

</ul>

</li>

<li><a class="fly" href="#url">Language</a>

<li><a href="#url">Austrian</a></li>

<li><a href="#url">German</a></li>

<li><a href="#url">French</a></li>

<li><a href="#url">English</a><b></b></li>

</ul>

</li>

<li><a href="#url">Short Breaks</a></li>

</ul>

</li>

<li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>

</ul>

<legend>OPTIONS<br /><br /></legend>

<option label="cg1a" value="val_1a">Selection group 1a</option>

<option label="cg1b" value="val_1b">Selection group 1b</option>

<option label="cg1c" value="val_1c">Selection group 1c</option>

</optgroup>

<option label="cg2a" value="val_2a">Selection group 2a</option>

<option label="cg2b" value="val_2a">Selection group 2b</option>

</optgroup>

<option label="cg3a" value="val_3a">Selection group 3a</option>

<option label="cg3a" value="val_3a">Selection group 3b</option>

</optgroup>

</select>

<option label="cg1a" value="val_1a">Selection group 1a</option>

<option label="cg1b" value="val_1b">Selection group 1b</option>

<option label="cg1c" value="val_1c">Selection group 1c</option>

</optgroup>

<option label="cg2a" value="val_2a">Selection group 2a</option>

<option label="cg2b" value="val_2a">Selection group 2b</option>

</optgroup>

<option label="cg3a" value="val_3a">Selection group 3a</option>

<option label="cg3a" value="val_3a">Selection group 3b</option>

</optgroup>

</select>

<option label="cg1a" value="val_1a">Selection group 1a</option>

<option label="cg1b" value="val_1b">Selection group 1b</option>

<option label="cg1c" value="val_1c">Selection group 1c</option>

</optgroup>

<option label="cg2a" value="val_2a">Selection group 2a</option>

<option label="cg2b" value="val_2a">Selection group 2b</option>

</optgroup>

<option label="cg3a" value="val_3a">Selection group 3a</option>

<option label="cg3a" value="val_3a">Selection group 3b</option>

</optgroup>

</select>

<option label="cg1a" value="val_1a">Selection group 1a</option>

<option label="cg1b" value="val_1b">Selection group 1b</option>

<option label="cg1c" value="val_1c">Selection group 1c</option>

</optgroup>

<option label="cg2a" value="val_2a">Selection group 2a</option>

<option label="cg2b" value="val_2a">Selection group 2b</option>

</optgroup>

<option label="cg3a" value="val_3a">Selection group 3a</option>

<option label="cg3a" value="val_3a">Selection group 3b</option>

</optgroup>

</select>

<option label="cg1a" value="val_1a">Selection group 1a</option>

<option label="cg1b" value="val_1b">Selection group 1b</option>

<option label="cg1c" value="val_1c">Selection group 1c</option>

</optgroup>

<option label="cg2a" value="val_2a">Selection group 2a</option>

<option label="cg2b" value="val_2a">Selection group 2b</option>

</optgroup>

<option label="cg3a" value="val_3a">Selection group 3a</option>

<option label="cg3a" value="val_3a">Selection group 3b</option>

</optgroup>

</select>

<option label="cg1a" value="val_1a">Selection group 1a</option>

<option label="cg1b" value="val_1b">Selection group 1b</option>

<option label="cg1c" value="val_1c">Selection group 1c</option>

</optgroup>

<option label="cg2a" value="val_2a">Selection group 2a</option>

<option label="cg2b" value="val_2a">Selection group 2b</option>

</optgroup>

<option label="cg3a" value="val_3a">Selection group 3a</option>

<option label="cg3a" value="val_3a">Selection group 3b</option>

</optgroup>

</select>

<option label="cg1a" value="val_1a">Selection group 1a</option>

<option label="cg1b" value="val_1b">Selection group 1b</option>

<option label="cg1c" value="val_1c">Selection group 1c</option>

</optgroup>

<option label="cg2a" value="val_2a">Selection group 2a</option>

<option label="cg2b" value="val_2a">Selection group 2b</option>

</optgroup>

<option label="cg3a" value="val_3a">Selection group 3a</option>

<option label="cg3a" value="val_3a">Selection group 3b</option>

</optgroup>

</select>

<option label="cg1a" value="val_1a">Selection group 1a</option>

<option label="cg1b" value="val_1b">Selection group 1b</option>

<option label="cg1c" value="val_1c">Selection group 1c</option>

</optgroup>

<option label="cg2a" value="val_2a">Selection group 2a</option>

<option label="cg2b" value="val_2a">Selection group 2b</option>

</optgroup>

<option label="cg3a" value="val_3a">Selection group 3a</option>

<option label="cg3a" value="val_3a">Selection group 3b</option>

</optgroup>

</select>

</fieldset>

<p>

</p>

</form>

</div>

<h3>Information</h3>

<p>Using the latest techniques for variable width dropdown/flyout menus in which the widths are set by the link text, this menu adds a fix for the IE6 select box bug so that the menu drops over the select boxes.</p>

<p>Again this uses CSS expressions to add the iframes and style them to fit.</p>

<p>To make the page validate I have moved the IE6 expression styling into a separate stylesheet, but this can be all in one if you are not worried about validation.</p>

<p>Tested in IE5.5, IE6, IE7, IE8, Firefox, Safari(PC), Opera and Google Chrome.</p>

</div>

</body>

</html>

浏览样例

5月 15, 2023

js实现图片轮播效果支持IE6

作者 5xue 在 Javascript

js实现图片轮播效果支持IE6

水平方向

<!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>吾学网 &#8211; 5xue.cc &#8211; JS实现图片水平方向轮播</title>
<style>
body,div,ul,li{margin:0;padding:0}
ul{list-style-type:none}
body{background:#333;text-align:center;font:12px/20px Arial;}
#box{position:relative;width:600px;height:255px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;overflow:hidden;}

#box .list{position:relative;width:3000px;height:170px;overflow:hidden;}
#box .list img{float:left;position:relative;display:inline-block}

#box .count{position:absolute;right:0;bottom:5px;}
#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
</style>
<script type="text/javascript">
window.onload = function () {
	var oBox = document.getElementById("box");
	var oList = document.getElementById("imgList");
	var aImg = oBox.getElementsByTagName("img");
	var timer = playTimer = null;
	var index = i = 0;
	var bOrder = true;
	var aTmp = [];
	var aBtn = null;
	
	//生成数字按钮
	for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>");

	//插入元素
	var oCount = document.createElement("ul");
	oCount.className = "count";
	oCount.innerHTML = aTmp.join("");
	oBox.appendChild(oCount);	
	aBtn = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");
	
	//初始化状态
	cutover();
	
	//按钮点击切换
	for (i = 0; i < aBtn.length; i++) {
		aBtn[i].index = i;
		aBtn[i].onmouseover = function () {
			index = this.index;
			cutover()
		}
	}
	
	function cutover() {
		for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
		aBtn[index].className = "current";			
		startMove(-(index * aImg[0].offsetWidth))
	}
	
	function next() {
		bOrder ? index++ : index--;
		index <= 0 && (index = 0, bOrder = true);
		index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)
		cutover()
	}
	
	playTimer = setInterval(next, 3000);
	
	//鼠标移入展示区停止自动播放
	oBox.onmouseover = function () {
		clearInterval(playTimer)
	};
	
	//鼠标离开展示区开始自动播放
	oBox.onmouseout = function () {
		playTimer = setInterval(next, 3000)
	};
	function startMove(iTarget) {
		clearInterval(timer);
		timer = setInterval(function () {
			doMove(iTarget)
		}, 30)	
	}
	function doMove (iTarget) {		
		var iSpeed = (iTarget - oList.offsetLeft) / 10;
		iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);		
		oList.offsetLeft == iTarget ? clearInterval(timer) : oList.style.left = oList.offsetLeft + iSpeed + "px"
	}
}
</script>
</head>
<body>
<div id="box">
	<div id="imgList" class="list">
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/1.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/2.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/3.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/4.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/5.jpg" />
	</div>
</div>
</body>
</html>

100

101

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>吾学网 – 5xue.cc – JS实现图片水平方向轮播</title>

<style>

body,div,ul,li{margin:0;padding:0}

ul{list-style-type:none}

body{background:#333;text-align:center;font:12px/20px Arial;}

#box{position:relative;width:600px;height:255px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;overflow:hidden;}

#box .list{position:relative;width:3000px;height:170px;overflow:hidden;}

#box .list img{float:left;position:relative;display:inline-block}

#box .count{position:absolute;right:0;bottom:5px;}

#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}

#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}

</style>

window.onload = function () {

var oBox = document.getElementById("box");

var oList = document.getElementById("imgList");

var aImg = oBox.getElementsByTagName("img");

var timer = playTimer = null;

var index = i = 0;

var bOrder = true;

var aTmp = [];

var aBtn = null;

//生成数字按钮

for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>");

//插入元素

var oCount = document.createElement("ul");

oCount.className = "count";

oCount.innerHTML = aTmp.join("");

oBox.appendChild(oCount);

aBtn = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");

//初始化状态

cutover();

//按钮点击切换

for (i = 0; i < aBtn.length; i++) {

aBtn[i].index = i;

aBtn[i].onmouseover = function () {

index = this.index;

cutover()

}

function cutover() {

for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";

aBtn[index].className = "current";

startMove(-(index * aImg[0].offsetWidth))

}

function next() {

bOrder ? index++ : index--;

index <= 0 && (index = 0, bOrder = true);

index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)

cutover()

}

playTimer = setInterval(next, 3000);

//鼠标移入展示区停止自动播放

oBox.onmouseover = function () {

clearInterval(playTimer)

};

//鼠标离开展示区开始自动播放

oBox.onmouseout = function () {

playTimer = setInterval(next, 3000)

};

function startMove(iTarget) {

clearInterval(timer);

timer = setInterval(function () {

doMove(iTarget)

}, 30)

}

function doMove (iTarget) {

var iSpeed = (iTarget - oList.offsetLeft) / 10;

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

oList.offsetLeft == iTarget ? clearInterval(timer) : oList.style.left = oList.offsetLeft + iSpeed + "px"

}

</script>

</head>

<body>

</div>

</body>

</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>吾学网 &#8211; 5xue.cc &#8211; JS实现图片竖直方向轮播</title>
<style>
body,div,ul,li{margin:0;padding:0}
ul{list-style-type:none}
body{background:#333;text-align:center;font:12px/20px Arial;}
#box{position:relative;width:600px;height:255px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;overflow:hidden;}

#box .list{position:relative;width:600px;height:1275px;overflow:hidden;}

#box .count{position:absolute;right:0;bottom:5px;}
#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
</style>
<script type="text/javascript">
window.onload = function ()
{
	var oBox = document.getElementById("box");
	var oList = document.getElementById("imgList");
	var aImg = oBox.getElementsByTagName("img");
	var timer = playTimer = null;
	var index = i = 0;
	var bOrder = true;
	var aTmp = [];
	var aBtn = null;
	
	//生成数字按钮
	for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>");

	//插入元素
	var oCount = document.createElement("ul");
	oCount.className = "count";
	oCount.innerHTML = aTmp.join("");
	oBox.appendChild(oCount);	
	aBtn = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");
	
	//初始化状态
	cutover();
	
	//按钮点击切换
	for (i = 0; i < aBtn.length; i++)
	{
		aBtn[i].index = i;
		aBtn[i].onmouseover = function ()
		{
			index = this.index;
			cutover()
		}
	}
	
	function cutover()
	{
		for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
		aBtn[index].className = "current";			
		startMove(-(index * aImg[0].offsetHeight))
	}
	
	function next()
	{
		bOrder ? index++ : index--;
		index <= 0 && (index = 0, bOrder = true);
		index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)
		cutover()
	}
	
	playTimer = setInterval(next, 3000);
	
	//鼠标移入展示区停止自动播放
	oBox.onmouseover = function ()
	{
		clearInterval(playTimer)
	};
	
	//鼠标离开展示区开始自动播放
	oBox.onmouseout = function ()
	{
		playTimer = setInterval(next, 3000)
	};
	function startMove(iTarget)
	{
		clearInterval(timer);
		timer = setInterval(function ()
		{
			doMove(iTarget)
		}, 30)	
	}
	function doMove (iTarget)
	{		
		var iSpeed = (iTarget - oList.offsetTop) / 10;
		iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);		
		oList.offsetTop == iTarget ? clearInterval(timer) : oList.style.top = oList.offsetTop + iSpeed + "px"
	}
};
</script>
</head>
<body>
<div id="box">
	<div id="imgList" class="list">
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/1.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/2.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/3.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/4.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/5.jpg" />
	</div>
</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>吾学网 – 5xue.cc – JS实现图片竖直方向轮播</title>

<style>

body,div,ul,li{margin:0;padding:0}

ul{list-style-type:none}

body{background:#333;text-align:center;font:12px/20px Arial;}

#box{position:relative;width:600px;height:255px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;overflow:hidden;}

#box .list{position:relative;width:600px;height:1275px;overflow:hidden;}

#box .count{position:absolute;right:0;bottom:5px;}

#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}

#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}

</style>

window.onload = function ()

{

var oBox = document.getElementById("box");

var oList = document.getElementById("imgList");

var aImg = oBox.getElementsByTagName("img");

var timer = playTimer = null;

var index = i = 0;

var bOrder = true;

var aTmp = [];

var aBtn = null;

//生成数字按钮

for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>");

//插入元素

var oCount = document.createElement("ul");

oCount.className = "count";

oCount.innerHTML = aTmp.join("");

oBox.appendChild(oCount);

aBtn = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");

//初始化状态

cutover();

//按钮点击切换

for (i = 0; i < aBtn.length; i++)

{

aBtn[i].index = i;

aBtn[i].onmouseover = function ()

{

index = this.index;

cutover()

}

function cutover()

{

for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";

aBtn[index].className = "current";

startMove(-(index * aImg[0].offsetHeight))

}

function next()

{

bOrder ? index++ : index--;

index <= 0 && (index = 0, bOrder = true);

index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)

cutover()

}

playTimer = setInterval(next, 3000);

//鼠标移入展示区停止自动播放

oBox.onmouseover = function ()

{

clearInterval(playTimer)

};

//鼠标离开展示区开始自动播放

oBox.onmouseout = function ()

{

playTimer = setInterval(next, 3000)

};

function startMove(iTarget)

{

clearInterval(timer);

timer = setInterval(function ()

{

doMove(iTarget)

}, 30)

}

function doMove (iTarget)

{

var iSpeed = (iTarget - oList.offsetTop) / 10;

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

oList.offsetTop == iTarget ? clearInterval(timer) : oList.style.top = oList.offsetTop + iSpeed + "px"

}

};

</script>

</head>

<body>

</div>

</body>

</html>

浏览样例

Archive五月 2023