JS特效集

转载 2006年06月02日 10:25:00

1.鼠标放上来会有下划线
 <STYLE TYPE="text/css">
A { text-decoration: NONE}
A:hover {border-bottom:1px dashed #6099de }
</style>
<a class=middle href="#"><font color="#6099de">鼠标放上来会有下划线</font></a>

2.鼠标使图片抖动

脚本说明:
 
把如下代码加入<body>区域中
 <style>
<!--

.mouseBeOffMe {
border-top:    10px  solid #000000;
border-bottom: 10px  solid #000000;
border-left:   6px   solid #000000;
border-right:  10px  solid #000000;
}

.mouseBeOnMe {
border-top:    6px   solid #000000;
border-bottom: 14px  solid #000000;
border-left:   10px  solid #000000;
border-right:  6px   solid #000000;
}

.mouseBeDown {
border-top:    13px  solid #000000;
border-bottom: 7px   solid #000000;
border-left:   10px  solid #000000;
border-right:  6px   solid #000000;
}

.mouseBeUp {
border-top:    10px  solid #000000;
border-bottom: 10px  solid #000000;
border-left:   10px  solid #000000;
border-right:  6px   solid #000000;
}

//-->
</style>
<table border="0" cellpadding="7" cellspacing="0" bgcolor="#000000">
          <tr>
          <td bgcolor="#000000">
<img src    = "photo/slideshow1_1.jpg"
title       = "This is the Image One Label"
width       = "90"
height      = "90"
border      = "0"
class       = "mouseBeOffMe"
onmouseover = "this.className='mouseBeOnMe'"
onmousedown = "this.className='mouseBeDown'"
onmouseup   = "this.className='mouseBeUp'"
onmouseout  = "this.className='mouseBeOffMe'">

<img src    = "photo/slideshow1_2.jpg"
title       = "This is the Image Two Label"
width       = "90"
height      = "90"
border      = "0"
class       = "mouseBeOffMe"
onmouseover = "this.className='mouseBeOnMe'"
onmousedown = "this.className='mouseBeDown'"
onmouseup   = "this.className='mouseBeUp'"
onmouseout  = "this.className='mouseBeOffMe'">

<img src    = "photo/slideshow1_3.jpg"
title       = "This is the Image Three Label"
width       = "90"
height      = "90"
border      = "0"
class       = "mouseBeOffMe"
onmouseover = "this.className='mouseBeOnMe'"
onmousedown = "this.className='mouseBeDown'"
onmouseup   = "this.className='mouseBeUp'"
onmouseout  = "this.className='mouseBeOffMe'">
          </td>
          </tr>
          <tr>
          <td bgcolor="#141414" align="center">
<font color="#EFE7DF" size="2" face="Arial">鼠标移动到图片上时图片会闪动<br>
点住鼠标左键后图片也会闪动<br>
松开鼠标左键后图片会恢复正常<br>
          </td>
          </tr>
          </table>

3.窗口中间弹出
 <script>
window.open("http://www.cctv.com","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth-400)/2);
</script>
4.窗口延时弹出
脚本说明:
 
把如下代码加入<body>区域中
 <script type="text/javascript">
function writeText() {
    window.open("http://www.cctv.com");
}
setTimeout("writeText()",20000);
</script>
5.实用下拉导航条
<SCRIPT language=JavaScript>
function MM_findObj(n, d) { //v4.0
var p,i,x;if(!d) d=document;if((p=n.indexOf("?"))>0&&parent.frames.length){
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;}
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }}
//showhidelayer

function mOvr(src, cOvr)
{if (!src.contains(event.fromElement)) {src.style.cursor = "default";src.bgColor = cOvr;}}
function mOut(src, cOut)
{if (!src.contains(event.toElement)) {src.style.cursor = "default";src.bgColor = cOut;}}
//changetdcolor
</SCRIPT>
      <TABLE border=1 cellPadding=1 cellSpacing=1 width="100">
        <TBODY>
        <TR align=middle class=dmenu>
          <TD>
            <DIV id=menu01 style="POSITION: absolute">
            <DIV id=sub onmouseout="MM_showHideLayers('sub','','hide')"
            onmouseover="MM_showHideLayers('sub','','show')"
            style="HEIGHT: 30px; LEFT: -7px; POSITION: absolute; TOP: 12px; VISIBILITY: hidden; WIDTH: 90px; Z-INDEX: 11">
            <TABLE bgColor=#3c8830 border=0 cellPadding=1 cellSpacing=1
            width=228>
              <TBODY>
              <TR bgColor=#a5db97>
                <TD align=right>
                  <TABLE border=0 cellPadding=4 cellSpacing=1 class=46C92F
                  width=222>
                    <COLGROUP span=3>
                    <COL width="33%">
                    <COL width="33%">
                    <COL width="34%"></COLGROUP>
                    <TBODY>
                    <TR bgColor=#fafef4>
                      <TD><A class=pt03
                        href="sub_new.php">新闻时事</A></TD>
                      <TD><A class=pt03
                        href="sub_sport.php">体育竞技</A></TD>
                      <TD><A class=pt03
                        href="lottery.html">体彩足彩</A></TD></TR>
                    <TR bgColor=#fafef4>
                      <TD><A class=pt03
                        href="stock/index.php">移动股市</A></TD>
                      <TD><A class=pt03
                        href="sub_ysyl.php">影视娱乐</A></TD>
                      <TD><A class=pt03
                        href="sub_mrxh.php">每日笑话</A></TD></TR>
                    <TR bgColor=#fafef4>
                      <TD><A class=pt03
                        href="sub_xingzuo.php">星座预测</A></TD>
                      <TD><A class=pt03
                        href="sub_shjy.php">生活教育</A></TD>
                      <TD><A class=pt03
                        href="tvpg.php">电视节目</A></TD></TR>
                    <TR bgColor=#fafef4>
                      <TD><A class=pt03
                        href="weather.php">天气预报</A></TD>
                      <TD><A class=pt03
                        href="sub_en.php">英语课堂</A></TD>
                      <TD><A class=pt03
                        href="iqpg.php">脑筋急转弯</A></TD></TR>
                    <TR bgColor=#fafef4>
                      <TD><A class=pt03
                        href="sub_xl.php">心理测试</A></TD>
                      <TD><A class=pt03
                        href="sub_whitedew.php">白领专区</A></TD>
                      <TD><A class=pt03
                        href="sub_eurfootball.php">欧洲足坛</A></TD></TR>
                    <TR bgColor=#fafef4>
                      <TD><A class=pt03
                        href="sub_zhaopin.php">招聘信息</A></TD>
                      <TD><A class=pt03
                        href="sub_mms.php">彩信新闻</A></TD>
                      <TD><A class=pt03
                        href="sub_bjys.php">保健养生</A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></DIV><A
            class=menu href=""
            onmouseout="MM_showHideLayers('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide')"
            onmouseover="MM_showHideLayers('yycq','','hide','logo','','hide','ring','','hide','sub','','show','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide')">订阅</A>
          </TD>
          <TD>
            <DIV id=menu02 style="POSITION: absolute">
            <DIV id=mo onmouseout="MM_showHideLayers('mo','','hide')"
            onmouseover="MM_showHideLayers('mo','','show')"
            style="HEIGHT: 30px; LEFT: -7px; POSITION: absolute; TOP: 12px; VISIBILITY: hidden; WIDTH: 90px; Z-INDEX: 12">
            <TABLE bgColor=#3c8830 border=0 cellPadding=1 cellSpacing=1
            width=190>
              <TBODY>
              <TR bgColor=#a5db97>
                <TD align=right>
                  <TABLE border=0 cellPadding=4 cellSpacing=1 class=46C92F
                  width=184>
                    <COLGROUP span=2>
                    <COL width="55%">
                    <COL width="45%"></COLGROUP>
                    <TBODY>
                    <TR bgColor=#fafef4>
                      <TD><A class=pt03 href="mo/news.html"
                        target=_blank>资讯大全</A></TD>
                      <TD><A class=pt03
                        href="mo/stock.html"
                        target=_blank>股票资讯</A></TD></TR>
                    <TR bgColor=#fafef4>
                      <TD><A class=pt03
                        href="mo/service.html">短语/图片/铃声</A></TD>
                      <TD><A class=pt03
                        href="mo/shfw.html">生活服务</A></TD></TR>
                    <TR bgColor=#fafef4>
                      <TD><A class=pt03
                        href="mo/yxcs.html">游戏测试</A></TD>
                      <TD><A class=pt03
                        href="mo/help.html">点播帮助</A></TD></TR>
                    <TR bgColor=#fafef4>
                      <TD><A class=pt03
                        href="mo/0.html">纵横短信</A></TD>
                      <TD><A class=pt03
                        href="mo/bawang.html">霸王短信</A></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></DIV><A
            class=menu href="mo/"
            onmouseout="MM_showHideLayers('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','hide','brand','','hide','feature','','hide','product','','hide','help','','hide')"
            onmouseover="MM_showHideLayers('yycq','','hide','logo','','hide','ring','','hide','sub','','hide','mo','','show','brand','','hide','feature','','hide','product','','hide','help','','hide')">点播</A>
          </TD>
         </TR></TBODY></TABLE>

6.一个自己制作的相册,可选择查看图片的各种信息,非常酷
脚本说明:
 
把如下代码加入<body>区域中
 <SCRIPT LANGUAGE="JavaScript"> var javascript_version = 1.0;</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">  javascript_version = 1.1;</SCRIPT>
<script language=javascript>
self.name = "main"; // names current window as "main"

PicVar = 0;

// Object Fix

function Fix(DatVal, PicVal, TitVal, TxtVal) {

   this.DatVal = DatVal

   this.PicVal = PicVal

   this.TitVal = TitVal

   this.TxtVal = TxtVal

}

// Create new main array.

var SuzyArray = new Array()

// The following lines are the ONLY LINES in this whole script that you need to change!

// SuzyArray[PicVar++] = new Fix("date", "photo/picname.jpg", "pic title", "pic description")

SuzyArray[PicVar++] = new Fix("2/25/2003", "photo/2003-02-25-27.jpg", "Our house in the snow", "I took this beautiful picture this morning. The streets are <i>one solid sheet of ice</i> right now! It's insane. I don't think we'll be driving anywhere soon.")

SuzyArray[PicVar++] = new Fix("1/5/2003", "photo/2003-01-05-03.jpg", "Rain in the trees", "I had taken <b>Rainlin</b> out for a walk in the stroller, and we saw these cute little trees and stopped for a picture.")

SuzyArray[PicVar++] = new Fix("1/31/2003", "photo/2002-12-31-01.jpg", "Scott and Suzy", "I asked one of our friends to take this picture for us. Could my handsome hubby's eyes get any more <b>blue?</b> :)")

SuzyArray[PicVar++] = new Fix("12/7/2002", "photo/2002-12-07-05.jpg", "on the hayride", "Daddy was having a wonderful time on the hayride. Dylan wasn't too sure about it!")

SuzyArray[PicVar++] = new Fix("11/9/2002", "photo/2002-11-09-09.jpg", "Boys on wheels", "Daddy was holding Dylan up <i>with his knees!</i> Those skates sure are hard to stand up in, but once he got the knack for it Dylan didn't want to take them off.")

SuzyArray[PicVar++] = new Fix("10/30/2002", "photo/2002-10-30-01.jpg", "Dylan the Builder", "Here's Dylan, all dressed up and ready for Halloween! Everything in his life is Bob-the-builder related.")

SuzyArray[PicVar++] = new Fix("6/19/2002", "photo/2002-06-19-07.jpg", "Jabba's face", "It's hard, really hard, to get a picture of Jabba's face without him charging the camera.")

SuzyArray[PicVar++] = new Fix("6/11/2002", "photo/2002-06-11-11.jpg", "Rain behind the house", "The brick that makes up the outside of the house proved to be really pretty for framing pictures of the kidlets.")

SuzyArray[PicVar++] = new Fix("6/9/2002", "photo/2002-06-09-04.jpg", "Scott and Rainlin", "I just had to take some pictures of them before church.  They looked so nice!")

SuzyArray[PicVar++] = new Fix("6/9/2002", "photo/2002-06-09-01.jpg", "Rainlin and Susan", "We both wore our pretty blue flower dresses that Sunday.")

SuzyArray[PicVar++] = new Fix("6/7/2002", "photo/2002-06-07-24.jpg", "Kaytlyn and Rainlin playing dress-up", "Kaytlyn has a whole bunch of dress-up clothes, and Rain loves to go over to her house and play dress-up with her.")

SuzyArray[PicVar++] = new Fix("6/2/2002", "photo/2002-06-02-13.jpg", "The Three Amigos", "Dylan, Daddy, and Rainlin were watching Castaway on the couch.  We just moved all the furniture into that 'great room,' and everyone seems to like it better in there.")

SuzyArray[PicVar++] = new Fix("6/1/2002", "photo/2002-06-01-09.jpg", "Simon", "For those of you who have never met him, this is Simon.  He's the tatoo I have on my left leg.  I drew everything of the tattoo except for his head, which came from a greeting card my mother sent me while I was in the military.")

last = PicVar - 1;

current = 0;

function ShowSuzyPic(newpic) {

// (not working on some browsers)   document.playsound.play();

  current = newpic;

  SelectionBox = document.SuzyForm.SuzyDropdown;

  SelectionBox.options[current].selected = true;

  document.getElementById("SuzySpot").innerHTML = '<a href=javascript:SuzyPicRemote("' + SuzyArray[current].PicVal + '","last");><img name="PicShowing" src=' + SuzyArray[current].PicVal + ' height=200 border=0></a>';

  document.getElementById("Journal").outerHTML = '<div id=journal><br>' + SuzyArray[current].DatVal + '<p style="text-align:justify; text-indent:25px">' + SuzyArray[current].TxtVal + '</div>';

  if (document.SuzyForm.WhereView[1].checked) {

    timerID = setTimeout("SuzyPicRemote(SuzyArray[current].PicVal,'current')",1000)

  }

}

function RandomSuzyPic() {

  randompic = Math.floor(Math.random()*PicVar);

  last = current;

  ShowSuzyPic(randompic);

}

function PreviousSuzyPic() {

  last = current;

  current--;

  if(current<0) current = PicVar - 1;

  ShowSuzyPic(current);

}

function NextSuzyPic() {

  last = current;

  TotalImages = document.SuzyForm.SuzyDropdown.options.length;

  current++;

  if (current>=PicVar) current = 0;

  ShowSuzyPic(current);

}

function SuzyPicRemote(picName,whichPic) {

    ShowingImage = new Image();

    ShowingImage.src = picName;

    wid = ShowingImage.width + 50;

    hei = ShowingImage.height + 50;

  if (wid < 30 || hei < 30) {

    wid=650;

    hei=490;

  }

  if (screen.width < wid || screen.height < hei) {

    wid = screen.width - 50;

    hei = screen.height - 50;

  }

  OpenWindow = window.open("http://www.kitykity.com/photoalbum/clear.html", "remoteWin", "resizable=1, scrollbars=1, toolbar=0, left=15, top=10, width=" + wid + ", height=" + hei);

  OpenWindow.document.write('<html><body background=photo/parchment.jpg><img src=' + picName + '></body></html>');

  OpenWindow.document.close();

}

function FindPic() {

  TotalFound = 0;

  SearchString = document.SuzyForm.SearchWord.value;

  SearchString = SearchString.toLowerCase();

  WriteResults = window.open("clear.html","resultwindow","height=300, width=300, toolbar=0, status=0, menubar=0, resizable=1, scrollbars=1");

  WriteResults.document.open();

  WriteResults.document.write('<div style="text-align:center; font:8pt verdana">'

    + 'You searched for:<br><i>' + SearchString + '</i><br><b>Results:</b><br>');

  for (loop=0; loop < PicVar ; loop++) {

    Keyword = SuzyArray[loop].TxtVal;

    Keyword = Keyword.toLowerCase();

    URL = SuzyArray[loop].PicVal;

    title = SuzyArray[loop].TitVal;

    title = title.toLowerCase();

    SearchResult = Keyword.indexOf(SearchString);

    SearchResult2 = title.indexOf(SearchString);

    if (SearchResult != "-1" || SearchResult2 != "-1") {

      last = current;

      WriteResults.document.write('<br><a href=javascript:ShowSuzyPic(' + loop + '); target="main">' + title + '</a>');

      TotalFound++;

    }

  }

  WriteResults.document.write('<p><b>Returned ' + TotalFound + ' results.</b>');

  WriteResults.document.close();

  if(javascript_version > 1.0)  {

    //delay a bit here because IE4 encounters errors

    //when trying to focus a recently opened window

    setTimeout('WriteResults.focus();',250);

  }

 

}

// -->

</script>
<form name="SuzyForm">

<table border=0><tr><td>

<table style="padding:0px; margin:0px" border=0 cellspacing=0><tr align=center>

<td bgcolor=f9f9f9 style="background:url(photo/parchment.jpg); width:275px; border-top:2px groove #888888;border-left:4px groove #888888;border-bottom:4px groove #888888; padding:10px;  margin:0px">

<div id="SuzySpot">

<script language=javascript>

document.write('<a href=javascript:SuzyPicRemote("' + SuzyArray[current].PicVal + '","last");><img name="PicShowing" src=' + SuzyArray[current].PicVal + ' height=200 border=0></a>');

</script>
</div>
</td>
<td style="background:url(photo/parchmentring.jpg); width:36px; border-top:2px groove #888888; border-bottom:4px groove #888888" border=0> </td>
<td style="background:url(photo/parchment.jpg); border-top:2px groove #888888; border-right:4px groove #888888; border-bottom:4px groove #888888; padding:5px; padding-right:20px; width:225px; font:8pt verdana; color:#000044; margin-left:0px" valign=top>
<div id="Journal">
<script language=javascript>
document.write('<br>' + SuzyArray[current].DatVal + '<p style="text-align:justify; text-indent:25px">' + SuzyArray[current].TxtVal);
</script>
</div>
</td>
</tr></table>
<p>
<table border=0><tr align=center>
<td>
<input type=button value="<<" onClick="PreviousSuzyPic();" style="font:8pt verdana,helvetica,arial; text-align:center">
<input type=button value="随机" onClick="RandomSuzyPic();" style="font:8pt verdana,helvetica,arial">
<input type=button value=">>" onClick="NextSuzyPic();" style="font:8pt verdana,helvetica,arial; text-align:center">
<p>
<SELECT size=12 style='font:8pt verdana' name='SuzyDropdown' onChange='ShowSuzyPic(SuzyForm.SuzyDropdown.options.selectedIndex);'>
<script language=javascript>
  TotalImages = PicVar;
  for (loop=0; loop < TotalImages; loop++)
  {
  document.write("<option value=" + SuzyArray[loop].PicVal + ">" + SuzyArray[loop].TitVal + "</option>");
  }
</script>
</SELECT>
</td>
<td style="padding-left:25px; font:8pt verdana">
<p style="text-align:left"><input type=radio name="WhereView" value="chkLocal" CHECKED>- 在本页浏览图片
<br><input type=radio name="WhereView" value="chkRemote">- 在弹出窗口浏览图片</p>
<p>搜索图片:
  <br><input name="SearchWord" size=10 style="font:8pt verdana">
  <br><input type="button" value="查找" onClick="javascript:FindPic();" style="font:8pt verdana">
</td></tr></table>
</td></tr></table>
</FORM>
<p><SCRIPT Language="Javascript">
document.write("总共有  " + PicVar + "  张图片。最后更新:  " + document.lastModified +".");
</script>


7.申请按钮的等待
脚本说明:
 
把如下代码加入<body>区域中
 <FORM action=register.cgi method=post name=agree>
<CENTER><INPUT name=agreeb type=submit value="请认真查看<服务条款和声明> (15 秒后继续)">  
<INPUT onclick=history.back(-1) type=reset value=" 我 不 同 意 ">
</CENTER></form>
<SCRIPT language=javascript>
<!--
var secs = 15;
document.agree.agreeb.disabled=true;
for(i=1;i<=secs;i++) {
 window.setTimeout("update(" + i + ")", i * 1000);
}
function update(num) {
 if(num == secs) {
 document.agree.agreeb.value =" 我 同 意 ";
 document.agree.agreeb.disabled=false;
 }
else {
 printnr = secs-num;
 document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +" 秒后继续)";
 }
}
//-->
</SCRIPT>

相关文章推荐

平时收集的JS特效集合

  • 2013-09-18 11:52
  • 3.82MB
  • 下载

js特效集

  • 2007-06-16 11:51
  • 1.89MB
  • 下载

<一>初探js特效魅力之数组06

初探js特效魅力06 下面为大家介绍一下arguments的用法 当我们的函数要传参是,而且是不固定的,有时候要传一个或两个甚至多个,那我们就可以可以arguments了,例子如下: http://w...

js网页特效合集

  • 2017-06-15 22:54
  • 13.81MB
  • 下载

js特效集合

js 特效

文章列表     您正在查看 "js&css" 分类下的文章 Javascript特效--FLV在线播放器 2009-12-13 21:00 ...

js特效集合

  • 2011-10-18 10:44
  • 3.40MB
  • 下载

CSS3+JS 实现超炫的散列画廊特效

下面来介绍下我按照慕课网上的视频讲解实现的照片墙效果图。 首先看下最终实现的效果。效果包括如下: (1)当点击某张图片时,该图片移到中间区域并放大显示。当图片被点击时正 反面切换显示。 (2)某张图片...
  • cwzhsi
  • cwzhsi
  • 2015-06-15 20:47
  • 1742
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)