几则常用的ＪＳ特效

最新推荐文章于 2024-07-20 10:36:53 发布

kooyeed

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量1.2k

点赞数

分类专栏： ASP 文章标签： javascript function border class scroll .net

ASP 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文字滚动连接代码
<TABLE cellSpacing=1 cellPadding=0 width=777 bgColor=#ff6600 border=0>
<TBODY>
<TR align=middle>
<TD class=unnamed align=middle><SPAN class=0d><FONT color=black></FONT></SPAN></TD>
<TD align=middle bgColor=#D3E9F8 colSpan=7>
<DIV align=center>
<MARQUEE id=link οnmοuseοver=link.stop() style="WIDTH: 692px; HEIGHT: 16px" οnmοuseοut=link.start() scrollAmount=3 align="middle"> <A title=自助网站 href=http://liuzhiya.home.sunbo.net target=_blank>liuzhiya工作室</FONT></A>-<A href="http://zhw.bjcool.net" target=_blank>心语工作室</FONT></A>

</DIV></TD></TR></TBODY></TABLE>

*******************************************************
图片全景旋转的技巧

//修改图像地址，注意要全部相同
<table width="200" border="0" cellspacing="0" cellpadding="0" height="143" style="border:#333366 3 double">
    <tr>
      <td background="photo/3d2.jpg" title="360全景图单击开始播放"><marquee style="cursor:hand" behavior=scroll direction=left width=200 height=143 scrollamount=2 scrolldelay=0 loop=1 οnclick='this.start()' οnmοuseοver='this.stop()' οnmοuseοut='this.start()'><img src="photo/3d2.jpg" width="811" height="143"><img src="photo/3d2.jpg" width="811" height="143"><img src="photo/3d2.jpg" width="811" height="143"><img src="photo/3d2.jpg" width="811" height="143"></marquee></td>
    </tr>
</table>
**********************************************
立体的页面边框

********************************
动感标题栏
<script language="JavaScript">

</script>
--
*****************************************************
破解不让使用鼠标右键的网站大法

如何破解不让使用鼠标右键的网站现在有好多网站不能使用鼠标右键，当你点击右键时就弹出一个窗口说些莫名其妙的话。当你看到网页上有精美图片或者精彩文字想保存时，一按鼠标右键就弹出那个窗口，很是讨厌。其实这只是利用JAVA语言实现的一个很简单的锁住鼠标右键的功能，同样也很简单就能使它失效，目前已知的有如下几种,破解如下：
第一种也是最简单的一种,在页面中点击右键就会弹出一个小窗口说一些莫名其妙的话:
1：在页面目标上按下鼠标右键，弹出窗口，这是不要松开右键。
2：将鼠标移到窗口的确定按钮上，同时按下左键。
3：现松开鼠标左键，这时窗口消失。
4：再将鼠标移到目标上松开鼠标右键，OK，你想要得功能全出来了。
第二种网站你一点鼠标右键就出现添加到收藏夹的窗口，用以上的方法不能破解，因为你用鼠标左键点取消的同时旧失去了右键的目标的焦点，不过要破也不难，如下方法：
1：在目标上电鼠标右键，出现添加到收藏夹的窗口，这时不要松开右键，移动鼠标到取消按钮上点击左键,窗口消失。
2：移动鼠标到你的目标上,这是鼠标是一个没有焦点的圆圈,没关系,再按下左键不要松开,此时鼠标的左右键全部按下了.现松开右键,好,功能出来了.将鼠标移动到你想要得功能上,松开左键.
3:okok,想怎么办就看你高兴了. 第三种事以上两种的结合,就是现出现胡说八道的窗口,然后在出现添加到收藏夹窗口,破解嘛就是用以上两种组合.
***********************************************
幻影图片效果
代码：
<STYLE>
#test{
filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=30,Direction=90)
}
</STYLE>
<IMG id=test src="ifile.php?xname=LSOJM01&fname=1098071171.gif&resize=120&thumb=s">

把"ifile.php?xname=LSOJM01&fname=1098071171.gif&resize=120&thumb=s"改成你所需要的图片路径即可~

*****************************************************
背景音乐代码

<EMBED style="WIDTH: 160px; HEIGHT: 1px" src=音乐地址 width=160 height=1 type=audio/x-wav autostart="true" loop="true"></EMBED>
*****************************************************
常用栏目导航栏代码
脚本说明:
把如下代码加入<body>区域中
<script language="JavaScript1.2">
var cssdefinition='<style>/n.menuitems{/nborder:2.5px solid #FFF2BF;/n}/n/n.menuitems a{/ntext-decoration:none;/ncolor:black;/n}/n<//style>'

