用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 相关文章推荐
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
详解javascript数组去重问题
Nov 06 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
vue实现表格合并功能
Dec 01 Vue.js
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
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
ext 代码生成器
2009/08/07 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
Vue组件化开发思考
2018/02/02 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
python清除字符串中间空格的实例讲解
2018/05/11 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python支持多线程的爬虫实例
2019/12/21 Python
pytorch中图像的数据格式实例
2020/02/11 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
外语系毕业生自荐信范文
2013/12/16 职场文书
公司成立感言
2014/01/11 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
八年级数学教学反思
2016/02/17 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
python开发实时可视化仪表盘的示例
2021/05/07 Python
vue实现登陆页面开发实践
2022/05/30 Vue.js