Web开发 – 吾学网

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>

浏览样例

5月 15, 2023

div高度自适应

作者 5xue 在 Html与Css

div高度自适应

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>吾学网 – 5xue.cc – div高度自适应</title>
<style>
*{
  margin: 0 auto;
  padding: 0;
}
html, body{
  width: 100%;
  height: 100%;
}
.frame{
  text-align: center;
  width: 100%;
  min-height: 100%;
}
.frame .head{
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0;
  background: #fff;
}
.frame .content{
  width: 100%;
  line-height: 60px;
  position: fixed;
  top: 40px;
  bottom: 30px;
  background: #336699;
  overflow: auto;
}
.frame .foot{
  width: 100%;
  height: 30px;
  position: fixed;
  bottom: 0;
  background: green;
}
</style>
</head>
<body>
<div class='frame'>
  <div class='head'>head</div>
  <div class='content'>高度自适应区域<br />1<br />2<br />3<br />4<br />5<br />6<br />7</div>
  <div class='foot'>foot</div>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>吾学网 – 5xue.cc – div高度自适应</title>

<style>

margin: 0 auto;

padding: 0;

}

html, body{

width: 100%;

height: 100%;

}

.frame{

text-align: center;

width: 100%;

min-height: 100%;

}

.frame .head{

width: 100%;

height: 40px;

position: fixed;

top: 0;

background: #fff;

}

.frame .content{

width: 100%;

line-height: 60px;

position: fixed;

top: 40px;

bottom: 30px;

background: #336699;

overflow: auto;

}

.frame .foot{

width: 100%;

height: 30px;

position: fixed;

bottom: 0;

background: green;

}

</style>

</head>

<body>

<div class='content'>高度自适应区域<br />1<br />2<br />3<br />4<br />5<br />6<br />7</div>

</div>

</body>

</html>

浏览样例

5月 12, 2023

js实现ECharts图表的下载

作者 5xue 在 Javascript

方法一：
ECharts自带的方法，在toolbox配置项，feature里面有一个saveAsImage方法：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>吾学网 &#8211; 5xue.cc &#8211; js实现ECharts图表的下载</title>
	<!--引入echarts.js -->
	<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个容器 -->
	<div id="container" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		//初始化echarts实例
		var myChart = echarts.init(document.getElementById('container'));
		//配置图表项和数据
		var option = {
			title: {
				text: '第一个 ECharts 实例'
			},
			tooltip: {},
			legend: {
				data:['销量']
			},
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis: {},
			toolbox: {
				show: true,
				feature: {saveAsImage: {}}
			},
			series: [{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};
		//绘制图表
		myChart.setOption(option, true);
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>吾学网 – 5xue.cc – js实现ECharts图表的下载</title>

</head>

<body>

//初始化echarts实例

var myChart = echarts.init(document.getElementById('container'));

//配置图表项和数据

var option = {

title: {

text: '第一个 ECharts 实例'

tooltip: {},

legend: {

data:['销量']

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

yAxis: {},

toolbox: {

show: true,

feature: {saveAsImage: {}}

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

//绘制图表

myChart.setOption(option, true);

</script>

</body>

</html>

查看样例

方法二：
Echarts提供一个接口getDataURL，通过它可以导出图表图片，返回一个 base64 的 URL。实现思路：

通过getDataURL()获取图片的base64编码字符；
字符解码，并转换成Blob对象；
通过Blob对象创建URL对象；
利用触发下载操作；

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>吾学网 &#8211; 5xue.cc &#8211; js实现ECharts图表的下载</title>
	<!--引入echarts.js -->
	<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个容器 -->
	<div id="container" style="width: 600px;height:400px;"></div>
	<input type="button" value="下载图表" onclick="saveImage()" />
	<script type="text/javascript">
		//初始化echarts实例
		var myChart = echarts.init(document.getElementById('container'));
		//配置图表项和数据
		var option = {
			title: {
				text: '第一个 ECharts 实例'
			},
			tooltip: {},
			legend: {
				data:['销量']
			},
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};
		//绘制图表
		myChart.setOption(option, true);

		function base64ToBlob(code) {
			let parts = code.split(';base64,');
			let contentType = parts[0].split(':')[1];
			let raw = window.atob(parts[1]);
			let rawLength = raw.length;
			let uInt8Array = new Uint8Array(rawLength);
			for (let i = 0; i < rawLength; ++i) {
				uInt8Array[i] = raw.charCodeAt(i);
			}
			return new Blob([uInt8Array], { type: contentType });
		}
		
		function saveImage() {
			let content = myChart.getDataURL();
			let aLink = document.createElement('a');
			let blob = this.base64ToBlob(content);
			let evt = document.createEvent("HTMLEvents");
			evt.initEvent("click", true, true);
			aLink.download = "ECharts报表.png";
			aLink.href = URL.createObjectURL(blob);
			aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window}));
		}
	</script>
</body>
</html>