//No need to edit beyond here
if (document.all||document.getElementById)
document.write(cssdefinition)

function over_effect(e,state, bgcolor){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
else{
while(source4.tagName!="DIV"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menuitems"){
source4.style.borderStyle=state
source4.style.backgroundColor=bgcolor
}
}
}
}

</script>
<div style="background-color:#FFF2BF;width:100%;height:23px;padding-top:5px" onMouseover="over_effect(event,'outset','#FFE271')" onMouseout="over_effect(event,'solid','#FFF2BF')" onMousedown="over_effect(event,'inset')" onMouseup="over_effect(event,'outset')">
<font face="Arial" size="2">
<span class="menuitems"><a href="http://yoob.home.bj001.net">建站资源中心</a></span>
<span class="menuitems"><a href="http://sindo.home.bj001.net">FLASH吧</a></span>
<span class="menuitems"><a href="http://www.sunbo.com">中国圣博</a></span>
<span class="menuitems"><a href="http://yoob.home.bj001.net">建站资源中心</a></span>
<span class="menuitems"><a href="http://yoob.home.bj001.net">建站资源中心</a></span>
<span class="menuitems"><a href="http://yoob.home.bj001.net">建站资源中心</a></span>
<span class="menuitems"><a href="http://yoob.home.bj001.net">建站资源中心</a></span>
<span class="menuitems"><a href="http://yoob.home.bj001.net">建站资源中心</a></span>
<span class="menuitems"><a href="http://yoob.home.bj001.net">建站资源中心</a></span>
</font>
</div>

*******************************************************************
图片从右向左，然后从左向右滚动显示的代码

里面的图片地址，你可以自己改变。这个代码用于友情LOGO链接还不错的。

<marquee direction=left height=134 scrollamount=1 scrolldelay=5 width="144" behavior="alternate">
<img border=1 src="图片地址"><img border=1 src="图片地址"><img border=1 src="图片地址"><img border=1 src="图片地址"><img border=1 src="图片地址">
</marquee>
*********************************************************
旋转的文字
<SCRIPT language=javascript>Phrase="在这里输入你想要的文字"
Balises = ""
Taille=40;
Midx=100;
Decal=0.5;
Nb=Phrase.length;
y=-10000;
for (x=0;x<Nb;x++){
Balises=Balises + '<DIV Id=L' + x + ' STYLE="width:3;font-family: Courier New;font-weight:bold;position:absolute;top:40;left:50;z-index:0">' + Phrase.charAt(x) + '</DIV>'
}
document.write (Balises);
Time=window.setInterval("Alors()",10);
Alpha=5;
I_Alpha=0.05;
function Alors(){
Alpha=Alpha-I_Alpha;
for (x=0;x<Nb;x++){
Alpha1=Alpha+Decal*x;
Cosine=Math.cos(Alpha1);
Ob=document.all("L"+x);
Ob.style.posLeft=Midx+100*Math.sin(Alpha1)+50;
Ob.style.zIndex=20*Cosine;
Ob.style.fontSize=Taille+25*Cosine;
Ob.style.color="rgb("+ (27+Cosine*80+50) + ","+ (127+Cosine*80+50) + ",0)";
}
}
</SCRIPT>
在这里输入你想要的文字

***********************************************************************
文字颜色不断变化
代码：<SCRIPT language=JavaScript1.2>

</SCRIPT>
*****************************************************************************
网页弹出窗口代码全攻略

经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易，只要往该页面的HTML里加入几段Javascript代码即可实现。下面俺就带您剖析它的奥秘。

1、【最基本的弹出窗口代码】
--------------------------------------------------------------------------------
其实代码非常简单：

因为这是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
　window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。
　用单引号和双引号都可以，只是不要混用。
　这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

2、【经过设置后的弹出窗口】
--------------------------------------------------------------------------------
　下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
<SCRIPT LANGUAGE="javascript">

</SCRIPT>

参数解释：
<SCRIPT LANGUAGE="javascript"> js脚本开始；
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束

3、【用函数控制弹出窗口】
--------------------------------------------------------------------------------
下面是一个完整的代码。

<html>
<head>
<script LANGUAGE="JavaScript">

