首页 > 代码库 > javascript特效源码(2、图像特效)
javascript特效源码(2、图像特效)
1、不停闪烁的图像
不停闪烁的图片[修改显示的图片及链接地址后根据说明进行共1步]1、以下代码放在一个新建页面的HTML的<body></body> 区即可：[页面上必须什么都没有]<HTML><HEAD><TITLE>Blink image</TITLE></HEAD><BODY onl oad="soccerOnload()" topmargin="0"><DIV ID="soccer" STYLE="position:absolute; left:150; top:0"><a href="http://图片的链接.com" target="_blank"><IMG SRC="http://www.mamicode.com/要显示的图片.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> 2、图片展示选择
图片展示选择[很棒的图片展示脚本所有图片尺寸应该一致才好]1、以下代码放在HTML的<body></body> 区即可：<CENTER><img width=200 height=223 src="http://www.mamicode.com/图片名字.jpg" name="x1"></CENTER>//以上是程序初始时显示的图片。<FORM><CENTER><SELECT onChange="document.x1.src=http://www.mamicode.com/options[selectedIndex].value"><option value="http://www.mamicode.com/图片名字1.jpg">看看图片1</option><option value="http://www.mamicode.com/图片名字2.jpg">看看图片2</option><option value="http://www.mamicode.com/图片名字3.jpg">看看图片3</option><option value="http://www.mamicode.com/图片名字4.jpg">看看图片4</option></SELECT></CENTER></FORM>
3、图片的渐现播放
图片的渐显播放[推荐][根据下面的说明进行共3步，修改图片的名称及路径即可]第三步的top:120px;left:240px可以设定显示的位置====1、将下面的代码插入到HEML的<head></head>之间： <script language=javaScript><!--//sandra0 = new Image();sandra0.src = "http://www.mamicode.com/image1.gif";sandra1 = new Image();sandra1.src = "http://www.mamicode.com/image2.gif";sandra2 = new Image();sandra2.src = "http://www.mamicode.com/image3.gif";var i_strngth=1var i_image=0var 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+")‘ src="http://www.mamicode.com/+imageurl[i_image]+" border=0>";i_strngth=i_strngth+10var timer=setTimeout("showimage()",100)}else {clearTimeout(timer)var timer=setTimeout("hideimage()",1000)}}if(document.layers) {clearTimeout(timer)document.testimage.document.write("<img src="http://www.mamicode.com/+imageurl[i_image]+" border=0>")document.close()i_image++if (i_image >= imageurl.length) {i_image=0} var timer=setTimeout("showimage()",2000)} }function hideimage() { if (i_strngth >=-10) {testimage.innerHTML="<img style=‘filter:alpha(opacity="+i_strngth+")‘ src="http://www.mamicode.com/+imageurl[i_image]+" border=0>";i_strngth=i_strngth-10var timer=setTimeout("hideimage()",100)} else {clearTimeout(timer)i_image++if (i_image >= imageurl.length) {i_image=0}i_strngth=1var timer=setTimeout("showimage()",500) }}//--></script>====2、修改<body>语句为：<body onl oad="showimage()">====3、将下面的代码加入到HEML的<body></body>之间：<div id="testimage" style="position:absolute;visibility:visible;top:120px;left:240px"></div> 4、将图片固定在左上角
将图片图片固定在页面左上角[根据说明修改即可共1步]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="http://www.mamicode.com/图片的名称1.gif"// 3) 以下是LOGO代表的连接。var logolink="http://www.happydrips.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:‘+staticlogo.width+‘;height:‘+staticlogo.height+‘"></span>‘)function bringintoview(){if (logo.filters.alpha.opacity<=95)logo.filters.alpha.opacity+=5else{clearInterval(viewit)if (visibleduration!=0)setTimeout("logo.style.visibility=‘hidden‘",visibleduration*1000)}}function createlogo(){staticimage=new Layer(100)staticimage.left=-300staticimage.top=120staticimage.document.write(‘<a href="http://www.mamicode.com/‘+logolink+‘"><img src="http://www.mamicode.com/‘+staticlogo.src+‘" border=0 alt="‘+alttext+‘"></a>‘)staticimage.document.close()staticimage.visibility="show"regenerate2()staticitns()}if (document.layers)window.onload=createlogo;if (document.all){w=2h=2logo.style.left=wlogo.style.top=h}function logoit(){var w2=document.body.scrollLeft+wvar h2=document.body.scrollTop+hlogo.style.left=w2logo.style.top=h2}function logoit2(){staticimage.left=pageXOffset+2staticimage.top=pageYOffset+2}function insertimage(){logo.innerHTML=‘<a href="http://www.mamicode.com/‘+logolink+‘"><img src="http://www.mamicode.com/‘+staticlogo.src+‘" border=0 alt="‘+alttext+‘"></a>‘if (fadeintoview)viewit=setInterval("bringintoview()",100)else{if (visibleduration!=0)setTimeout("logo.style.visibility=‘hidden‘",visibleduration*1000)}}if (document.all){window.onscroll=logoitwindow.onresize=new Function("window.location.reload()")window.onload=insertimage}function staticitns(){setInterval("logoit2()",90)if (visibleduration!=0)setTimeout("staticimage.visibility=‘hide‘",visibleduration*1000)}//--> </SCRIPT> 5、左右移动的图片
左右移动的图片[修改图片名称即可][共2步]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 -> 30if (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="http://www.mamicode.com/要显示的图片名称.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> 6、图像演示滚动公告板
图象滚动公告版[适合做图片的滚动友情链接][很有用][共1步]1、将以下代码加入到HEML的<body></body>之间：<script language="JavaScript1.2"> <!-- /*设置下面的参数。 设置scrollerwidth和scrollerheight参数，设置成滚动显示的图片中尺寸最大的。*/var scrollerwidth=140var scrollerheight=40var scrollerbgcolor=‘white‘//每个图间暂停3秒。var pausebetweenimages=3000//边界下面的行，如果希望logo都是带连接的，只要加上<a>标签即可。var slideimages=new Array()slideimages[0]=‘<a href="http://www.mamicode.com/index.htm"><img src="http://www.mamicode.com/第一张图片.gif" border=0"></a>‘slideimages[1]=‘<a href="http://www.mamicode.com/index1.htm"><img src="http://www.mamicode.com/第二张图片.gif"></a>‘slideimages[2]=‘<a href="http://www.mamicode.com/index2.htm"><img src="http://www.mamicode.com/第三张图片.gif"></a>‘slideimages[3]=‘<a href="http://www.mamicode.com/index3.htm"><img src="http://www.mamicode.com/第四张图片.gif"></a>‘//尽管填加更多的。//////以下不要修改////////////////if (slideimages.length>1)i=2elsei=0function move1(whichlayer){tlayer=eval(whichlayer)if (tlayer.top>0&&tlayer.top<=5){tlayer.top=0setTimeout("move1(tlayer)",pausebetweenimages)setTimeout("move2(document.main.document.second)",pausebetweenimages)return}if (tlayer.top>=tlayer.document.height*-1){tlayer.top-=5setTimeout("move1(tlayer)",100)}else{tlayer.top=scrollerheighttlayer.document.write(slideimages[i])tlayer.document.close()if (i==slideimages.length-1)i=0elsei++}}function move2(whichlayer){tlayer2=eval(whichlayer)if (tlayer2.top>0&&tlayer2.top<=5){tlayer2.top=0setTimeout("move2(tlayer2)",pausebetweenimages)setTimeout("move1(document.main.document.first)",pausebetweenimages)return}if (tlayer2.top>=tlayer2.document.height*-1){tlayer2.top-=5setTimeout("move2(tlayer2)",100)}else{tlayer2.top=scrollerheighttlayer2.document.write(slideimages[i])tlayer2.document.close()if (i==slideimages.length-1)i=0elsei++}}function move3(whichdiv){tdiv=eval(whichdiv)if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){tdiv.style.pixelTop=0setTimeout("move3(tdiv)",pausebetweenimages)setTimeout("move4(second2)",pausebetweenimages)return}if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){tdiv.style.pixelTop-=5setTimeout("move3(tdiv)",100)}else{tdiv.style.pixelTop=scrollerheighttdiv.innerHTML=slideimages[i]if (i==slideimages.length-1)i=0elsei++}}function move4(whichdiv){tdiv2=eval(whichdiv)if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){tdiv2.style.pixelTop=0setTimeout("move4(tdiv2)",pausebetweenimages)setTimeout("move3(first2)",pausebetweenimages)return}if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){tdiv2.style.pixelTop-=5setTimeout("move4(second2)",100)}else{tdiv2.style.pixelTop=scrollerheighttdiv2.innerHTML=slideimages[i]if (i==slideimages.length-1)i=0elsei++}}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+5document.main.document.second.visibility=‘show‘}}window.onload=startscroll//--></script> <ilayer id="main" width="&{scrollerwidth};" height="&{scrollerheight};" bgcolor="&{scrollerbgcolor};"> <layer id="first" left="0" top="1" width="&{scrollerwidth};"> <scriptlanguage="JavaScript1.2">if (document.layers)document.write(slideimages[0])</script> </layer> <layer id="second" left="0" top="0" width="&{scrollerwidth};" visibility="hide"> <script language="JavaScript1.2">if (document.layers)document.write(slideimages[1])</script> </layer> </ilayer> </p><p><script language="JavaScript1.2"><!-- if (document.all){document.writeln(‘<span id="main2" style="position:relative;width:‘+scrollerwidth+‘;height:‘+scrollerheight+‘;overflow:hiden;background-color:‘+scrollerbgcolor+‘">‘)document.writeln(‘<div style="position:absolute;width:‘+scrollerwidth+‘;height:‘+scrollerheight+‘;clip:rect(0 ‘+scrollerwidth+‘ ‘+scrollerheight+‘ 0);left:0;top:0">‘)document.writeln(‘<div id="first2" style="position:absolute;width:‘+scrollerwidth+‘;left:0;top:1;">‘)document.write(slideimages[0])document.writeln(‘</div>‘)document.writeln(‘<div id="second2" style="position:absolute;width:‘+scrollerwidth+‘;left:0;top:0">‘)document.write(slideimages[1])document.writeln(‘</div>‘)document.writeln(‘</div>‘)document.writeln(‘</span>‘)}//--></script> 7、跟随屏幕移动的
跟随屏幕移动的图像[推荐]修改图片名称和文字即可][共2步]====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="http://www.mamicode.com/想要显示的图片.gif" alt="图片显示的文字" WIDTH="125" HEIGHT="60"><br><font color="#FF8040">图片下面的文字</font></p></div><script LANGUAGE="JavaScript">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;}}<!-- /STALKER CODE --><!-- DRAG DROP CODE -->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 = http://www.mamicode.com/false;"heartBeat()",1);</script>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。