用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 innerText和innerHtml应用
Jan 28 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
javascript的push使用指南
Dec 05 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
微信小程序class封装http代码实例
Aug 24 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
apache rewrite_module模块使用教程
2008/01/10 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
微信小程序开发探究
2016/12/27 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
python运行其他程序的实现方法
2017/07/14 Python
python自动裁剪图像代码分享
2017/11/25 Python
python多进程实现文件下载传输功能
2018/07/28 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python中format()格式输出全解
2019/04/12 Python
Python xlwt模块使用代码实例
2020/06/10 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
大学生助学金感谢信
2015/01/21 职场文书
防震减灾主题班会
2015/08/14 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python