用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 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
JavaScript变量声明详解
Nov 27 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
微信小程序 Image API实例详解
Sep 30 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
video.js使用改变ui过程
Mar 05 Javascript
js实现登录与注册界面
Nov 01 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 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
PHP网站备份程序代码分享
2011/06/10 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
简介Django中内置的一些中间件
2015/07/24 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python3并发写文件与Python对比
2019/11/20 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
库房保管员岗位职责
2014/04/07 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书