欢迎你的访问
 
返回天空素材库首页 http://www.Skysucai.com  
收藏本站
将本站设为首页
您当前的位置:天空素材首页 -> 图片翻滚导航 跟随机差不多
 
栏 目 导 航
. 常用代码 . 综合特效
. 状态特效 . 游戏特效
. 页面背景 . 页面特效
. 页面导航 . 文本操作
. 文本特效 . 图形特效
. 鼠标特效 . 时间日期
. 密码特效 . 浏览相关
. 警告对话 . 技巧特效
. 计数转换 . 测试搜索
. 代码生成 . 播放音乐
. 按钮特效 . 系统相关
. 链接特效 . 黑客性质
. 相关特效 . 窗口特效
. 广告特效 . 表单表格
. 模拟例子
相 关 文 章
· 状态栏显示链接内容...
· 又一例闪动的标题栏...
· 让标题栏文字动起来...
· 状态栏显示链接内容...
· 在输入框中输入什么...
· 状态栏打字效果特效...
· 闪动的标题栏特效
· 字符来回出现于状态...
· 在标题栏显示时间特...
· 一款状态滚动的文字...
本 类 热 门
· 雷达效果
· 图片上链接的虚线框
· 禁止对图片用右键
· 图像过来
· 改变网页背景图片
· 飘动的图片
· 让IE6不出现图像工具栏...
· 图片默认的大小
· 图片震动
· 图片展示
· 一种很酷的图片动态切...
· 图片渐渐显示
更多  
 
 
更多  
最 新 推 荐
· 状态栏时间跳动特效
· 农历挂历特效
· 真正的万年历
· 网页特效 菜单-会动的...
· 网页特效 时间-任意位...
· 个人网页特效-有前后日...
· 时间每过一秒,Radio就...
· 时钟显示在任意指定位...
· 带开关的Form时钟
· 记录几天后的日期
· 显示登陆时间
· 退出时显示访问时间
更多  
     
图片翻滚导航 跟随机差不多
图片翻滚导航 跟随机差不多
作者:佚名  来源:本站整理  名称:图片翻滚导航 跟随机差不多 

减小字体 增大字体

       

[提示:你可先按照下面代码提示修改 上面部分代码,再按运行,此处看到的演示不完全正确]

此特效的详细完整代码如下:

--------------------------------------------------------------------------------

脚本说明:
第一步:把如下代码加入<head>区域中
<script>
<!--//

//定义图片的宽度和高度,所有的图片要有相同的尺寸;
var imgwidth=400
var imgheight=60

//下面定义了包含2个图片的数组,数组的下标从0开始,你可以增加任意的图片,按照顺序增加即可,注意相应增加数组下标。
var imgname=new Array()
imgname[0]="imggum1.jpg"
imgname[1]="imggum2.jpg"

//下面定义图片的url,如果不需要url,将连接值设置为"#";
var imgurl=new Array()

imgurl[0]="http://java2000.126.com"
imgurl[1]="#"

// 先预读图片,不要修改这里;
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
    imgpreload[i]=new Image()
    imgpreload[i].src=imgname[i]
}


var pause=2000

//图片的显示速度,数值小速度快;
var speed=20

//下面的参数也会影响图片显示的速度,数值小速度快;代表2个图片的显示间隔。
var step=10

//不要修改下面的代码;
var i_loop=0
var i_image=0

function stretchimage() {
    if (i_loop<=imgwidth) {
        if (document.all) {
            imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"
        }
        i_loop=i_loop+step
        var timer=setTimeout("stretchimage()",speed)
      }
    else {
        i_loop=imgwidth
        clearTimeout(timer)
        imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>"
        var timer=setTimeout("shrinkimage()",pause)
    }
}

function shrinkimage() {
    if (i_loop>=0) {
        if (document.all) {
            imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"
        }
        i_loop=i_loop-step
        var timer=setTimeout("shrinkimage()",speed)
      }
    else {
        i_loop=0
        clearTimeout(timer)
        changeimage()
    }
}

function changeimage() {
    i_image++
    if (i_image>=imgname.length) {i_image=0}
    if (document.layers) {
        document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")   
        document.imgcontainer.document.close()
    }       
       stretchimage()
}


// -->
</script>
<style>
.containerstyle {
    position:absolute;
    left:100px;
    top:10px;
}
</style>

第二步:把如下代码加入<body>区域中
<span id="imgcontainer" class="containerstyle"></span>


第三步:把<body>区中的内容发言为:
<body bgcolor="#fef4d9" onLoad="stretchimage()">

 

[返回上一页] [打印图片翻滚导航 跟随机差不多]
上一篇特效:图片定期消失
下一篇特效:图形选择脚本
     
| 关于本站 | 服务条款 | 友情连接 | 网站地图 | 联系方式 | 广告联系 |