用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 27 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
论JavaScript模块化编程
Mar 07 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
基于vue.js实现的分页
Mar 13 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
详解webpack2异步加载套路
Sep 14 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启动时候提示PHP startup的解决方法
2013/05/07 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
python绘图方法实例入门
2015/05/19 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python实现机器人行走效果
2018/01/29 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python和shell获取文本内容的方法
2018/06/05 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
波兰补充商店:Muscle Power
2018/10/29 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
在C#中如何实现多态
2014/07/02 面试题
shell程序中如何注释
2012/02/17 面试题
材料采购员岗位职责
2013/12/17 职场文书
升学宴主持词
2014/04/02 职场文书
环境保护建议书
2014/08/26 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
小学见习报告
2015/06/23 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL