站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
用JavaScript实现动态特效变换图片效果
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
<span style="border:1px solid #000; text-align:center; float:right; padding:6px; margin-bottom:15px;"><strong>导航:</strong> [[JavaScript特效汇聚|上一页]] | {{Template:JavaScript导航}}</span> <div style="clear:both;"></div> *在[[网页]]中插入一张图片,给图片加上[[ID]]号为:img1,若改变ID号,那么在程序中也要作相应改变。再给图片加载一个revealTrans滤镜,完成后的图像标记<img>的完整代 码如下: <img id="img1" src="1.jpg" width="200" height="134" style="filter:revealTrans(Transition=1,Duration=1.5)" > 滤镜中的Duration是控制切换时间(以秒计)的,本例设置的是1.5秒,若想使切换过程慢一些,可加大Duration参数的值。 *在网页源代码的<head>与</head>之间插入下面这段javascript程序代码: <pre> <script language="javascript"> <!-- var k=0; //声明一个计数器变量 var imgname1="upfiles/cssp"; //所有图片地址的前面相同的部分,要根据实际修改这个值。 var imgname2=".jpg"; //图片的文件格式,可根据实际情修改,前面那个小点不要漏了。 var imgnub=3; //要展示的图片的张数,根据实际修改此值。 function start(){ //程序主体部分 obj=eval("img1"); //若图像标记的ID号改变,请修改括号中的字符串值。 if (obj.filters.item(0).Transition==23) // 这部分语句是用于改变切换样式,在23种样式中循环。 obj.filters.item(0).Transition=1; else obj.filters.item(0).transition++; obj.filters.item(0).Apply(); if (k<imgnub) {k++; //这部分语句用于改变图像标记的src的图片地址(既含路径的文件名)。 }else {k=1; } obj.src=imgname1+k+imgname2; obj.filters.item(0).Play(); setTimeout("start(1)",3000); //每三秒钟刷新一次。 } --> </script> </pre> 若要让图片在切换后停留的时间长一点,可加大定时函数setTimeout中的定时数值(以毫秒计)。 *在网页源代码的<body>标记中加上onload="start()"事件,以使得在网页载入时就显示动态切换效果。 至此,制作结束。 [[category:脚本语言|J]] [[category:JavaScript]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:JavaScript导航
(
编辑
)