用javascript实现的图片马赛克后显示并切换加文字功能


Posted in Javascript onApril 21, 2007

<script language="JavaScript1.1">

var slidespeed=3000

var slideimages=new Array("http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_1_7.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_2_1.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_3_2.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_3_2.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_3_2.jpg")

var texts = new Array ("11111","22222","33333","44444","55555")
var texts1 = new Array ("11111","22222","33333","44444","55555")
var texts2 = new Array ("11111","22222","33333","44444","55555")
var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image();
imageholder[i].src=slideimages[i];

}

function gotoshow(){
window.location=slidelinks[whichlink]
}

//-->
</script>
<table width="200" border="1">
  <tr>
    <td colspan="2" rowspan="3"><img src="http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_1_7.jpg" name="slide" border=0 width=200px height="200px" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)"></td>
    <td><div id=text>
</div></td>
  </tr>
  <tr>
    <td><div id=text1>
    </div>
    </td>
  </tr>
  <tr>
    <td><div id=text2>
    </div>
    </td>
  </tr>
</table>

<div id=aa></div>

<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
whichlink=whichimage;
if(whichimage<slideimages.length){
whichimage=whichimage+1;
}else{whichimage=1}
/*
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0;
whichimage=(whichimage>=slideimages.length)?whichimage=slideimages.length:whichimage;
*/
if (ie55) document.images.slide.filters[0].apply()
var thesrc=(whichimage-1)>0?thesrc=whichimage-1:0
document.images.slide.src=imageholder[thesrc].src
if (ie55) document.images.slide.filters[0].play()
text.innerText=(whichimage<slideimages.length+1)? texts[whichimage-1] : 0;
aa.innerText= whichimage;
text1.innerText=(whichimage<slideimages.length+1)? texts1[whichimage-1] : 0;
text2.innerText=(whichimage<slideimages.length+1)? texts2[whichimage-1] : 0;
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()

//-->
</script>
<html>
<body>
</body>
</html>

Javascript 相关文章推荐
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
js调试系列 初识控制台
Jun 18 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
JavaScript canvas实现雨滴特效
Jan 10 Javascript
JS Timing
Apr 21 #Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 #Javascript
JS 建立对象的方法
Apr 21 #Javascript
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 #Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 #Javascript
在textarea中显示html页面的javascript代码
Apr 20 #Javascript
textarea的value是html文件源代码,存成html文件的代码
Apr 20 #Javascript
You might like
Smarty Foreach 使用说明
2010/03/23 PHP
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
django启动uwsgi报错的解决方法
2018/04/08 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
在Python中COM口的调用方法
2019/07/03 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
自主招生自荐书
2013/11/29 职场文书
名人演讲稿范文
2013/12/28 职场文书
物理教师自荐信范文
2013/12/28 职场文书
酒店led欢迎词
2014/01/09 职场文书
学生感冒英文请假条
2014/02/04 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
个人安全承诺书
2014/05/22 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
老公出轨后的保证书
2015/05/08 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
Python使用永中文档转换服务
2022/05/06 Python
Android 中的类文件和类加载器详情
2022/06/05 Java/Android