当鼠标移到图片上时会发生梦幻般轮流变化的图片特效 -- [图形特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

当鼠标移到图片上时会发生梦幻般轮流变化的图片特效

网络 2008/6/7 22:38:41 深山行者字体:大中小浏览 11197

以下为详细代码

[当鼠标移到图片上时会发生梦幻般轮流变化的图片特效]共3步
1、将以下代码加入<head></head>之间
<style>
.filter1 {filter:revealTrans(Duration=2.0,Transition=23)}
</style>
2.在<body>语句中加入:onload="startChange()"
例如：<body  onload="startChange()">
3.将以下代码加入<body></body>之间
<script language="JScript">
var cache1, cache2, vache3;
cache1 = new Image();
cache1.src = "/UploadFiles/demo/003.jpg";
cache2 = new Image();
cache2.src = "/UploadFiles/demo/004.jpg";
cache3 = new Image();
cache3.src = "/UploadFiles/demo/002.jpg";
var i = 0;
var j = 0;
var l = 0;
function changeImgSrc(imgsrc,dur,trans)
{
idLogo.className = "filter1";
idLogo.filters[0].Apply();
idLogo.filters.revealTrans.transition=trans;
idLogo.filters.revealTrans.duration=dur;
idLogo.src = imgsrc;
idLogo.filters[0].Play();
}
function startChange()
{
t = setInterval("changeImg()",10000);
}
function changeImg()
{
var e = idLogo.src;
i++;
j = i % 3;
if (j == 0) changeImgSrc("/UploadFiles/demo/004.jpg",1,23);
if (j == 1) changeImgSrc("/UploadFiles/demo/003.jpg",1,23);
if (j == 2) changeImgSrc("/UploadFiles/demo/002.jpg",1,23);
i = (i > 30000) ? 0 : i;
}
function doOver()
{
var e = event.srcElement;
l = (l == 0) ? 1 : 0;
if (l == 0)
{
if (j == 1) changeImgSrc("/UploadFiles/demo/003.jpg",0.5,12);
if (j == 2) changeImgSrc("/UploadFiles/demo/002.jpg",0.5,12);
if (j == 0) changeImgSrc("/UploadFiles/demo/004.jpg",0.5,12);
} else
{
if (j == 1) changeImgSrc("/UploadFiles/demo/004.jpg",0.5,12);
if (j == 2) changeImgSrc("/UploadFiles/demo/002.jpg",0.5,12);
if (j == 0) changeImgSrc("/UploadFiles/demo/003.jpg",0.5,12);
}
clearInterval(t);
}
function doOut()
{
var e = event.srcElement;
if (j == 1) changeImgSrc("/UploadFiles/demo/004.jpg",0.5,12);
if (j == 2) changeImgSrc("/UploadFiles/demo/003.jpg",0.5,12);
if (j == 0) changeImgSrc("/UploadFiles/demo/002.jpg",0.5,12);
t = setInterval("changeImg()",10000);
}
</script>
<img id="idLogo" src="/UploadFiles/demo/002.jpg"  width=500 height=320  onmouseover="doOver()" onmouseout="doOut()">

前一页:利用CSS的position定位属性定义一个顶部飘动的柳叶效果非常酷

后一页:图片渐显轮流播放

相关阅读: 常用正则表达式集锦; 深山留言板v4.8 - 5.13母亲节模板; 长城国际集团有限公司; 详解VBScript里的对象正则表达式功能介绍; png显示叉号的解决办法(IE无法显示PNG格式图片的解决办法); 爱尚学生网; 利用ResponseXML的方法调用163天气预报; asp金额数字转换为大小写汉字

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: div+css黑色焦点图(幻灯片效果非常不错); javascript实现图片预览功能; 比较实用的利用javascript按比例相应缩放图片大小; 一个效果非常不错图片载入loading等待效果; 利用css实现图片选中后显示文字与图片效果; 利用CSS里面的A:hover鼠标滑过缩略图时放大图片

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 设为首页代码; 要想创业成功必读的 36 条铁律; 模板自由切换; 利用java使图片左右上下循环连续滚动不出现空白; javascript表单验证！; 小说封面制作网站留言板模板

更多标签热门标签

jpg 阴影效果 Application blog 技巧渐变 rss 经典的 option 汉字 clear 考试屏幕比例 163 移动菜单边界重叠蜘蛛自动隐藏刷新设计调用滑过层 dreawmeaver 墙控制时钟导出关键词加长字节数幻灯 png 超出添加过期缓存柱状深山行者V1.2旅行社网站管理系统 web 2.0 素材 ctrl 日期版权点击 alert 连云港旅游列表