常用javascript特效

来源：互联网发布：淘宝网销售额是多少编辑：程序博客网时间：2024/06/04 12:04

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>

0 0