</script>
</head>
<body οnlοad="openwin()">
...任意的页面内容...
</body>
</html>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢？
　方法一：<body οnlοad="openwin()"> 浏览器读页面时弹出窗口；
　方法二：<body οnunlοad="openwin()"> 浏览器离开页面时弹出窗口；
　方法三：<a href="#" οnclick="openwin()">打开一个窗口</a> 注意：使用的“#”是虚连接。
　方法四：<input type="button" οnclick="openwin()" value="打开窗口">

4、【同时弹出2个窗口】
--------------------------------------------------------------------------------
对源代码稍微改动一下：

5、【主窗口打开文件1.htm，同时弹出小窗口page.html】
--------------------------------------------------------------------------------
如下代码加入主窗口<head>区：

<body>区加入：<a href="1.htm" οnclick="openwin()">open</a>即可。

6、【弹出的窗口之定时关闭控制】
--------------------------------------------------------------------------------
下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它10秒后自动关闭是不是更酷了？

首先，将如下代码加入page.html文件的<head>区：

然后，再用<body οnlοad="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)

7、【在弹出窗口中加上一个关闭按钮】
--------------------------------------------------------------------------------
<FORM>
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
</FORM>

8、【内包含的弹出窗口-一个页面两个窗口】
--------------------------------------------------------------------------------
上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。
通过下面的例子，你可以在一个页面内完成上面的效果。
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function openwin()
{
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
//写成一行
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
<a href="#" οnclick="openwin()">打开一个窗口</a>
<input type="button" οnclick="openwin()" value="打开窗口">
</body>
</html>

看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。

9、【终极应用--弹出的窗口之Cookie控制】

--------------------------------------------------------------------------------
回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？
　有解决的办法吗？
　我们使用cookie来控制一下就可以了。
　首先，将如下代码加入主页面HTML的<HEAD>区：
<script>
function openwin(){
window.open("page.html","","width=200,height=200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function loadpopup(){
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}

</script>

　然后，用<body οnlοad="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！
*********************************************************************
图片在底文字在上面的代码
<TABLE height=150 cellSpacing=0 cellPadding=0 width="170" border=0>
<TBODY>
<TR>
<TD vAlign=top background=/Article/UploadFiles/200509/20050912210215812.bmp>
<TABLE height=150 cellSpacing=0 cellPadding=0 width="170" border=0>
<TBODY>
<TR>
<TD width="31%"> </TD>
<TD vAlign=top width="64%">
<TABLE height=150 cellSpacing=0 cellPadding=3 width=150 border=0>
<TBODY>
<TR>
<TD>
<DIV align=center><FONT color=#ff0000>
<MARQUEE scrollAmount=1 direction=up width=90% height=140>　<FONT color=#FF6600> 文字信息

</FONT></MARQUEE></FONT></DIV></TD></TR></TBODY></TABLE></TD>
<TD width="5%"> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
**********************************************************************************
网页导航小人代码

<SCRIPT>
</SCRIPT>
*********************************************************************
图片左右飞舞
第一步:把如下代码加入<body>区域中
<script language="JavaScript">
var pos1=-95;
var pos2=-95;
var pos3=-95;
var pos4=-95;

var speed1 = Math.floor(Math.random()*10)+2;
var speed2 = Math.floor(Math.random()*10)+2;
var speed3 = Math.floor(Math.random()*10)+2;
var speed4 = Math.floor(Math.random()*10)+2;

function next() {
    pos1 += speed1;
    pos2 += speed2;
    pos3 += speed3;
    pos4 += speed4;

    if (pos1 > 795) pos1 = -95;
    if (pos2 > 795) pos2 = -95;
    if (pos3 > 795) pos3 = -95;
    if (pos4 > 795) pos4 = -95;

    if (document.layers) {
       document.layers[0].left = pos1;
       document.layers[1].left = pos2;
       document.layers[2].left = pos3;
       document.layers[3].left = pos4;

    }
    else {
       mouse1.style.left = pos1;
       mouse2.style.left = pos2;
       mouse3.style.left = pos3;
       mouse4.style.left = pos4;

}
window.setTimeout("next();",10);
}
</script>
<div id="mouse1"
style="HEIGHT: 100px; LEFT: 0px; POSITION: absolute; TOP: 165px; WIDTH: 100px">
<dd><img alt border="0" src="001s.jpg" width="80" height="70"> </dd>
</div><div id="mouse2"
style="HEIGHT: 100px; LEFT: 0px; POSITION: absolute; TOP: 250px; WIDTH: 100px">
<dd><img alt border="0" src="002s.jpg" width="70" height="60"></dd>
</div><div id="mouse3"
style="HEIGHT: 100px; LEFT: 0px; POSITION: absolute; TOP: 333px; WIDTH: 100px">
<dd><img alt border="0" src="003s.jpg" width="72" height="61"></dd>
</div><div id="mouse4"
style="HEIGHT: 100px; LEFT: 0px; POSITION: absolute; TOP: 415px; WIDTH: 100px">
<dd><img alt border="0" src="004s.jpg" width="50" height="45"></dd>
</div>

第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" οnlοad="next();">

**********************************************
js特效.鼠标移上去，图片渐显的方法

把这个内容放在<head>和</head>之间
<script language="javascript" type="text/javascript">

</script>
<script language="javascript" type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
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 && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

把这个图片的属性改成这个（主要是加上鼠标移上去和移开的效果）。
<img onMouseOut=low(this) onMouseOver=high(this) style="FILTER: alpha(opacity=70)" src="images/c1.gif" width="104" height="56" altborder="0">
******************************************************************
制作树形目录

制作方法：
第一步：嵌入代码。把下面这段代码复制到<head></head>标签之间。

var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

function change(){
if(!document.all)
return
if (event.srcElement.id=="foldheader") {
var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display=="none") {
nested.style.display=''
event.srcElement.style.listStyleImage="url(open.gif)"
}
else {
nested.style.display="none"
event.srcElement.style.listStyleImage="url(fold.gif)"
}
}
}

document.οnclick=change

//-->
</script>

第二步：制作菜单。将代码插入到页面中要出现树形目录的地方。下面是一段代码范例：
　

<ul>
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href="http://www.abcnews.com">ABC News</a></li>
<li><a href="http://www.vancouversun.com">Vancouver Sun</a></li>
</ul>

<li id="foldheader">Games</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.gamespot.com">GameSpot</a></li>
<li><a href="http://www.happypuppy.com">Happy Puppy</a></li>
<li><a href="http://www.gamecenter.com">Game Center</a></li>
</ul>

<li id="foldheader">Software</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.download.com">outer 1</a></li>
<li><a href="http://www.hotfiles.com">outer 2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.windows95.com">nested 1</a></li>
<li><a href="http://www.shareware.com">nested 2</a></li>
</ul>
<li><a href="http://www.windows95.com">outer 3</a></li>
<li><a href="http://www.shareware.com">outer 4</a></li>
</ul>
</ul>

如果我们仔细分析一下的话不难发现制作列表的秘诀就是一个大的列表

<li id="foldheader">主目录名称</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="对应地址 ">子目录名称</li>
<li><a href="对应地址 ">子目录名称</li>
<li><a href="对应地址 ">子目录名称</li>
</ul>

这样的好处是添加子菜单非常容易只要不断制作一些列表出来，并且加上连接就可以制作出下拉菜单了。如果要实现多级的子菜单也很容易只要将某项子菜单的id设置成为foldheader并且不加连接，后面的格式就如加灰部分一样和前面的代码是一样的，嵌套使用。

第三步：将一段代码复制到上面列表代码的下面。

if (get_cookie(window.location.pathname) != ''){
var openresults=get_cookie(window.location.pathname).split(" ")
for (i=0 ; i < openresults.length ; i++){
foldinglist[openresults[i]].style.display=''
document.all[foldinglist[openresults[i]].sourceIndex -
1].style.listStyleImage="url(open.gif)"
}
}

if (document.all){
var nodelength=foldinglist.length-1
var nodes=new Array(nodelength)
var openones=''
}

function check(){
for (i=0 ; i <= nodelength ; i++){
if (foldinglist[i].style.display=='')
openones=openones + " " + i
}
documents.cookie=window.location.pathname+"="+openones
}

if (document.all)
document.body.οnunlοad=check
//-->
</script>

第四步：将文件夹和菜单项前面的小图标图片文件复制到和网页文件同样的位置。命名规则：
关闭的文件夹：fold.gif
打开的文件夹：open.gif
菜单项目：list.gif

整个菜单就做好了。如果对于菜单文字不满意，可以修改第一步中的
　

这部分，当然前提是你要懂得一些css代码,不过本站有好些有关CSS的文章,看完之后,你基本可以完全掌握CSS了.:))

*************************************************
半透明的层制作方法

先定义一个CSS样式：
<style type="text/css">

</style>

然后应用在层标签里：
<div class="halfalpha">

kooyeed

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
几则常用的ＪＳ特效

文字滚动连接代码 liuzhiya工作室-http://zhw.bjcool.net" target=_blank>心语工作室 *******************************************************图片全景旋转的技巧//修改图像地址，注意要全部相同 ************************************
复制链接

扫一扫