用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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
jQuery实现文档树效果
Feb 20 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
js module大战
Apr 19 Javascript
Nuxt页面级缓存的实现
Mar 09 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
javascript 函数速查表
2010/02/07 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
Python运算符重载详解及实例代码
2017/03/07 Python
python删除文本中行数标签的方法
2018/05/31 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
python实现简单的五子棋游戏
2020/09/01 Python
Python eval函数介绍及用法
2020/11/09 Python
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
计算机应用应届生求职信
2014/07/12 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
烟台的海导游词
2015/02/02 职场文书
2019秋季运动会口号
2019/06/25 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL