📄 effects_highlight_bg_image.html

📁 这是一款js组建

💻 HTML

字号:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title><script type="text/javascript" src="../../lib/prototype.js"></script>
<script type="text/javascript" src="../../src/scriptaculous.js?load=effects"></script><script type="text/javascript">//<![CDATA[Li = {	onMouseDown_image: function(event) {		new Effect.Highlight(this, {keepBackgroundImage:true});	},	onMouseDown_without: function(event) {		new Effect.Highlight(this);	}}window.onload = function() {	var li = $("with").getElementsByTagName('LI');	for (var i = 0; i < li.length; i++) {		li[i].onmousedown = Li.onMouseDown_image.bindAsEventListener(li[i]);	}	var li = $("without").getElementsByTagName('LI');	for (i = 0; i < li.length; i++) {		li[i].onmousedown = Li.onMouseDown_without.bindAsEventListener(li[i]);	}}
//]]></script><style type="text/css">body {
	color: black;
	background-color: white;	font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul {
	list-style: none;
	margin:0; padding:0;
}li  {	margin: 3px 0; padding: 3px 3em 3px 24px;
	border: 2px solid #456;
	background-image: url(icon.png);
	background-repeat: no-repeat;
	background-position: 3px 3px;}#with li {background-color: #cde;}#without li {background-color: #ced;}
</style></head><body><p>Test of <code>keepBackgroundImage</code> parameter for <code>Effect.Highlight</code>. Click items to show effect.</p><p>With the <code>keepBackgroundImage</code> parameter.</p><ul id="with"><li>One</li><li>Two</li><li>Three</li></ul><p>Without the parameter.</p><ul id="without"><li>One</li><li>Two</li><li>Three</li></ul></body></html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -