用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-世界上误解最深的语言分析
Aug 12 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
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
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
python制作填词游戏步骤详解
2019/05/05 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Python 日期与时间转换的方法
2020/08/01 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
python 通过exifread读取照片信息
2020/12/24 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
自荐信格式
2013/12/01 职场文书
银行优秀员工事迹
2014/02/06 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
小学教师读书笔记
2015/07/01 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
七年级作文之秋游
2019/10/21 职场文书
Python基础之元类详解
2021/04/29 Python
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android