[共享无限]54种网页特效代码(2)
2009年11月29日星期日 | | |19、如何把层在网页里面任意拖动，（以下的层是半透明状态）
第一步:把如下代码加入<body>区域中
<style type="text/css">
body,td,a { font-size: 9pt; color: #330000; text-decoration: none}
.aa {filter:alpha(opacity=70)}
</style>
<div style="position:absolute; left:235px; top:92px;solid;cursor:move"
onmousedown="down1(this)" class="aa" id=plane0>
<table cellpadding="0" border="0" cellspacing="1" width="200" height="100" bgcolor="#000000" >
<tr><td height="18" bgcolor="#999999" >
<div align="right">点这儿关闭>>><a href="#" onClick="clase(0)">★</a></div>
</td></tr><tr>
<td bgcolor="f4f4f4">这里是你的文字!!!!!!!!!!!!!!!!!!</td>
</tr></table></div>
<script>
var over=false,down=false,divleft,divtop,n;
function clase(x){document.all[plane+x].style.visibility=hidden}
function down1(m){
n=m;down=true;divleft=event.clientX-parseInt(m.style.left);divtop=event.cl
ientY-parseInt(m.style.top)}
function move(){if(down){n.style.left=event.clientX-divleft;n.style.top=even
t.clientY-divtop;}}</script>
把窗口移到这儿看看吧!
<a href="javascript:" onClick="plane0.style.visibility=visible">点这儿重新显示0</a>
<a href="javascript:" onClick="plane1.style.visibility=visible">点这儿重新显示1</a>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onmousemove="move()"
onmouseup="down=false">
20、连续滚动的图片，中间没有间断，（从右向左滚动）
把如下代码加入<body>区域中
<script language="JavaScript1.2">
//Specify the sliders width (in pixels)
var sliderwidth=300
//Specify the sliders height
var sliderheight=150
//Specify the sliders slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"
//Specify the sliders images
var leftrightslide=new Array()
var finalslide=
leftrightslide[0]=<a href="http://www.jzzy.com"><img src="photo/dynamicbook20
0211061.gif" border=1></a>
leftrightslide[1]=<a href="http://www.jzzy.com"><img src="photo/dynamicbook200
211062.gif" border=1></a>
leftrightslide[2]=<a href="http://www.jzzy.com"><img src="photo/dynamicbook200
211063.gif" border=1></a>
leftrightslide[3]=<a href="http://www.jzzy.com"><img src="photo/dynamicbook200
211064.gif" border=1></a>
leftrightslide[4]=<a href="http://www.jzzy.com"><img src="photo/dynamicbook200
211065.gif" border=1></a>
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=slidespeed
leftrightslide=<nobr>+leftrightslide.join(" ")+</nobr>
var iedom=document.all||document.getElementById
if (iedom)
document.write(<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">+leftrightslide+</span>)
var actualwidth=
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("tem
p").offsetWidth
cross_slide2.style.left=actualwidth+20
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+20
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+30
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+30
}
}
if (iedom||document.layers){
with (document){
document.write(<table border="0" cellspacing="0" cellpadding="0"><td>)
if (iedom){
write(<div style="position:relative;width:+sliderwidth+;height:+sliderheight+;
overflow:hidden">)
write(<div style="position:absolute;width:+sliderwidth+;height:+sliderheight+;b
ackground-color:+slidebgcolor+" onMouseover="copyspeed=0" onMouseout="copyspeed=slide
speed">)
write(<div id="test2" style="position:absolute;left:0;top:0"></div>)
write(<div id="test3" style="position:absolute;left:-1000;top:0"></div>)
write(</div></div>)
}
else if (document.layers){
write(<ilayer width=+sliderwidth+ height=+sliderheight+ name="ns_slidemenu" bgCo
lor=+slidebgcolor+>)
write(<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>)
write(<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>)
write(</ilayer>)
}
document.write(</td></table>)
}
}
</script>
21、图片拉伸翻转效果
第一步:把如下代码加入<body>区域中
<SCRIPT language="JavaScript" type="text/javascript">
<!--hide
//STEP 1: PUT THIS CODE INTO THE HEAD OF YOUR DOCUMENT
var wdmax=120; //set maximum width of square image (px)
var wdmin=0; //set minimum thickness of edge-on image (px)
var inc=5; //set step change in px (wdmax-wdmin must be a multiple) )These two variables
var rate = 50; //pause between steps (in millisec) )determine flip-flop speed
var pause = 1000; //pause between flip and flop (in millisec)
var ff="flip"; //initialise whether movement starts with a "flip" (sideways) or "flop"
(vertical) change.
function flipflop() {
if (ff=="flip") {
var wd = document.getElementById("pic").getAttribute("width");
wd = wd - inc;
document.getElementById("pic").setAttribute("width",wd);
if (wd==wdmin) {
document.getElementById("pic").setAttribute("src","photo/pic200211062.gif");
//substitute name of your second picture
inc=-inc;
}
if (wd==wdmax) {
ff="flop";
inc=-inc;
setTimeout("flipflop()",pause);
}
else {
setTimeout("flipflop()",rate);
}
}
else {
var ht = document.getElementById("pic").getAttribute("height");
ht = ht - inc;
document.getElementById("pic").setAttribute("height",ht);
if (ht==wdmin) {
document.getElementById("pic").setAttribute("src","photo/pic200211061.gif");
//substitute name of your first picture
inc=-inc;
}
if (ht==wdmax) {
ff="flip";
inc=-inc;
setTimeout("flipflop()",pause);
}
else {
setTimeout("flipflop()",rate);
}
}
}
-->
</SCRIPT>
<center>
<TABLE border="0">
<th width="160" height="160">
<IMG src="photo/pic200211061.gif" width="120" height="120" ID="pic">
</th></TABLE>
第二步:把如下代码加入<body>区域中<body onLoad="javascript:flipflop()">
22、图片轮着显示（比较平滑）
把如下代码加入<body>区域中
<center>
<script language="JavaScript1.2">
var slideshow_width=140 //SET IMAGE WIDTH
var slideshow_height=225 //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="photo/photo1.jpg"
fadeimages[1]="photo/photo2.jpg"
fadeimages[2]="photo/photo3.jpg"
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
if (ie4||dom)
document.write(<div style="position:relative;width:+slideshow_width+;height:+slides
how_height+;overflo
w:hidden"><div id="canvas0" style="position:absolute;width:+slideshow_width+;height:+
slideshow_height+;top:0;f
ilter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:+slideshow_width+;height:+slideshow_height+;top:0;fi
lter:alpha(opacity=10);-moz-opacity:10"></div></div>)
else
document.write(<img name="defaultslide" src="+fadeimages[0]+">)
var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1
function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=<img src="+fadeimages[nextimageindex]+">
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(c
urcanvas)
crossobj.style.zIndex++
var temp=setInterval("fadepic()",50)
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML=<img src="+fadeimages[curimageindex]+">
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script>
23、鼠标照亮图片
把如下代码加入<body>区域中
<style>
<!--
#myimage{
filter:light
}
-->
</style>
<img id="myimage" src="photo/photo3.jpg">
<script language="JavaScript1.2">
s = 50; // the size of the spotlight
vp = 10; // the visibility percent of the picture
startx = 0; // the top position of your sportlight into the image (on start)
starty = 0; // the left position of your spotlight into the image (on start)
//////////////////////////////////////////////////////////////////
// No need to edit below this line //
//////////////////////////////////////////////////////////////////
var IE = document.all?true:false
function moveL()
{
xv = tempX;
yv = tempY;
myimage.filters.light.MoveLight(1,xv,yv,s,true);
}
if (IE&&myimage.filters)
document.all.myimage.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
function getMouseXY(e) {
tempX = event.offsetX
tempY = event.offsetY
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moveL();
}
return true
}
var xv = startx;
var yv = starty;
var t= true;
if (IE&&myimage.filters){
myimage.style.cursor="hand";
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
</script>
24、把鼠标放到图片上面就清楚了，（本来是不清楚的）
把如下代码加入<body>区域中
<SCRIPT language="JavaScript">
<!--
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=20
}
//-->
</SCRIPT>
<img src="photo/j2.gif" style="filter:alpha(opacity=20)" onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)">
25、下拉菜单（可以先择内容的）
把如下代码加入<body>区域中
<Script Language="JavaScript">
<!-- Begin
function display_image(form) {
selectionname = form.imagename.options[form.imagename.selectedIndex].text;
selection = form.imagename.options[form.imagename.selectedIndex].value;
PreView = window.open("", "Preview", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhis
tory=0,width=360,height=440 left=0 top=0");
PreView.document.open();
PreView.document.write("<HTML><HEAD>");
PreView.document.write("<TITLE>Preview</TITLE>");
PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>");
PreView.document.write("<FORM><CENTER><B><FONT SIZE=+1>" +
selectionname + "</FONT></B><HR>");
PreView.document.write("<IMG HSPACE=0 VSPACE=0 " +
"SRC=" + selection + ">");
PreView.document.write("<HR><FORM><INPUT TYPE=button VALUE=关闭窗口 " +
"onClick=window.close()></FORM>");
PreView.document.write("</CENTER>");
PreView.document.write("</BODY></HTML>");
PreView.document.close();
}
// End -->
</SCRIPT>
<FORM>
<select NAME="imagename" onChange="display_image(this.form)">
<option value="" SELECTED>请选择相片
<option value="photo/hhy1.jpg">相片一
<option value="photo/hhy2.jpg">相片二
<option value="photo/hhy3.jpg">相片三
<option value="photo/hhy4.jpg">相片四
<option value="photo/hhy5.jpg">相片五
<option value="photo/hhy6.jpg">相片六
<option value="photo/hhy7.jpg">相片七
</select>
</FORM>
26、图片渐显效果较好
第一步:把如下代码加入<body>区域中
<img src="photo/image1.gif" name="u" border=0
alt="Image" style="filter:alpha(opacity=0)">
<script language="JavaScript">
var b = 1;
var c = true;
function fade(){
if(document.all);
if(c == true) {
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
u.filters.alpha.opacity=0 + b;
setTimeout("fade()",50);
}
</script>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" onLoad="fade()">
27、图片来回晃动特效
把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!--
step = 0;
obj = new Image();
function anim(xp,xk,smer) //smer = direction
{
obj.style.left = x;
x += step*smer;
if (x>=(xk+xp)/2) {
if (smer == 1) step--;
else step++;
}
else {
if (smer == 1) step++;
else step--;
}
if (x >= xk) {
x = xk;
smer = -1;
}
if (x <= xp) {
x = xp;
smer = 1;
}
// if (smer > 2) smer = 3;
setTimeout(anim(+xp+,+xk+,+smer+), 50);
}
function moveLR(objID,movingarea_width,c)
{
if (navigator.appName=="Netscape") window_width = window.innerWidth;
else window_width = document.body.offsetWidth;
obj = document.images[objID];
image_width = obj.width;
x1 = obj.style.left;
x = Number(x1.substring(0,x1.length-2)); // 30px -> 30
if (c == 0) {
if (movingarea_width == 0) {
right_margin = window_width - image_width;
anim(x,right_margin,1);
}
else {
right_margin = x + movingarea_width - image_width;
if (movingarea_width < x + image_width) window.alert("No space for moving!");
else anim(x,right_margin,1);
}
}
else {
if (movingarea_width == 0) right_margin = window_width - image_width;
else {
x = Math.round((window_width-movingarea_width)/2);
right_margin = Math.round((window_width+movingarea_width)/2)-image_width;
}
anim(x,right_margin,1);
}
}
//-->
</SCRIPT>
<img src="photo/image1.gif" width=205 height=56 name="picture" style=position: absolu
te; top: 10px; left: 30px; BORDER=0>
<SCRIPT LANGUAGE="JavaScript">
<!--
setTimeout("moveLR(picture,300,1)",10);
//-->
</SCRIPT>
28、点击图片自动显示下一张图片
第一步:把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rand1 = 0;
var useRand = 0;
images = new Array;
images[1] = new Image();
images[1].src = "photo/image1.gif";
images[2] = new Image();
images[2].src = "photo/image2.gif";
images[3] = new Image();
images[3].src = "photo/image3.gif";
images[4] = new Image();
images[4].src = "photo/image4.gif";
function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
// End -->
</script>
<a onClick="swapPic();"><img name="randimg" src="photo/image1.gif"></a><br>
<font face="Verdana" size="-2">请点击图片</font>
</center>
第二步:把如下代码加入<body>区域中<body bgcolor="#ffffff" OnLoad="swapPic()">
From: 网络
博文
