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

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

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

以下为详细代码

[当鼠标移到图片上时会发生梦幻般轮流变化的图片特效]共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定位属性定义一个顶部飘动的柳叶效果非常酷

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

相关阅读: asp用cDec将二进制转十进制然后再用cBit将十进制转二进制; 松原市海航商务旅行社; 旅行社网站模板8; 深山文章管理系统 v1.0 bulid 090418; 程序员在网站设计时应注意的SEO细节; 旅行社线路主题默认模板5; input输入框的一些属性详解; 旅行社手机网站模板2

共有0条关于《当鼠标移到图片上时会发生梦幻般轮流变化的图片特效》的评论: 发表评论

正在加载评论......

返回顶部发表评论

呢称:
表情:
内容:	评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码:

网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; 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还有其它的吗

更多>>随机抽取信息: 振辉自清洗过滤器; asp中利用split,instr组合去除二维数组中重复项; 旅行社管理系统商业版3.0发布; 复选框添加，删除信息，过滤重复; CSS编写中灵活运行注释的意义; 定义链接的样式CSS

更多标签热门标签

对话框杈规 字节数 overflow 滤镜刷新选择符 FireFox 顶部 dl 行号无限动态 innerHTML 收缩程序 rnd 图片千位压缩显示器数字 ico 深山行者关键词 display 深山旅游网站管理系统V1.0 长 Java 源文件百度 absolute split div CSS 汉字小旋风重复 font-size web 锚点插件 instr 防止计划管理 DIV CSS做的透明菜单兼容IE、FF等数据竖排相册分隔符