javascrip图片效果
| 10、不停闪烁的图片 |
====1、以下代码放在一个新建页面的HTML的<body></body> 区即可：[页面上必须什么都没有]
<HTML>
<HEAD>
<TITLE>Blink image</TITLE>
</HEAD>
<BODY ONLOAD="soccerOnload()" topmargin="0">
<DIV ID="soccer" STYLE="position:absolute; left:150; top:0">
<a href="http://图片的链接.com" target="_blank">
<IMG SRC="要显示的图片.gif" border="0"></a>
</DIV>
<SCRIPT LANGUAGE="JavaScript">
var msecs = 500; //改变时间得到不同的闪烁间隔；
var counter = 0;
function soccerOnload() {
setTimeout("blink()", msecs);
}
function blink() {
soccer.style.visibility =
(soccer.style.visibility == "hidden") ? "visible" : "hidden";
counter +=1;
setTimeout("blink()", msecs);
}
</SCRIPT>
</BODY>
</HTML> |
| 11、图片展示选择 |
====1、以下代码放在HTML的<body></body> 区即可： <CENTER> <img width=200 height=223 src="图片名字.jpg" name="x1"> </CENTER> //以上是程序初始时显示的图片。 <FORM> <CENTER> <SELECT onChange="document.x1.src=options[selectedIndex].value"> <option value="图片名字1.jpg">看看图片1</option> <option value="图片名字2.jpg">看看图片2</option> <option value="图片名字3.jpg">看看图片3</option> <option value="图片名字4.jpg">看看图片4</option> </SELECT> </CENTER> </FORM> |
| 12、图片的逐显播放 |
====1、将下面的代码插入到HEML的<head></head>之间：
<script language=javaScript>
<!--//
sandra0 = new Image();
sandra0.src = "image1.gif";
sandra1 = new Image();
sandra1.src = "image2.gif";
sandra2 = new Image();
sandra2.src = "image3.gif";
var i_strngth=1
var i_image=0
var imageurl = new Array()
imageurl[0] ="图片名称1.gif"
imageurl[1] ="图片名称2.gif"
imageurl[2] ="图片名称3.gif"
function showimage() {
if(document.all) {
if (i_strngth <=110) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' |
| 13、图片固定左上角 |
====1、将以下代码加入到HEML的<body></body>之间
<SCRIPT language=JavaScript>
<!-- Hide the script from old browsers --
// 1) 做一个88*31的LOGO。
if (document.images)
var staticlogo=new Image(88,31)
// 2) 设置LOGO的路径。
staticlogo.src="图片的名称1.gif"
// 3) 以下是LOGO代表的连接。
var logolink="http://yuxuemei.yeah.com"
// 4) 设置ALT属性。
var alttext="虞雪梅我爱你"
// 5) 设置下列属性为 1或者0(1是IE特有的，使LOGO隐现）
var fadeintoview=1
/* 6) 最后设置LOGO显示的时间，例如12 秒，数值为0表示一直显示
*/
var visibleduration=12
/////////////////////////以下不要改变/////////////////////////
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
var fadeset=''
if (fadeintoview)
fadeset="filter:alpha(opacity=0)"
if (document.all)
document.write('<span id="logo"" style="'+fadeset+';position:absolute;top:100;width: |
| 14、左右移动的图片 |
====1、将以下代码加入到HEML的<head></head>之间：
<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>
====2、将以下代码加入到HEML的<body></body>之间：
<img src="要显示的图片名称.gif" name="picture"
style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" HEIGHT="40">
<script LANGUAGE="JavaScript"><!--
setTimeout("moveLR('picture',300,1)",10);
//--></script> |
| 15、图象滚动公告板 |
====1、将以下代码加入到HEML的<body></body>之间：
<script language="JavaScript1.2">
<!--
/*设置下面的参数。 设置scrollerwidth和scrollerheight参数，设置成滚动显示的图片中尺寸最大的。*/
var scrollerwidth=140
var scrollerheight=40
var scrollerbgcolor='white'
//每个图间暂停3秒。
var pausebetweenimages=3000
//边界下面的行，如果希望logo都是带连接的，只要加上<a>标签即可。
var slideimages=new Array()
slideimages[0]='<a href="index.htm"><img src="第一张图片.gif" border=0"></a>'
slideimages[1]='<a href="index1.htm"><img src="第二张图片.gif"></a>'
slideimages[2]='<a href="index2.htm"><img src="第三张图片.gif"></a>'
slideimages[3]='<a href="index3.htm"><img src="第四张图片.gif"></a>'
//尽管填加更多的。
//////以下不要修改////////////////
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",100)
}
else{
tlayer.top=scrollerheight
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",100)
}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2)",pausebetweenimages)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2)",pausebetweenimages)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("move4(second2)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}}
function startscroll(){
if (document.all){
move3(first2)
second2.style.top=scrollerheight
}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top=scrollerheight+5
document.main.document.second.visibility='show'
}}
window.onload=startscroll
//-->
</script> <ilayer id="main" width="&{scrollerwidth};" height="&{scrollerheight};" |
| 16、随屏幕移动的图象 |
====1、将以下代码加入到HEML的<head></head>之间：
<style type="text/css">
#floater {
position: absolute;
left: 500;
top: 146;
width: 125;
visibility: visible;
z-index: 10;
}</style>
====2、将以下代码加入到HEML的<body></body>之间
<div ID="floater" style="left: 590px; top: 158px">
<p align="center"><img SRC="想要显示的图片.gif" alt="图片显示的文字" WIDTH="125" HEIGHT="60"> |
| 45、永远居中的背景图片 |
|
====1、将以下代码加入HEML的<body></body>之间： <STYLE TYPE="text/css"> |
| 利用JAVASCRIPT制作简单动画 |
|
如果你需要改变动画播放速度, 比如每5秒换一张图片,那么改变setTimeout("imgturn('" +numb+ "')", 1000)中的1000为5000 |
| 制作会反弹的浮动图片 |
|
现在网上流行会弹来弹去的浮动图片。想给自己的网页也加上一个吗？其实很简单，把下面这段代码加到网页的<BODY></BODY>之间，然后，把图片换成你中意的就OK啦！
<div id="img" style="position:absolute;"> |
| D13:JavaScript实现滚动广告 |
|
作网页，总想多拉广告。在编制页面时，总想在有限的空间内放置尽可能多的内容，以求页面的紧凑与完美，如何在页面的固定位置轮流播放滚动广告呢，就象足球场边的三角翻转广告牌。JavaApplet程序可以实现，而且可滚动的广告远远多余三角滚动广告牌。不过速度实在太慢了。下面就向你介绍一种用JavaScript编写的在页面的固定广告位轮流播放广告的方法。 |
| D20:横向宽幅滚动图片的做法 |
|
看看本页的状态栏，所说的就是这个效果，将下面的这个ＪＳ放在<head></head>之间就可以了.
|
