网页制作特效代码大全(特效网页设计源代码)

http://www.itjxue.com  2023-02-18 00:16  来源:未知  点击次数: 

急求一个网页特效代码

用这个吧 可以全屏拖动的 支持FLASH引用

script id=clientEventHandlersJS language=JScript

!--

function ad_check() {

self.onError=null;

self.onError=null;

setTimeout("ad_check()",100);

}

function Min_onclick() {

//alert(ad1.style.visibility )

ad1.style.visibility='hidden';

}

function Max_onclick() {

//alert(ad1.style.visibility )

ad1.style.visibility='visible';

}

//--

/scriptscript language=JScript

//floater.innerHTML =''

//window.alert (floater.innerHTML.length4000);

self.onError=null;

currentX = currentY = 0;

whichIt = null;

lastScrollX = 0; lastScrollY = 0;

NS = (document.layers) ? 1 : 0;

IE = (document.all) ? 1: 0;

!-- STALKER CODE --

function heartBeat() {

if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }

if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }

if(diffY != lastScrollY) {

percent = .1 * (diffY - lastScrollY);

if(percent 0) percent = Math.ceil(percent);

else percent = Math.floor(percent);

if(IE) document.all.floater.style.pixelTop += percent;

if(NS) document.floater.top += percent;

lastScrollY = lastScrollY + percent;

}

if(diffX != lastScrollX) {

percent = .1 * (diffX - lastScrollX);

if(percent 0) percent = Math.ceil(percent);

else percent = Math.floor(percent);

if(IE) document.all.floater.style.pixelLeft += percent;

if(NS) document.floater.left += percent;

lastScrollX = lastScrollX + percent;

}

}

//--

function checkFocus(x,y) {

stalkerx = document.floater.pageX;

stalkery = document.floater.pageY;

stalkerwidth = document.floater.clip.width;

stalkerheight = document.floater.clip.height;

if( (x stalkerx x (stalkerx+stalkerwidth)) (y stalkery y

(stalkery+stalkerheight))) return true;

else return false;

}

function grabIt(e) {

if(IE) {

whichIt = event.srcElement;

while (whichIt.id.indexOf("floater") == -1) {

whichIt = whichIt.parentElement;

if (whichIt == null) { return true; }

}

whichIt.style.pixelLeft = whichIt.offsetLeft;

whichIt.style.pixelTop = whichIt.offsetTop;

currentX = (event.clientX + document.body.scrollLeft);

currentY = (event.clientY + document.body.scrollTop);

} else {

window.captureEvents(Event.MOUSEMOVE);

if(checkFocus (e.pageX,e.pageY)) {

whichIt = document.floater;

stalkerTouchedX = e.pageX-document.floater.pageX;

StalkerTouchedY = e.pageY-document.floater.pageY;

}

}

return true;

}

function moveIt(e) {

if (whichIt == null) { return false; }

if(IE) {

newX = (event.clientX + document.body.scrollLeft);

newY = (event.clientY + document.body.scrollTop);

distanceX = (newX - currentX); distanceY = (newY - currentY);

currentX = newX; currentY = newY;

whichIt.style.pixelLeft += distanceX;

whichIt.style.pixelTop += distanceY;

if(whichIt.style.pixelTop document.body.scrollTop) whichIt.style.pixelTop =

document.body.scrollTop; if(whichIt.style.pixelLeft document.body.scrollLeft)

whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft

document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20)

whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;

if(whichIt.style.pixelTop document.body.offsetHeight + document.body.scrollTop -

whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight +

document.body.scrollTop - whichIt.style.pixelHeight - 5;

event.returnValue = false;

} else {

whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);

if(whichIt.left 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;

if(whichIt.top 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;

if( (whichIt.left + whichIt.clip.width) = (window.innerWidth+self.pageXOffset-17)) whichIt.left

= ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;

if( (whichIt.top + whichIt.clip.height) = (window.innerHeight+self.pageYOffset-17)) whichIt.top

= ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;

return false;}

return false;

}

function dropIt() {

whichIt = null;

if(NS) window.releaseEvents (Event.MOUSEMOVE);

return true;

}

!-- DRAG DROP CODE --

if(NS) {

window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);

window.onmousedown = grabIt;

window.onmousemove = moveIt;

window.onmouseup = dropIt;

}

if(IE) {

document.onmousedown = grabIt;

document.onmousemove = moveIt;

document.onmouseup = dropIt;

}

if(NS || IE) action = window.setInterval("heartBeat()",1);

setTimeout("ad_check()",10)

/script

/div

DIV align=center id=floater style="HEIGHT: 100px; WIDTH: 343px; position:absolute; left:76px; top:126px"

TABLE bgColor=#eeeeee border=1 borderColor=#999999

