全部代码如下：
<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_srfor(i=0a&&i<a.length&&(x=a[i])&&x.oSrci++) x.src=x.oSrc
}
function MM_preloadImages() { //v3.0
var d=documentif(d.images){ if(!d.MM_p) d.MM_p=new Array()
var i,j=d.MM_p.length,a=MM_preloadImages.argumentsfor(i=0i<a.lengthi++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Imaged.MM_p[j++].src=a[i]}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x if(!d) d=documentif((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].documentn=n.substring(0,p)}
if(!(x=d[n])&&d.all) x=d.all[n]for (i=0!x&&i<d.forms.lengthi++) x=d.forms[i][n]
for(i=0!x&&d.layers&&i<d.layers.lengthi++) x=MM_findObj(n,d.layers[i].document)
if(!x &&d.getElementById) x=d.getElementById(n)return x
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.argumentsdocument.MM_sr=new Arrayfor(i=0i<(a.length-2)i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=xif(!x.oSrc) x.oSrc=x.srcx.src=a[i+2]}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('23.gif')">
<label><a href="http://www.baidu.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','23.gif',1)"><img src="22.gif" alt="点击前往百度" name="Image1" width="200" height="75" border="0" id="Image1" /></a></label>
</body>
</html>
倒计时的html代码：
<!DOCTYPE HTML><html>
<head>
<meta charset="utf-8">
<title>CSS3圆环倒计时-源码搜藏网</title>
<style>
.pie { width:200px height:200px background-color:blue border-radius:100px position:absolute }
.pie1 { clip:rect(0px,200px,200px,100px) -o-transform:rotate(0deg) -moz-transform:rotate(0deg) -webkit-transform:rotate(0deg) background:-moz-radial-gradient(20% 50% 0deg, #333, #0000ff) background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff)) }
.pie2 { clip:rect(0px,100px,200px,0px) -o-transform:rotate(0deg) -moz-transform:rotate(0deg) -webkit-transform:rotate(0deg) background:-moz-radial-gradient(80% 50% 0deg, #333, #0000ff) background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff)) }
.hold { width:200px height:200px position:absolute z-index:1 }
.hold1 { clip:rect(0px,200px,200px,100px) }
.hold2 { clip:rect(0px,100px,200px,0px) }
.bg { width:200px height:200px background-color:red border-radius:100px position:absolute box-shadow:0px 0px 8px #333 background:-moz-radial-gradient(0% 50% 0deg, #900, #ff0000) background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#900), to(#ff0000)) }
.time { width:160px height:160px margin:20px 0 0 20px background-color:#fff border-radius:100px position:absolute z-index:1 box-shadow:0px 0px 8px #333 inset text-align:center line-height:160px font-family:"Book Antiqua", Palatino, serif font-size:35px font-weight:bold text-shadow: 1px 1px 3px #333 }
.time em { background:#fff position:absolute top:62px left:12px height:18px width:140px opacity:0.4 }
</style>
</head>
<body>
<div class="hold hold1">
<div class="pie pie1"></div>
</div>
<div class="hold hold2">
<div class="pie pie2"></div>
</div>
<div class="bg"> </div>
<div class="time"><span></span><em></em></div>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script>
i = 0
j = 0
count = 0
MM = 4
SS = 59
MS = 9
totle = (MM+1)*600
d = 180*(MM+1)
MM = "0" + MM
function showTime(){
totle = totle - 1
if(totle==0){
clearInterval(s)
clearInterval(t1)
clearInterval(t2)
$(".pie2").css("-o-transform","rotate(" + d + "deg)")
$(".pie2").css("-moz-transform","rotate(" + d + "deg)")
$(".pie2").css("-webkit-transform","rotate(" + d + "deg)")
}else{
if(totle>0 && MS>0){
MS = MS - 1
if(MS < 10){MS = "0" + MS}
}
if(MS==0 && SS>0){
MS = 10
SS = SS - 1
if(SS < 10){SS = "0" + SS}
}
if(SS==0 && MM>0){
SS = 60
MM = MM - 1
if(MM < 10){MM = "0" + MM}
}
}
$(".time span").html(MM + ":" + SS + ":" + MS)
}
s = setInterval("showTime()",100)
function start1(){
i = i + 0.6
count = count + 1
if(count==300){
count = 0
clearInterval(t1)
t2 = setInterval("start2()",100)
}
$(".pie1").css("-o-transform","rotate(" + i + "deg)")
$(".pie1").css("-moz-transform","rotate(" + i + "deg)")
$(".pie1").css("-webkit-transform","rotate(" + i + "deg)")
}
function start2(){
j = j + 0.6
count = count + 1
if(count==300){
count = 0
clearInterval(t2)
t1 = setInterval("start1()",100)
}
$(".pie2").css("-o-transform","rotate(" + j + "deg)")
$(".pie2").css("-moz-transform","rotate(" + j + "deg)")
$(".pie2").css("-webkit-transform","rotate(" + j + "deg)")
}
t1 = setInterval("start1()",100)
</script>
<input onclick="window.open('view-source:' + window.location.href)" type="button" value="查看源代码" style="position:absolute right:0 top:0 width:80px height:30px">
</body>
</html>
直接复制代码，创建html文件，然后复制进去，就可以看到效果了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）