zoukankan      html  css  js  c++  java
  • Js_特效II

    字号缩放
      让文字大点,让更多的用户看的更清楚。(也可以把字体变为百分比来实现)
    <script type="text/javascript">  
    function doZoom(size)  
    {document.getElementById('zoom').style.fontSize=size+'px';}  
    </script>  
    <span id="zoom">需要指定大小的文字</span>  网页教学网http://www.webjx.com
    <a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>

      跳转菜单新窗口
    <select name="select" onchange="window.open(this.options[this.selectedIndex].value)">  
    <option value="http://www.microsoft.com/ie"> Internet Explorer</option>  
    <option value="http://www.microsoft.com"> Microsoft Home</option>  
    <option value="http://msdn.microsoft.com"> Developer Network</option>  
    </select>

      添加到收藏夹和设为首页

      添加到收藏夹
    <a href="javascript:window.external.addFavorite('http://链接','说明');">添加到收藏夹</a>

      设为首页
    <a href=# onclick=this.style.behavior='url(#default#homepage)';this.setHomePage ('http://链接');>设为首页</a>

      打开窗口即最大化
    <script language="JavaScript">   
    <!-- Begin   
    self.moveTo(0,0)    网页教学网http://www.webjx.com
    self.resizeTo(screen.availWidth,screen.availHeight)   
    // End -->   
    </script>

      加入背景音乐
    <bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE  
    <embed src="music.mid" autostart="true" loop="true" hidden="true">
    对Netscape ,IE 都适用  

      防止点击空链接时,页面往往重置到页首端
      代码“javascript:void(null)”代替原来的“#”标记,也可以用“#nogo”来代替啊?

      自动换行
     style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
      只对IE有用...FF的话用overflow:hidden来解决,不至于影响美观

    1.不同时间段显示不同问候语

      〈script Language="Javascript"〉  〈!--   var text=""; day = new Date( ); time = day.getHours( );   if (( time〉=0) && (time 〈 7 ))     text="夜猫子,要注意身体哦! "   if (( time 〉= 7 ) && (time 〈 12))     text="今天的阳光真灿烂啊,你那个朋友呢?"   if (( time 〉= 12) && (time 〈 14))     text="午休时间。您要保持睡眠哦!"   if (( time 〉=14) && (time 〈 18))     text="祝您下午工作愉快! "   if ((time 〉= 18) && (time 〈= 22))     text="您又来了,可别和MM聊太久哦!"   if ((time 〉= 22) && (time 〈 24))     text="您应该休息了!"   document.write(text)   //---〉  〈/script〉

      2.慢慢变大的窗口

      〈script Language="Javascript"〉  〈!--   var Windowsheight=100   var Windowswidth=100   var numx=5   function openwindow(thelocation){   temploc=thelocation   if   (!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById))   {     window.open(thelocation)     return   }   windowsize=window.open("","","scrollbars")   windowsize.moveTo(0,0)   windowsize.resizeTo(100,100)   tenumxt()   }   function tenumxt(){   if (Windowsheight〉=screen.availHeight-3)     numx=0   windowsize.resizeBy(5,numx)   Windowsheight+=5   Windowswidth+=5   if (Windowswidth〉=screen.width-5)   {     windowsize.location=temploc     Windowsheight=100     Windowswidth=100     numx=5     return   }   setTimeout("tenumxt()",50)   }   //--〉  〈/script〉  〈p〉〈a href="javascript:openwindow('http://www.ccjol.com')"〉进入〈/a〉

      3.改变IE地址栏的IE图标

      我们要先做一个16*16的icon(图标文件),保存为index.ico。把这个图标文件上传到根目录下并在首页〈head〉〈/head〉之间加上如下代码:   〈link REL = "Shortcut Icon" href="index.ico"〉

      4.让网页随意后退

      〈a href="javascript:history.go(-X)"〉X〈/a〉 //把X换成你想要后退在页数   //把“-”变成“+”就为前进

      5.鼠标指向时弹出信息框

      在〈body〉〈/body〉之间加上如下代码:   〈a href onmouseover="alert('弹出信息!')"〉显示的链接文字〈/a〉

      6.单击鼠标右键弹出添加收藏夹对话框

      在〈body〉〈/body〉之间加上如下代码:   〈script Language=Javascript〉 if (document.all)   document.body.onmousedown=new Function("if (event.button==2||event.button==3)   window.external.addFavorite('您的网址','您的网站名称)")   〈/script〉

      7.随机变换背景图象(一个可以刷新心情的特效)

      在〈head〉〈/head〉之间加上如下代码:   〈script Language="Javascript"〉  image = new Array(4); //定义image为图片数量的数组  image [0] = 'tu0.gif' //背景图象的路径  image [1] = 'tu1.gif'   image [2] = 'tu2.gif'   image [3] = 'tu3.gif'   image [4] = 'tu4.gif'   number = Math.floor(Math.random() * image.length);   document.write("〈BODY BACKGROUND="+image[number]+"〉");   〈/script〉

      8.表格的半透明显示效果

      〈head〉  〈style〉  .alpha{filter: Alpha(Opacity=50)} //50表示50%的透明度  〈/style〉 〈/head〉   〈body〉  〈table border="1" width="100" height="62" class="alpha" bgcolor="#F2A664" 〉  〈tr〉  〈td width="100%" height="62"〉  〈div align="center"〉很酷吧!〈/div〉  〈/td〉  〈/tr〉  〈/table〉 〈/body〉

    a. 拖动效果,16行JS

    <!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/html; charset=gb2312" />
    <title>Drag</title>
    <style>
    * { font-size:12px; font-family:Verdana,宋体; }
    html { margin:0px; padding:0px; overflow:auto; }
    body { margin:0px; padding:15px; }
    #w { position:absolute; 480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
    #t { line-height:20px; height:20px; 480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
    #winBody { height:248px; 480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
    </style>
    </head>
    <body>
    <div id="w">
     <div id="t">Demo Win - Drag me</div>
     <div id="winBody">Hello world</div>
    </div>
    </body>
    <script>
    (function(o,s,x,y,d){
     s = o.style;
     d = document;
     o.onselectstart = function(){ return false; }; //阻止选择
     o.onmousedown = function(e){
      e = e||event;
      x = e.clientX-o.offsetLeft;
      y = e.clientY-o.offsetTop;
      d.onmousemove = function(e){
       e = e||event;
       s.left = e.clientX - x + "px";
       s.top = e.clientY - y + "px";
      }
      d.onmouseup = function(){ d.onmouseup = d.onmousemove = ""; }
     }
    })(document.getElementById("w"))
    </script>
    </html>


    b. 淡入淡出效果,8行
    <!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/html; charset=gb2312" />
    <title>Fade</title>
    <style>
    * { font-size:12px; font-family:Verdana,宋体; }
    html { margin:0px; padding:0px; overflow:auto; }
    body { margin:0px; padding:15px; background-color:buttonface; }
    #w { position:absolute; 480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; filter:alpha(opacity=100); }
    #t { line-height:20px; height:20px; 480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
    #winBody { height:248px; 480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
    </style>
    </head>
    <body>
    <div id="w">
     <div id="t">Demo Win - Fade</div>
     <div id="winBody">Hello world</div>
    </div>
    </body>
    <script>
    (function(o,i,s){
     i=1;s=0.01;
     setInterval(function(){
      i+=s; s=i<0?0.01:(i>1?-0.01:s);
      if(o.filters)o.filters[0].opacity=i*100;
      else o.style.opacity=i;
     },1);
    })(document.getElementById("w"));
    </script>
    </html>

    c. 固定位置浮动效果,9行
    <!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/html; charset=gb2312" />
    <title>Fixed</title>
    <style>
    * { font-size:12px; font-family:Verdana,宋体; }
    html, body { margin:0px; padding:0px; overflow:hidden; }
    .b { margin:0px; padding:0px; overflow:auto; }
    .line0 { line-height:20px; padding:0px 15px; }
    .line1 { line-height:18px; background-color:lightblue; padding:0px 10px; }
    .w { position:absolute; right:10px; bottom:10px; 160px; height:240px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
    .t { line-height:20px; height:20px; 160px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
    .winBody { height:218px; 160px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
    </style>
    </head>
    <body>
    <div class="w">
     <div class="t">Demo Win - Fixed</div>
     <div class="winBody">Hello world</div>
    </div>
    </body>
    <script>
    //测试用,随机产生一定的内容
    for(var i=0; i<400; i++)document.write("<div class="line"+(i%2)+"">"+(new Array(20)).join((Math.random()*1000000).toString(36)+" ")+"</div>");
    //代码如下:
    new function(w,b,c,d,o){
     d=document;b=d.body;o=b.childNodes;c="className";
     b.appendChild(w=d.createElement("div"))[c]= "b";
     for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
     (window.onresize = function(){
      w.style.width = d.documentElement.clientWidth + "px";
      w.style.height = d.documentElement.clientHeight + "px";
     })();
    }
    </script>
    </html>

    d. 滑动弹出效果,6行
    <!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/html; charset=gb2312" />
    <title>Popup</title>
    <style>
    * { font-size:12px; font-family:Verdana,宋体; }
    html { margin:0px; padding:0px; overflow:auto; }
    body { margin:0px; padding:15px; }
    #w { position:absolute; 1px; height:1px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
    #t { line-height:20px; height:20px; 480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
    #winBody { height:248px; 480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
    </style>
    </head>
    <body>
    <div id="w">
     <div id="t">Demo Win - Popup</div>
     <div id="winBody">Hello world</div>
    </div>
    </body>
    <script>
    (function(o,t,i,j,s){
     i=j=1;s=o.style;
     t=setInterval(function(){
      o.offsetWidth<480?(s.width=(482-600/++i<<0)+"px"):(o.offsetHeight<270?s.height=(272-400/++j<<0)+"px":clearInterval(t));
     },15);
    })(document.getElementById("w"));
    </script>
    </html>

     3、让select控件可以自定义边框
    <style> 
    .box2{border:1px solid #00ff00;180px;height:17px;clip:rect(0px,179px,16px,0px);overflow:hidden;} 
    select{position:relative;left:-2px;top:-2px;font-size:12px;183px;line-height:14px;border:0px;color:#909993;} 
    </style> 
    <div class="box2"><select id=idselect1 onchange="select1();" hidefocus> 
    <option selected>网页名</option> 
    <option>网页制作</option> 
    <option>媒体动画</option> 
    <option>网站运营<option> 
    </select></div>


           4、CSS圆角
    <html xmlns:v> 
    <head> 
     <style> 
     v:* {behavior: url(#default#VML);} 
     </style> 
    </head> 
    <body>  
    <v:RoundRect style="position:relative;200;height:100px"> 
     <v:shadow on="T" type="single" color="#b3b3b3" offset="5px,5px"/> 
     <v:textbox style="font-size:12px">css实现真正的圆角表格</v:textbox> 
     </v:RoundRect> 
    </body> 
    </html>

    能够根据图片html代码自动生成右下角的数字导航按钮。

    一句话函数调用,实现图片切换特效。

    引用:
    picChange("图片ul列表的id" , 切换图片的方法引用 , 图片切换时间 , 图片移动方向);

    可扩展的封装方式,方便实现不同特效,源码中给出了淡出效果,和移出效果的实现方式。

    使用方法示例:

    引用:
    //直接切换效果
    picChange("picChange");
    //淡出效果
    picChange("picChange",fade,500);
    //向上移出效果
    picChange("picChange",move,500,"up");
    //向下移出效果
    picChange("picChange",move,500,"down"); 
    //向左移出效果
    picChange("picChange",move,500,"left"); 
    //向右移出效果
    picChange("picChange",move,500,"right");
     

    收藏本站
    <span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.webjx.com','网页教学网')" title="网页教学网">收藏本站</span> 

    或:
    <script Language="JavaScript"> 
      function bookmarkit() 
      { 
      window.external.addFavorite('http://www.webjx.com','网页教学网') 
      } 
      if (document.all)document.write('<a href="#" onClick="bookmarkit()">加入收藏夹</a>') 
      </script>


    通用的加入收藏夹
    <script type="text/javascript"> 
    // <![CDATA[ 
    function bookmark(){ 
    var title=document.title 
    var url=document.location.href 
    if (window.sidebar) window.sidebar.addPanel(title, url,""); 
    else if( window.opera && window.print ){ 
    var mbm = document.createElement('a'); 
    mbm.setAttribute('rel','sidebar'); 
    mbm.setAttribute('href',url); 
    mbm.setAttribute('title',title); 
    mbm.click();} 
    else if( document.all ) window.external.AddFavorite( url, title); 

    // ]]> 
    </script>   
    <a href="javascript:bookmark()">加入收藏夹</a>


    在IE6-7. FF2.0 OP9.0中测试通过

    设为首页
    <span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.webjx.com');" style="CURSOR: hand">设为首页</span>


    返回页首
    <img src="/imgs/top.gif" onClick="javascript:document.location='#top'" style="cursor:pointer;">

    字号缩放

      让文字大点,让更多的用户看的更清楚。(也可以把字体变为百分比来实现)

    <script type="text/javascript">  
    function doZoom(size)  
    {document.getElementById('zoom').style.fontSize=size+'px';}  
    </script>  
    <span id="zoom">需要指定大小的文字</span>  网页教学网http://www.webjx.com
    <a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>

      跳转菜单新窗口

    <select name="select" onchange="window.open(this.options[this.selectedIndex].value)">  
    <option value="http://www.microsoft.com/ie"> Internet Explorer</option>  
    <option value="http://www.microsoft.com"> Microsoft Home</option>  
    <option value="http://msdn.microsoft.com"> Developer Network</option>  
    </select>

      添加到收藏夹和设为首页

      添加到收藏夹

    <a href="javascript:window.external.addFavorite('http://链接','说明');">添加到收藏夹</a>
      设为首页

    <a href=# onclick=this.style.behavior='url(#default#homepage)';this.setHomePage ('http://链接');>设为首页</a>

      打开窗口即最大化

    <script language="JavaScript">   
    <!-- Begin   
    self.moveTo(0,0)    网页教学网http://www.webjx.com
    self.resizeTo(screen.availWidth,screen.availHeight)   
    // End -->   
    </script>

      加入背景音乐

    <bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE  
    <embed src="music.mid" autostart="true" loop="true" hidden="true">
    对Netscape ,IE 都适用 
     

      防止点击空链接时,页面往往重置到页首端

      代码“javascript:void(null)”代替原来的“#”标记,也可以用“#nogo”来代替啊?

      自动换行

     style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
      只对IE有用...FF的话用overflow:hidden来解决,不至于影响美观

    <!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/html; charset=utf-8" />
    <title>炫光波动效果 - Zehee</title>
    <script>
    var lightWave = function(T,left,thick,sharp,speed,vibration,amplitude,opacity){
     this.cont = T;//需要添加炫光的容器
     this.left = left;//炫光出生时的向右偏移量
     this.thick = thick;//粗细程度
     this.sharp = sharp;//尖锐程度
     this.speed = speed;//波动速度
     this.vibration = vibration;//单位时间内的振动频率
     this.amplitude = amplitude;//振幅
     this.opacity = opacity;//透明度
     this.cont.style.position = 'relative';
     this.move();
    }
    lightWave.prototype = {
     point:function(n,l,t,c,color){
      var p = document.createElement('p');
      p.innerHTML = '&nbsp;';
      p.style.top = t + 'px';
      p.style.left = l + 'px';
      p.style.width = 1 + 'px';
      p.style.height = n + 'px';
      p.style.filter = 'alpha(opacity='+this.opacity+')';
      p.style.lineHeight = 0;
      p.style.position = 'absolute';
      p.style.background = color;
      c.appendChild(p);
      return this;
     },
     color:function(){
      var c = ['0','3','6','9','c','f'];
      var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
      t.sort(function(){return Math.random()>0.5?-1:1;});
      return '#'+t.join('');
     },
     wave:function(){
      var l = this.left,t = this.wavelength,color = this.color();
      var c = document.createElement('div');
      c.style.top = this.amplitude+20+'px';
      c.style.position = 'absolute';
      c.style.opacity = this.opacity/100;
      for(var i=1;i<this.thick;i++){
       for(var j=0;j<this.thick*this.sharp-i*i;j++,l++){
        this.point(i,l,-9999,c,color);
       }
      }
      for(var i=this.thick;i>0;i--){
       for(var j=this.thick*this.sharp-i*i;j>0;j--,l++){
        this.point(i,l,-9999,c,color);
       }
      }
      this.cont.appendChild(c);
      return c;
     },
     move:function(){
      var wl = this.amplitude;
      var vibration = this.vibration;
      var w = this.wave().getElementsByTagName('p');
      for(var i=0;i<w.length;i++){
       w[i].i = i;
      }
      var m = function(){
       for(var i=0,len=w.length;i<len;i++){
        if(w[i].ori == true){
         w[i].i-=vibration;
         var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
         w[i].style.top = top+'px';
         if(parseFloat(w[i].style.top)<=-wl){
          w[i].ori = false;
         }
        }else{
         w[i].i+=vibration;
         var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
         w[i].style.top = top+'px';
         if(parseFloat(w[i].style.top)>=wl){
          w[i].ori = true;
         }
        }
       }
      }
      setInterval(m,this.speed);
     }
    }
    window.onload = function(){
     var targetDom = document.body;
     new lightWave(targetDom,0,3,36,120,6,20,40);
     new lightWave(targetDom,50,2,70,120,10,30,30);
    }
    </script>
    </head>
    <body style="background:#000;margin-top:100px">
    </body>
    </html>

    参数:
    var  lightWave = function (T,left,thick,sharp,speed,vibration,amplitude,opacity)
    {
           this .cont = T; //需要添加炫光的容器
           this .left = left; //炫光出生时的向右偏移量
           this .thick = thick; //粗细程度
           this .sharp = sharp; //尖锐程度
           this .speed = speed; //波动速度
           this.vibration = vibration; //单位时间内的振动频率
           this .amplitude = amplitude; //振幅
           this .opacity = opacity; //透明度
           this .cont.style.position = 'relative';
           this .move();
    }

    <!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/html; charset=utf-8" />
    <title>炫光波动效果 - Zehee</title>
    <script>
    var lightWave = function(T,hz,top,left,thick,sharp,particle,velocity,amplitude,opacity){
     this.cont = T;//需要添加炫光的容器
     this.hz = parseFloat(hz);//刷新率
     this.top = parseFloat(top);//炫光出生时的向下偏移量
     this.left = parseFloat(left);//炫光出生时的向右偏移量
     this.thick = parseFloat(thick);//粗细程度
     this.sharp = parseFloat(sharp);//尖锐程度
     this.particle = parseFloat(particle);//组成粒子的大小
     this.velocity = parseFloat(velocity);//波速
     this.amplitude = parseFloat(amplitude);//振幅
     this.opacity = parseFloat(opacity);//透明度
     this.cont.style.position = 'relative';
     this.move();
    }
    lightWave.prototype = {
     point:function(n,left,t,wavecont,color,particle){
      var p = document.createElement('p');
      p.i = left;
      p.innerHTML = '&nbsp;';
      p.style.top = t + 'px';
      p.style.left = left + 'px';
      p.style.width = particle + 'px';
      p.style.height = n + 'px';
      p.style.filter = 'alpha(opacity='+this.opacity+')';
      p.style.lineHeight = 0;
      p.style.fontSize = 0;
      p.style.position = 'absolute';
      p.style.background = color;
      wavecont.appendChild(p);
      return this;
     },
     color:function(){
      var c = ['0','3','6','9','c','f'];
      var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
      t.sort(function(){return Math.random()>0.5?-1:1;});
      return '#'+t.join('');
     },
     wave:function(){
      var left = this.left,t = this.wavelength,color = this.color(),particle = this.particle,l = 0;
      var wavecont = document.createElement('div');
      wavecont.style.top = this.amplitude+this.top+'px';
      wavecont.style.left = left+'px';
      wavecont.style.position = 'absolute';
      wavecont.style.opacity = this.opacity/100;
      for(var i=1;i<this.thick;i++){
       for(var j=0;j<this.thick*this.sharp-i*i;j++,l++){
        this.point(i,l*particle,-9999,wavecont,color,particle);
       }
      }
      for(var i=this.thick;i>0;i--){
       for(var j=this.thick*this.sharp-i*i;j>0;j--,l++){
        this.point(i,l*particle,-9999,wavecont,color,particle);
       }
      }
      this.cont.appendChild(wavecont);
      return wavecont;
     },
     move:function(){
      var wl = this.amplitude;
      var velocity = this.velocity;
      var w = this.wave().getElementsByTagName('p');
      var m = function(){
       for(var i=0,len=w.length;i<len;i++){
        if(w[i].ori == true){
         w[i].i-=velocity;
         var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
         w[i].style.top = top+'px';
         if(parseFloat(w[i].style.top)<=-wl){
          w[i].ori = false;
         }
        }else{
         w[i].i+=velocity;
         var top = w[i].i%180==90?0:wl*Math.cos(w[i].i*Math.PI/180);
         w[i].style.top = top+'px';
         if(parseFloat(w[i].style.top)>=wl){
          w[i].ori = true;
         }
        }
       }
      }
      setInterval(m,this.hz);
     }
    }
    </script>
    </head>
    <body>
    <div id="bar" style="font-size:12px;float:left;border:1px solid #666;padding:10px;">
    <p><input id="hz" type="text" value="120" /><label>- 刷新率</label></p>
    <p><input id="top" type="text" value="20" /><label>- 向下偏移量</label></p>
    <p><input id="left" type="text" value="10" /><label>- 向左偏移量</label></p>
    <p><input id="thick" type="text" value="3" /><label>- 粗细程度</label></p>
    <p><input id="sharp" type="text" value="9" /><label>- 尖锐程度</label></p>
    <p><input id="particle" type="text" value="4" /><label>- 粒子长度</label></p>
    <p><input id="velocity" type="text" value="6" /><label>- 波速</label></p>
    <p><input id="amplitude" type="text" value="20" /><label>- 振幅</label></p>
    <p><input id="opacity" type="text" value="40" /><label>- 透明度</label></p>
    <p><input type="button" value="生成" id="born" /> <input type="button" value="清除" id="clear" /></p>
    </div>
    <div id="waves" style="background:#000;600px;height:600px;float:left;margin-left:20px;dispaly:inline">&nbsp;</div>
    <script>
    var waves = document.getElementById('waves');
    var born = document.getElementById('born');
    var clear = document.getElementById('clear');
    born.onclick = function(){
     var hz = document.getElementById('hz').value;
     var top = document.getElementById('top').value;
     var left = document.getElementById('left').value;
     var thick = document.getElementById('thick').value;
     var sharp = document.getElementById('sharp').value;
     var particle = document.getElementById('particle').value;
     var velocity = document.getElementById('velocity').value;
     var amplitude = document.getElementById('amplitude').value;
     var opacity = document.getElementById('opacity').value;
     new lightWave(waves,hz,top,left,thick,sharp,particle,velocity,amplitude,opacity);
    }
    clear.onclick = function(){window.location.reload();}
    </script>
    </body>
    </html>

    参数:
    var  lightWave = function (T,hz,top,left,thick,sharp,particle,velocity,amplitude,opacity){
           this .cont = T; //需要添加炫光的容器
           this .hz = hz; //刷新率
           this .top = top; //炫光出生时的向下偏移量
           this .left = left; //炫光出生时的向右偏移量
           this .thick = thick; //粗细程度
           this .sharp = sharp; //尖锐程度
           this .particle= particle; //粒子长度
           this.velocity= velocity; //波速
           this .amplitude = amplitude; //振幅
           this .opacity = opacity; //透明度
           this .cont.style.position = 'relative';
           this .move();
    }

     

     

    a. 拖动效果

     

    <!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/html; charset=gb2312" />
    <title>Drag</title>
    <style>
    * { font-size:12px; font-family:Verdana,宋体; }
    html { margin:0px; padding:0px; overflow:auto; }
    body { margin:0px; padding:15px; }
    #w { position:absolute; 480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
    #t { line-height:20px; height:20px; 480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
    #winBody { height:248px; 480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
    </style>
    </head>
    <body>
    <div id="w">
     <div id="t">Demo Win - Drag me</div>
     <div id="winBody">Hello world</div>
    </div>
    </body>
    <script>
    (function(o,s,x,y,d){
     s = o.style;
     d = document;
     o.onselectstart = function(){ return false; }; //阻止选择
     o.onmousedown = function(e){
      e = e||event;
      x = e.clientX-o.offsetLeft;
      y = e.clientY-o.offsetTop;
      d.onmousemove = function(e){
       e = e||event;
       s.left = e.clientX - x + "px";
       s.top = e.clientY - y + "px";
      }
      d.onmouseup = function(){ d.onmouseup = d.onmousemove = ""; }
     }
    })(document.getElementById("w"))
    </script>
    </html>

     

    b. 淡入淡出效果
    <!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/html; charset=gb2312" />
    <title>Fade</title>
    <style>
    * { font-size:12px; font-family:Verdana,宋体; }
    html { margin:0px; padding:0px; overflow:auto; }
    body { margin:0px; padding:15px; }
    #w { position:absolute; 480px; height:270px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; filter:alpha(opacity=100); }
    #t { line-height:20px; height:20px; 480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
    #winBody { height:248px; 480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
    </style>
    </head>
    <body>
    <div id="w">
     <div id="t">Demo Win - Fade</div>
     <div id="winBody">Hello world</div>
    </div>
    </body>
    <script>
    (function(o,i,s){
     i=1;s=0.01;
     setInterval(function(){
      i+=s; s=i<0?0.01:(i>1?-0.01:s);
      if(o.filters)o.filters[0].opacity=i*100;
      else o.style.opacity=i;
     },1);
    })(document.getElementById("w"));
    </script>
    </html>

     

     c. 固定位置浮动效果
    <!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/html; charset=gb2312" />
    <title>Fixed</title>
    <style>
    * { font-size:12px; font-family:Verdana,宋体; }
    html, body { margin:0px; padding:0px; overflow:hidden; }
    .b { margin:0px; padding:0px; overflow:auto; }
    .line0 { line-height:20px; padding:0px 15px; }
    .line1 { line-height:18px; background-color:lightblue; padding:0px 10px; }
    .w { position:absolute; right:10px; bottom:10px; 160px; height:240px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
    .t { line-height:20px; height:20px; 160px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
    .winBody { height:218px; 160px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
    </style>
    </head>
    <body>
    <div class="w">
     <div class="t">Demo Win - Fixed</div>
     <div class="winBody">Hello world</div>
    </div>
    </body>
    <script>
    //测试用,随机产生一定的内容
    for(var i=0; i<400; i++)document.write("<div class="line"+(i%2)+"">"+(new Array(20)).join((Math.random()*1000000).toString(36)+" ")+"</div>");
    //代码如下:
    new function(w,b,c,d,o){
     d=document;b=d.body;o=b.childNodes;c="className";
     b.appendChild(w=d.createElement("div"))[c]= "b";
     for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
     (window.onresize = function(){
      w.style.width = d.documentElement.clientWidth + "px";
      w.style.height = d.documentElement.clientHeight + "px";
     })();
    }
    </script>
    </html>

     

    d. 滑动弹出效果
    <!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/html; charset=gb2312" />
    <title>Popup</title>
    <style>
    * { font-size:12px; font-family:Verdana,宋体; }
    html { margin:0px; padding:0px; overflow:auto; }
    body { margin:0px; padding:15px; }
    #w { position:absolute; 1px; height:1px; overflow:hidden; border:2px groove #281; cursor:default; -moz-user-select:none; }
    #t { line-height:20px; height:20px; 480px; overflow:hidden; background-color:#27C; color:white; font-weight:bold; border-bottom:1px outset blue; text-align:center; }
    #winBody { height:248px; 480px; overflow-x:hidden; overflow-y:auto; border-top:1px inset blue; padding:10px; text-indent:10px; background-color:white; }
    </style>
    </head>
    <body>
    <div id="w">
     <div id="t">Demo Win - Popup</div>
     <div id="winBody">Hello world</div>
    </div>
    </body>
    <script>
    (function(o,t,i,j,s){
     i=j=1;s=o.style;
     t=setInterval(function(){
      o.offsetWidth<480?(s.width=(482-600/++i<<0)+"px"):(o.offsetHeight<270?s.height=(272-400/++j<<0)+"px":clearInterval(t));
     },15);
    })(document.getElementById("w"));
    </script>
    </html>

     

    图片随机显示是一个应用非常广泛的技巧。比如随机banner的显示,当你进入一个网站时它的banner总是不同的,或者总有内容不同的提示(tips),大家在网上浏览时会经常发现这样的例子。使用这种技术,不但能在一定的空间里放入更多的内容,还可以给人一种经常更新的假象喔。

    怎么样心动了吧?其实只要你有一点点html和javascript 的基础,一切都是这么简单。follow me,让我们来看看她随机的奥密。

    让我们从一个简单的例子开始吧。平常我们在页面中加入图片都是用<img src="图片">来完成。如果我们要随机显示3张不同的图片就要对这句代码进行小小的修改,首先加入<script>标记:

    以下是引用片段:
    <script language=javascript></script>  
    然后在这段标记内把<img src="图片">用document.write("")的型式放进去,就成了  
    document.write("<img src=图片>") 


    现在我们来完成最关建的一段:

    以下是引用片段:
    id=Math.round(Math.random()*2)+1 


    这样取得随机数为1,2,3将你要显示的图片改名为1.gif,2.gif,3.gif,ok!最后的代码是:

    以下是引用片段:
    <script language=javascript> 
    id=Math.round(Math.random()*2)+1 
    document.write("<img src="+id+".gif>") 
    </script> 


    试一下,是不是不错?那如果我的每一张图片都对应了一个超链接该怎么办呢?
    我们还是来假设一下有3张图片,1.gif,2.gif,3.gif,分别对应的链接是url1,url2,url3。
    为了让图片和链接一一对应,我们要设置一个数组image来放置链接的地址,如下:

    以下是引用片段:
    var image=new Array(3) 
    image.length=3 
    image[1]="url1" 
    image[2]="url2" 
    image[3]="url3" 


    为了将与图片对应的链接取出来,我们还要定义一个数组imageurl=image[id]
    原理是这样的:
    当页面被读入时,取一个随机数,假设是2即id=2,那么如上我们可轻松的完成2.gif在页面的显示。然后我们可以看到:imageurl=image[2]而image[2]="url2",剩下的事就好办了。完整的代码如下:

    以下是引用片段:
    <script language=javascript> 
    var image=new Array(3) 
    image.length=3 
    image[1]="url1" 
    image[2]="url2" 
    image[3]="url3" 
    id=Math.round(Math.random()*2)+1 
    imageurl=image[id] 
    document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>") 
    </script>

    朋友,“天上掉陷饼”都听说过吧?呵呵,陷饼它算个么,今天教你一个天上掉¥的招儿,并且~~哗啦啦地掉!哈~哈~哈,来吧^_*

      首先看效果

    将下面的JavaScript代码加到< head >区就成了:


    < Script Language="JavaScript" >
    < !-- Begin
    var no = 30;
    //设定下落字符数量
    var speed = 5;
    //设定字符下落的速度
    var ns4up = (document.layers) ? 1 : 0;
    var ie4up = (document.all) ? 1 : 0;
    //NETSCAP和IE两种不同浏览器各自进行定义
    var s, x, y, sn, cs;
    var a, r, cx, cy;
    var i, doc_width = 800, doc_height = 600;
    //设定字符下落区域为800*600
    if (ns4up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
    }
    else
    if (ie4up) {
    doc_width = document.body.clientWidth;
    doc_height = document.body.clientHeight;
    }
    //NETSCAP和IE两种浏览器有别
    x = new Array();
    y = new Array();
    r = new Array();
    cx = new Array();
    cy = new Array();
    s = 8;
    for (i = 0; i < no; ++ i) {
    initRain();
    //定义变量数组x, y, cx, cy, s
    if (ns4up) {
    if (i == 0) {
    document.write("< layer name="dot"+ i +"" left="1" ");
    document.write("top="1" visibility="show" >< font color="white" >");
    document.write(",¥< /font >< /layer >");
    }
    else {
    document.write("< layer name="dot"+ i +"" left="1" ");
    document.write("top="1" visibility="show" >< font color="white" >");
    document.write(", $ < /font >< /layer >");
    }
    }
    //当i==0满足与否时,NETSCAP中的表现
    else
    if (ie4up) {
    if (i == 0) {
    document.write("< div id="dot"+ i +"" style="POSITION: ");
    document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
    document.write("visible; TOP: 15px; LEFT: 15px;" >< font size="10" color="white" >");
    document.write("¥< /font >< /div >");
    }
    else {
    document.write("< div id="dot"+ i +"" style="POSITION: ");
    document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
    document.write("visible; TOP: 15px; LEFT: 15px;" >< font size="10" color="white" >");
    document.write(" $ < /font >< /div >"); //设定要下落的的字符(¥、$)及位置
    }
    }
    //当i==0满足与不满足时,IE浏览器中的表现
    }
    function initRain() {
    a = 6;
    r[i] = 1;
    sn = Math.sin(a);
    cs = Math.cos(a);
    cx[i] = Math.random() * doc_width + 1;
    cy[i] = Math.random() * doc_height + 1;
    x[i] = r[i] * sn + cx[i];
    y[i] = cy[i];
    }
    function makeRain() {
    r[i] = 1;
    cx[i] = Math.random() * doc_width + 1;
    cy[i] = 1;
    x[i] = r[i] * sn + cx[i];
    y[i] = r[i] * cs + cy[i];
    }
    function updateRain() {
    r[i] += s;
    x[i] = r[i] * sn + cx[i];
    y[i] = r[i] * cs + cy[i];
    }
    function raindropNS() {
    for (i = 0; i < no; ++ i) {
    updateRain();
    //定义变量数组 a , sn , cs , cx, cy, s
    if ((x[i] < = 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
    makeRain();
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
    }
    document.layers["dot"+i].top = y[i];
    document.layers["dot"+i].left = x[i];
    }
    setTimeout("raindropNS()", speed);
    }
    function raindropIE() {
    for (i = 0; i < no; ++ i) {
    updateRain();
    //在NETSCAP浏览器中的付值过程
    if ((x[i] < = 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
    makeRain();
    doc_width = document.body.clientWidth;
    doc_height = document.body.clientHeight;
    }
    document.all["dot"+i].style.pixelTop = y[i];
    document.all["dot"+i].style.pixelLeft = x[i];
    }
    setTimeout("raindropIE()", speed);
    }
    if (ns4up) {raindropNS(); }
    else
    if (ie4up) {raindropIE(); }
    //在IE浏览器中的付值过程
    // End -- >
    < /Script >

    实现跑马灯的方法很多,本文详细介绍JavaScript/JS实现标题栏跑马灯。

      将下代码copy入你网页的和中的合适地方即可。

    以下是引用片段:
    <SCRIPT LANGUAGE=JAVASCRIPT> 
    <!-- 
    var msg = "让我们做得更好"; 
    var speed = 300; 
    var msgud = " " + msg; 
    function titleScroll() { 
    if (msgud.length msgud = msgud.substring(1, msgud.length); 
    document.title = msgud.substring(0, msg.length); 
    window.setTimeout("titleScroll()", speed); 

    --> 
    </SCRIPT>


      将你Html文件的改为如下:

    以下是引用片段:
    <BODY onload="window.setTimeout('titleScroll()', 500)">


      注:如果您象我一样把它放在窗口中,请将document.title改为parent.document.title

    function cls_marquee(id,id1,id2,sp){
        this.obj_id=id;
        this.obj_id1=id1;
        this.obj_id2=id2;
        this.speed=sp;
        eval(this.obj_id2+".innerHTML="+this.obj_id1+".innerHTML");
        
         function Marquee(){
           if(eval(id2).offsetTop-eval(id).scrollTop<=0)
                  eval(id).scrollTop-=eval(id1).offsetHeight
              else{
                  eval(id).scrollTop++
                }
                }
             var MyMar=setInterval(Marquee,sp)
             eval(this.obj_id).onmouseover=function() {clearInterval(MyMar)}
             eval(this.obj_id).onmouseout=function() {MyMar=setInterval(Marquee,sp)}
      }

  • 相关阅读:
    BZOJ 1391: [Ceoi2008]order
    BZOJ 4504: K个串
    2019 年百度之星·程序设计大赛
    POJ 2398 Toy Storage (二分 叉积)
    POJ 2318 TOYS (二分 叉积)
    HDU 6697 Closest Pair of Segments (计算几何 暴力)
    HDU 6695 Welcome Party (贪心)
    HDU 6693 Valentine's Day (概率)
    HDU 6590 Code (判断凸包相交)
    POJ 3805 Separate Points (判断凸包相交)
  • 原文地址:https://www.cnblogs.com/ingstyle/p/4668308.html
Copyright © 2011-2022 走看看