实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Playit</title>
<link rel="stylesheet" type="text/css" href="tryit.css"/>
<script type="text/javascript">
	<!--
	function playit_onload()
	{
	var preval=""
	preval=document.getElementById("preselectedValue").value
	if (preval!="")
		{
		change_position(preval)
		var x=document.getElementsByTagName("input")
		var l=x.length
		for (i=0;i<l;i++)
			{
			if (x[i].value==preval)
				{
				x[i].checked=true
				}
			}
			document.getElementById("playitcontainer").style.display="block";
			}
	}

function click_position(obj)
	{
	
	change_position(obj.value)
	}

function change_position(val)
	{

var x=document.getElementById("demoParent")
	var y=document.getElementById("demoDIV").cloneNode(true)
	var cc;
	x.removeChild(document.getElementById("demoDIV"))
	x.appendChild(y)

var s="demoDIV"

s="myDIV"

document.getElementById(s).style.animationTimingFunction=val;

document.getElementById(s).style.WebkitAnimationTimingFunction=val;

document.getElementById(s).style.MozAnimationTimingFunction=val;

var x="css_animation-timing-function:<span id='enlargecssprop'>" + val + "</span>"
	var y="div#myDIV<br>	{<br>	###CSSPROP###;<br>	}<br>"
	var z=y.replace("###CSSPROP###",x)

document.getElementById("styleDIV").innerHTML=z

}

//-->
	</script>
<style>
	body
	{
	font-family:verdana;
	font-size:12px;
	}

#playitcontainer
	{
	width:960px;
	background-color:#e5eecc;
	border:1px solid #98bf21;
	margin:auto;
	display:none;
	}

#enlargecssprop
	{
	font-weight:bold;
	font-size:14px;
	color:#000000;
	}

#demoDIV
	{
	margin-left:10px;
	margin-top:3px;
	background-color:#ffffff;
	border:1px solid #c3c3c3;
	height:280px;
	width:430px;

}

div#myDIV
	{
	animation-timing-function:linear;
	}

#styleDIV
	{
	font-family:courier new;
	margin-left:10px;
	background-color:#f1f1f1;
	border:1px solid #c3c3c3;
	width:424px;
	padding:3px;
	color:#222222;
	}

div.demoHeader
	{
	font-size:14px;
	margin-top:5px;
	margin-left:5px;
	margin-bottom:2px;
	color:#617f10;
	}

div.playitFooter
	{
	font-size:13px;
	color:#617f10;
	padding:10px;
	}

#footer
	{
	margin:15px;
	}

div#myDIV
	{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	/* Safari and Chrome */
	-webkit-animation:mymove 5s infinite;
	-webkit-animation-timing-function:linear;
	}

@keyframes mymove
	{
	from {left:0px;}
	to {left:330px;}
	}

@-webkit-keyframes mymove /* Safari and Chrome */
	{
	from {left:0px;}
	to {left:330px;}
	}
	</style>
</head>
<body>

<div id="playitcontainer">
<div style="width:450px;float:left;">
<div class="demoHeader">CSS 属性:</div>
<div style="font-size:14px;margin:10px;font-weight:bold;">css_animation-timing-function:</div>
<form style="margin:15px;" action="javascript:return false;">
<input type="hidden" id="preselectedValue" value="linear" />
<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_1" value="linear" /><label for="value_1">linear</label></div>
<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_2" value="ease" /><label for="value_2">ease</label></div>
<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_3" value="ease-in" /><label for="value_3">ease-in</label></div>
<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_4" value="ease-out" /><label for="value_4">ease-out</label></div>
<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_5" value="ease-in-out" /><label for="value_5">ease-in-out</label></div>
</form>
<div id="footer" style="width: 420px;margin:0; position: static;"><footer>
<p><strong>注意:</strong> Internet Explorer 9及更早IE版本不支持animation-delay属性.</p>
</footer></div>
</div>
<div style="width:450px;float:left;">
<div class="demoHeader">结果:</div>
<div id="demoParent">
<div id="demoDIV" style=""><div>
<div id="myDIV"></div>
</div></div>
</div>
<div class="demoHeader">CSS 代码:</div>
<div id="styleDIV">
div#myDIV<br> {<br> css_animation-timing-function:<span id='enlargecssprop'>linear</span>;<br> }<br>
</div>
</div>
<div style="clear:both;"></div>
<div class="playitFooter" style="float:left;">点击上面的属性值然后查看效果</div>

<div style="clear:both;"></div>
</div>
<script type="text/javascript">playit_onload()</script>
</body>
</html>

​x
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Playit</title>
<link rel="stylesheet" type="text/css" href="tryit.css"/>
<script type="text/javascript">
    <!--
    function playit_onload()
    {
    var preval=""
    preval=document.getElementById("preselectedValue").value
    if (preval!="")
        {
        change_position(preval)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++)
            {
            if (x[i].value==preval)
                {
                x[i].checked=true