用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下attr和removeAttr的使用方法
Dec 28 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
详解javascript中的事件处理
Nov 06 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
js编写选项卡效果
May 23 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 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获取远程文件的内容和大小
2015/11/03 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
javascript 一些用法小结
2009/09/11 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
小程序实现多选框功能
2018/10/30 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
pandas 空数据处理方法详解
2019/11/02 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
大学生求职推荐信
2013/11/27 职场文书
美容院考勤制度
2014/01/30 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
运动会方阵口号
2014/06/07 职场文书
演讲比赛策划方案
2014/06/11 职场文书
专项法律服务方案
2014/06/11 职场文书
情感电台广播稿
2015/08/18 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
MySQL查询日期时间
2022/05/15 MySQL