cellPadding=0 cellSpacing=0

style="BORDER-COLLAPSE: collapse" width=167

TBODY

TR

TD height=20 width=167

TABLE border=0 cellPadding=0 cellSpacing=0

width="100%"

TBODY

TR

TD align=right

height=15 vAlign=bottom width="100%"

TABLE border=0 height=2 width="100%"

TR

TD height=1 align=rightFONT color=#000000 face=宋体

style="FONT-SIZE: 9pt" /FONT font

class=banner

id=Min language=javascript

onclick="return Min_onclick()"font color="#990000" style="font-size: 9pt; cursor: hand"收起/font/fontfont

class=banner

id=Min language=javascript

onclick="return Max_onclick()"FONT

color=#666666//FONTfont color="#990000" style="font-size: 9pt; cursor: hand"展开/font/font/TD

/TR/TABLE/TD/TR/TBODY/TABLE/TD/TR/TBODY/TABLE

TABLE bgColor=#eeeeee border=1 borderColor=#999999

cellPadding=2 cellSpacing=0 id=ad1

style="BORDER-COLLAPSE: collapse" width=165

TBODY

TR

TD bgColor=#eeeeee disabled height=20 width=165 P align=center

object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="" width="165" height="120"

param name="movie" value=""

param name="quality" value="high"

embed src="" quality="high" pluginspage="" type="application/x-shockwave-flash" width="165" height="120"/embed/object

/P

/TD/TR

TR

TD bgColor=#eeeeee height=20 width=310div align="left"

FONT

color=#990000 size=2font color="#666666"/font/FONT

FONT

color=#FFFFFF size=2 /FONTFONT

color=#800000 size=2蓝染惣右介/FONT/div/TD

/TR

/TBODY/TABLE

/DIV

网页中如何插入多个特效代码?

分类: 电脑/网络 互联网

问题描述:

我要在网站的同一个界面加入多个特效代码,我把特效代码按顺序排列加在body/body或head/head中间,可是把那些代码加入按顺序排起来后只能显示一个特效或者一个都不显示,我该怎么办?还有我要在网页中加入背景音乐,bgsound src=音乐地址 loop="-1"这是一个加入的代码,我加在body/body或head/head中间,好像只能在IE中游览时才会有用,可是我加入后打开网页并没有音乐出现,这是怎么回事?谁能帮帮我?不知各位大虾谁有好的背景音乐网站,请推荐给我,谢谢啦!~~~

解析:

1,代码问题。

多个特效代码最好不要放在一起,因为其中的某些代码可能会有冲突,导致部分特效失效甚至产成网页错误提示。

2,背景音乐问题。

代码要放在body/body之间!。如bgsoundsrc="*.mid"loop="-1"

其中,loop="-1"表示音乐无限循环播放,如果你要设置播放次数,则改为相应的数字即可。

不显示背景音乐首先检查背景音乐的地址是否正确,然后检查背景音乐的格式是否支持在网页中自动播放,对于背景音乐的格式支持现在大多的主流音乐格式,如WAV、MID、MP3等。。

这种添加背景音乐的方法是最基本的方法,也是最为常用的一种方法,如果要顾及到网速较低的浏览者,则可以使用MID音效作为网页的背景音乐,因为MID音乐文件小,这样在网页打开的过程中能很快加载并播放,但是MID也有不足的地方,它只能存放音乐的旋律,没有好听的和声以及唱词。如果你的网速较快,或是觉得MID音乐有些单调,也可以添加MP3的音乐。

3,背景音乐网站。

可以到百度搜索你想要的音乐,一定能找到让你满意的!

dw横向文字滚动代码是什么?

我给你一个代码,你仔细看看就明白了。 加粗的地方是你要输入的内容 网页特效_跑马灯特效代码大全

实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“marquee滚动的文字/marquee”语句适当的运用marquee标签的参数,可以表现出不同的效果,请看下面的几个例子:1、左右弹来弹去的跑马灯实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动,direction=left表示运动方向向左。marquee的宽度可以使用绝对象素值,例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在Netscape下是看不到的。源码:marquee width=400 behavior=alternate direction=left align=middle border=1弹来弹去跑马灯!/marquee

2、跑的很快的跑马灯只要在marquee标签内加上“scrollamount=30”参数即可。

3、带有超级链接的跑马灯其实实现的方法很简单,把整个marquee/marquee语句包含在超链接中就行,你看看下面的代码就清楚了。当然你也可以把包含在marquee/marquee中的各条内容分别加上不同的链接,这样的跑马灯用来发布滚动新闻或是做站点导航再合适不过了。源码粘贴框:marquee width=90%

a href="/Article/Index.html" target=_blank带有超链接的跑马灯!点我试试?/a

a href=" " target=_blank还有一条呢!点我试试?/a

