常用javascript特效
1.广告条显示、
<style type="text/css">
*{margin:0px;padding:0px;}
img{display:none;width: 250px;height: 200px;}
</style>
<script type="text/javascript">
//当前值
var current = 1;
//最大值
var max = 4;
function ad(){
//隐藏
document.getElementById("o" + current).style.display = "none";
//判断是否越界
if( current >= max ){
//还原
current = 0;
}
//下一个值
var next = current + 1;
//显示
document.getElementById("o" + next).style.display = "block";
//当前值递增
current++;
//每个一秒钟执行一次
window.setTimeout("ad()",1000);
}
2.改变背景颜色（更换皮肤）
<script type="text/javascript">
//修改背景颜色
function changeBG(color){
//修改对象的颜色
document.getElementById("body").style.backgroundColor= color;
}
</script>
<body>
<div style="width:100%;height:30px;padding-left:15px;">
<div class="c" style="background:yellow;" onmouseover="changeBG('yellow')"></div>
<div class="c" style="background:pink;" onmouseover="changeBG('pink')"></div>
<div class="c" style="background:red;" onmouseover="changeBG('red')"></div>
<div class="c" style="background:blue;" onmouseover="changeBG('blue')"></div>
<div class="c" style="background:green;" onmouseover="changeBG('green')"></div>
<div class="c" style="background:black;" onmouseover="changeBG('black')"></div>
</div>
<div id="body" style="width:100%;height:90%;padding-top:30px;background:red;"></div>
</body>
3.定时跳转
<script type="text/javascript">
//起始时间
var i = 5;
/** 定时跳转 **/
function time(){
//写出
document.getElementById("t").innerHTML = i--;
//判断
if( i == 0 ){
//跳转
window.location.href = "http://www.baidu.com";
}else{
//每个一秒钟执行一次
window.setTimeout("time()",1000);
}
}
</script>
<body onload="time()">
<div style="text-align:center;margin-top:200px;color:red;font-size:18px;font-weight:bolder;">
注册成功 , 当前页面会在 <span id="t"></span> 秒之后跳转 . <a href="##">如果没有跳转 , 则点击这里</a>
</div>
</body>
4.全选/全否 ，
//默认为 false 没有选中
var j = 0;
//全选 / 全否
function is(){
//获取所有的 复选对象
var h = document.getElementsByName("hobby");
for(i=0;i<h.length;i++){
if( j % 2 != 0){
//反选
h[i].checked = false;
}else{
h[i].checked = true;
}
}
j++;
}
5.全选/反选 ，
//全选/反选
function not(){
//获取所有的 复选对象
var h = document.getElementsByName("hobby");
for(i=0;i<h.length;i++){
if( h[i].checked ){
//反选
h[i].checked = false;
}else{
h[i].checked = true;
}
}
}
6.播放音频
<div> <span><embed src="/JavaEE/image/mp3.mp3" loop="true" autoplay="true" hidden="false"></span> </div>
7.隔行变色 事件绑定。
<script type="text/javascript">
onload = function(){
//获取指定的 ul 对象
var ul = document.getElementById("ul");
//获取 ul 里面的 li 对象
var lis = ul.getElementsByTagName("li");
//通过条目数 得到 奇数 和偶数 行 对象
for(i=0;i<lis.length;i++){
if( i % 2 == 0 ){
//奇数
lis[i].style.backgroundColor = "#6A5ACD";
//鼠标移除
lis[i].onmouseout = function(){
this.style.backgroundColor = "#6A5ACD";
}
//this代表当前对象lis[i]
}else{
//偶数
lis[i].style.backgroundColor = "#6495ED";
//鼠标移除
lis[i].onmouseout = function(){
this.style.backgroundColor = "#6495ED";
}
}
//鼠标移入
lis[i].onmouseover = function(){
this.style.backgroundColor = "yellow";
}
}
}
</script>
8.弹出广告
onload = function(){
//当前窗体大小<p>
</p>
var width = 670;
var height = 530;
//获取窗体大小
var w = (window.screen.width - width )/2;
var h = (window.screen.height - height - 40 )/2;
//加载页面就弹出广告窗口
window.open("AD.html","广告","width="+width+"px,height="+height+"px,left="+w+",top="+h+"px");
}
9.滑动广告
//滚动广告
onscroll = function(){
//获取滚动高度
var t = document.body.scrollTop;
//赋给当前的层对象
document.getElementById("div").style.top = t;
}
//隐藏广告
function hiddnAD(){
document.getElementById("div").style.visibility = "hidden";
}
<div id="div">
<ul>
<li id="li_1"> <a href="javascript:hiddnAD()" title="点击关闭广告">Close</a> </li>
<li>
<img src="/JavaEE/image/yellowDog.jpg">
</li>
</ul>
</div>