不停闪烁的图片[修改显示的图片及链接地址后根据说明进行共1步]
====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>
图片展示选择[很棒的图片展示脚本所有图片尺寸应该一致才好]
====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>
图片的渐显播放[推荐][根据下面的说明进行共3步，修改图片的名称及路径即可]
第三步的top:120px;left:240px可以设定显示的位置
====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+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+10
var timer=setTimeout("showimage()",100)
}
else {
clearTimeout(timer)
var timer=setTimeout("hideimage()",1000)
}
}
if(document.layers) {
clearTimeout(timer)
document.testimage.document.write("<img src="+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="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth-10
var timer=setTimeout("hideimage()",100)
}
else {
clearTimeout(timer)
i_image++
if (i_image >= imageurl.length) {i_image=0}
i_strngth=1
var timer=setTimeout("showimage()",500)
}
}
//-->
</script>
====2、修改<body>语句为：
<body onLoad="showimage()">
====3、将下面的代码加入到HEML的<body></body>之间：
<div id="testimage" style="position:absolute;visibility:visible;top:120px;left:240px"></div>
将图片图片固定在页面左上角[根据说明修改即可共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="图片的名称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+=5
else{
clearInterval(viewit)
if (visibleduration!=0)
setTimeout("logo.style.visibility='hidden'",visibleduration*1000)
}
}
function createlogo(){
staticimage=new Layer(100)
staticimage.left=-300
staticimage.top=120
staticimage.document.write('<a href="'+logolink+'"><img src="'+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=2
h=2
logo.style.left=w
logo.style.top=h
}
function logoit(){
var w2=document.body.scrollLeft+w
var h2=document.body.scrollTop+h
logo.style.left=w2
logo.style.top=h2
}
function logoit2(){
staticimage.left=pageXOffset+2
staticimage.top=pageYOffset+2
}
function insertimage(){
logo.innerHTML='<a href="'+logolink+'"><img src="'+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=logoit
window.onresize=new Function("window.location.reload()")
window.onload=insertimage
}
function staticitns(){
setInterval("logoit2()",90)
if (visibleduration!=0)
setTimeout("staticimage.visibility='hide'",visibleduration*1000)
}
//-->
</SCRIPT>
左右移动的图片[修改图片名称即可][共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 -> 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>
图象滚动公告版[适合做图片的滚动友情链接][很有用][共1步]
====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>'
//尽管填加更多的。
//////以下不
java script的一些图像特效.rar_JavaScript特效_java script_javascript_javas
版权申诉
128 浏览量
2022-09-23
06:14:14
上传
评论
收藏 5KB RAR 举报
java script的一些图像特效.rar （2个子文件） 
java script的一些图像特效.txt 16KB www.pudn.com.txt 218B资源评论
邓凌佳
- 粉丝: 65
- 资源: 1万+
最新资源
- 论文(最终)_20240430235101.pdf
- 基于python编写的Keras深度学习框架开发，利用卷积神经网络CNN,快速识别图片并进行分类
- 最全空间计量实证方法（空间杜宾模型和检验以及结果解释文档）.txt
- 5uonly.apk
- 蓝桥杯Python组的历年真题
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 前端开发技术实验报告：内含4四实验&实验报告
- Highlight Plus v20.0.1
- 林周瑜-论文.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