/marquee 以上几个例子都是marquee标签参数的应用,下面把所有可以利用的参数列在表中供你参考,不过还是要提醒你,marquee标签只被IE所支持,使用Netscape浏览器是看不到的噢。参数 用法介绍

behavior=scroll, slide, alternate 跑马方式:循环绕行,只跑一次就停住,来回往复运动

direction=left,right 跑马方向:从左向右,从右向左

loop=100 跑马次数:循环100次,如不写默认为一直循环

width=100%,height=200 跑马范围:宽为100%,高为200像素

scrollamount=20  跑马速度:数越大越快

scrolldelay=500  跑马延时:毫秒数,利用它可实现跃进式滚动

hspace=20,vspace=20 跑马区域与其它区域间的空白大小

bgcolor=#00FFCC  跑马区域的背景颜色 你已经看到,尽管marquee参数不少,单毕竟不能实现复杂的和自定义的特殊跑马灯效果,而且还有浏览器限制,所以我们更多情况下会采用JavaScript来实现跑马灯,那就是我们下一个技巧的内容。这里向你介绍几个用JavaScript实现的较复杂的跑马灯,你只须把源码粘贴框中的代码按照说明复制的指定的位置就能看到跑马灯的效果。

1、状态栏中的跑马灯在默认状态下浏览器的状态栏中显示的是链接指向信息,给人的感觉很单调。如果我们把问候语或是站点的介绍放在状态栏中滚动显示,一定能取得很好的效果。源码粘贴框:1、将以下代码放在head与/head之间:script LANGUAGE="JavaScript"

!-- Begin

var Mes=new Array();

Mes[0]="酷络网欢迎你! ";

Mes[1]="感谢你关注酷络网络学院 ";

Mes[2]="网页特效 之 跑马灯大全 ";

var place=1;

var i=0;

function scroll()

{

window.status=Mes[i].substring(0, place);

if (place = Mes[i].length)

{

if(i2)

{

i++;

place=1;

window.setTimeout("scroll()",50);

}

else

{

i=0;

place=1;

window.setTimeout("scroll()",50);

}

}

else {

place++;

window.setTimeout("scroll()",50);

}

}

// End --

/script2、在body标签内加入onload 语句:body onload="scroll();" 实现步骤:

(1)首先将JavaScript代码复制到head与/head之间,这段代码中包含了scroll()函数,它是实现跑马灯的主体代码。我们可以修改mes[]数组的值来改变跑马灯的内容,你也可以显示更多条的信息,不过代码中i的值应等于信息的条数,也就是等于mes[]数组的维数;

(2)然后在body标签中加入onload()语句即可。2、超链接的跑马灯式提示信息把你的“老鼠”移到下面链接上试一试,有什么不同呢?原来弹出了一条跑马灯式的提示信息,这是怎么实现的呢,请接着看:源码粘贴框:1.将下面代码放在body标签下:script

if (!document.layers!document.all)

event="test"

function showtip2(current,e,text){if (document.alldocument.readyState=="complete"){

document.all.tooltip2.innerHTML='marquee style="border:1px solid black"'+text+'/marquee'

document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10

document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10

document.all.tooltip2.style.visibility="visible"

}else if (document.layers){

document.tooltip2.document.nstip.document.write('b'+text+'/b')

document.tooltip2.document.nstip.document.close()

document.tooltip2.document.nstip.left=0

currentscroll=setInterval("scrolltip()",100)

document.tooltip2.left=e.pageX+10

document.tooltip2.top=e.pageY+10

document.tooltip2.visibility="show"

}

}

function hidetip2(){

if (document.all)

document.all.tooltip2.style.visibility="hidden"

else if (document.layers){

clearInterval(currentscroll)

document.tooltip2.visibility="hidden"

}

}function scrolltip(){

if (document.tooltip2.document.nstip.left=-document.tooltip2.document.nstip.document.width)

document.tooltip2.document.nstip.left-=5

else

document.tooltip2.document.nstip.left=150

}/script2.然后在要出现提示信息的链接中,添加onMouseover语句:a href="pm23.htm" onMouseover="showtip2(this,event,'用marquee实现的各式跑马灯')" onMouseout="hidetip2()"跑马灯大全(一)/a

a href="/pc/index.htm" onMouseover="showtip2(this,event,'最多最全的电脑交互教程')" onMouseout="hidetip2()"电脑交互教程/a

a href="pmjq00.htm" onMouseover="showtip2(this,event,'点滴技巧装扮你的家')" onMouseout="hidetip2()"网页制作技巧技巧/a 实现步骤:

(1)先在body标签下面插入一段JavaScript代码;(2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。

求网页制作雪花飘落效果的代码

下面是雪花飘落的js代码

拷进去就好了,或者调用!!!!

script language="JavaScript"

!--

N =20;

Y = new Array();

X = new Array();

S = new Array();

A = new Array();

B = new Array();

M = new Array();

V = (document.layers)?1:0;

iH=(document.layers)?window.innerHeight:window.document.body.clientHeight;

iW=(document.layers)?window.innerWidth:window.document.body.clientWidth;

for (i=0; i N; i++){

Y[i]=Math.round(Math.random()*iH);

X[i]=Math.round(Math.random()*iW);

S[i]=Math.round(Math.random()*5+2);

A[i]=0;

B[i]=Math.random()*0.1+0.1;

M[i]=Math.round(Math.random()*1+7);

}

if (V){

for (i = 0; i N; i++)

{document.write("LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,"+M[i]+","+M[i]+"';z-index: 1font color=white size=3 face='Wingdings'T/font/LAYER")}

}

else{

document.write('div style="position:absolute;top:0px;left:0px;z-index: 1"');

document.write('div style="position:relative;z-index: 1"');

for (i = 0; i N; i++)

{document.write('div id="si" style="position:absolute;z-index: 1;top:0;left:0;width:'+M[i]+';height:'+M[i]+';font-size:'+M[i]+'"font color=white size=3 face="Wingdings"T/font/div')}

document.write('/div/div');

}

function snow(){

var H=(document.layers)?window.innerHeight:window.document.body.clientHeight;

var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;

var T=(document.layers)?window.pageYOffset:document.body.scrollTop;

var L=(document.layers)?window.pageXOffset:document.body.scrollLeft;

for (i=0; i N; i++){

sy=S[i];

sx=S[i]*Math.cos(A[i]);

Y[i]+=sy;

X[i]+=sx;

if (Y[i] H){

Y[i]=-10;

X[i]=Math.round(Math.random()*W);

M[i]=Math.round(Math.random()*1+7);

S[i]=Math.round(Math.random()*5+2);

}

if (V){document.layers['sn'+i].left=X[i];document.layers['sn'+i].top=Y[i]+T}

else{si[i].style.pixelLeft=X[i];si[i].style.pixelTop=Y[i]+T}

A[i]+=B[i];

}

setTimeout('snow()',40);

}

snow()

//--

/script

Dreamweaver使用,网页特效代码制作

首先用ps或者其他软件将几张图片的大小p成一样的。比如笔者把三张图片都p成了200x268的大小。

2

打开Dreamweaver,新建一个网页(笔者这里建立一个html类型的网页)。

3

按Ctrl+S保存新建的网页。

4

点击菜单栏:插入--表格。插入一个1行1列的表格。

5

把鼠标指针放到表格中,单击菜单栏的:插入--布局对象--AP Div,插入一个AP Div。

6

把鼠标放到刚刚新建的AP Div里边,点击菜单栏的:插入--图像,选择一张需要插入的图片。

7

按上面的方法依次添加其他几个AP Div,并在里边插入图片。

接下来插入一个AP Div,然后再里边添加一个1行3列的表格。

鼠标指针放到表格第一个方框中,单击菜单栏:插入--表单--按钮。操作如图

鼠标点中添加的按钮,然后再下方属性面板中,把值修改为1。

按照上述步骤依次为表格的第二个框、第三个框添加一个按钮,并把属性值改成2和3。如图

把几个AP Div移动到同一个区域。如下图

单击菜单栏:窗口--行为,打开行为面板。

鼠标点击第一个方框的按钮,点击标签检查器行为面板下方的“+”号,弹出的菜单中选择“显示-隐藏元素”。

按照下图所示,把AP Div1设置成显示,AP Div2设置成隐藏,AP Div3设置成隐藏。AP Div4可以设置成显示,也可以不设置(默认显示)。

如图,点击行为面板左边的英文,在弹出的菜单中选择onFocus。

按照上面的步骤,依次把表格第二个方框、第三个方框的按钮设置成如下图所示。

这样就做好了。按F12在浏览器中看看效果。

网页特效代码

1.这个特效的代码我复制在文本改后缀打开,效果大打折扣,为什么?

你再仔细的看下代码这段

ILTER: progid:dximagetransform.microsoft.gradientwipe(duration=1); BEHAVIOR: url(images/xs.htc)

这段是CSS,其中BEHAVIOR: url(images/xs.htc)表示网页背景文件,如果你单纯的复制代码没有对应的背景文件,效果当然大打折扣了

2.还有每次打开自做的网也上面都有个安全提示,很麻烦,怎么关?

因为这段代码用了JS,本机测试机器会有提示

这是IE高版本增加的安全限制,你可以在 工具-internet 选项-安全-自定义里来更改脚本安全级别,但不建议你这样,这样改了很容易中网页木马

(责任编辑:IT教学网)

更多

推荐CSS教程文章