首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

用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 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
JavaScript 学习笔记之操作符（续）
Jan 14 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）
Oct 15 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 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
Python(3) Pytesseract(1) 进度条(1) 柱状图(1) GCN(1) 鲲鹏(1) 验证码(1) Flask(2) PIL(1) 裁剪图片(1)
You might like
用ＰＨＰ和ＡＣＣＥＳＳ写聊天室(一)
2006/10/09 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
进一步探究Python中的正则表达式
2015/04/28 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
农民工创业典型事迹
2014/01/25 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
安全环保演讲稿
2014/08/28 职场文书
异地恋情人节寄语
2015/02/28 职场文书
暑假打工感想
2015/08/07 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python