用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 相关文章推荐
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
jquery实现全屏滚动
Dec 28 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 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
PHP 输出缓存详解
2009/06/20 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
javascript实现图片上传前台页面
2015/08/18 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
详解vue-router导航守卫
2019/01/19 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python装饰器常见使用方法分析
2019/06/26 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python支付宝支付示例详解
2019/08/22 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
大学自我评价
2014/02/12 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python