用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 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
jquery indexOf使用方法
Aug 19 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
浅析java线程中断的办法
Jul 29 Javascript
vue实现图片懒加载的方法分析
Feb 05 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发送get、post请求的6种方法简明总结
2014/07/08 PHP
php单例模式的简单实现方法
2016/06/10 PHP
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
javascript每日必学之循环
2016/02/19 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
Python基础之getpass模块详细介绍
2017/08/10 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
应聘自荐书
2013/10/08 职场文书
党课学习思想汇报
2014/01/02 职场文书
护士自我介绍信
2014/01/13 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技