用javascript实现的图片马赛克后显示并切换加文字功能_图象特效

<script language="JavaScript1.1">

var slidespeed=3000

var slideimages=new Array("yun_qi_img/2482150_1_7.jpg","yun_qi_img/2482150_2_1.jpg","yun_qi_img/2482150_3_2.jpg","yun_qi_img/2482150_3_2.jpg","yun_qi_img/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=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/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>

时间: 2024-09-30 10:07:02

用javascript实现的图片马赛克后显示并切换加文字功能_图象特效的相关文章

用javascript实现图片马赛克后显示并切换_图象特效

<script language="JavaScript1.1"> var slidespeed=3000 //specify images var slideimages=new Array("yun_qi_img/2482150_1_7.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_2_1.jpg","http://www.blueide

纯JS实现的批量图片预览加载功能_图象特效

1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果 复制代码 代码如下: <div style="height: 2500px;" id="txtScrollTop"> </div> <div id="galleryList"> </div> 复制代码 代码如下: var util = { $: fu

兼容ie、firefox的图片自动缩放的css跟js代码分享_图象特效

需求:图片width<=330px,height<=150. 1.利用max-width,max-height使图片等比例自动缩放,代码: 复制代码 代码如下: img{max-width: 330px;max-height: 150px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小. 2.用javascript脚本来兼容ie6,代码如: 复制代码 代码如下: var img_width = img.Offset

又一个小巧的图片预加载类_图象特效

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Co

最简单的js图片切换效果实现代码_图象特效

无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]

js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结[原创]_图象特效

最近做一个图片的自动缩小效果,发现一直用的js,竟然在firefox下无法正常啊,导致页面变形.所以自己写了个兼容性一般的代码,大家可以来讨论下原来我用的是从pjblog上的 复制代码 代码如下: //查找网页内宽度太大的图片进行缩放以及PNG纠正  function ReImgSize(){   for (i=0;i<document.images.length;i++)    {    if (document.all){     if (document.images[i].width>

js实现运动logo图片效果及运动元素对象sportBox使用方法_图象特效

弹出自适应图片大小的窗口弹出窗口根据图片大小,自动判断高和宽。_图象特效

iPop Demo This is a demo of the image popup script. I know you want to see it in action. Testing things with a small image. The popups have been setup with the AutoApply extension which will automatically apply iPop to all links to images within a do

简单的实现点击箭头图片切换的js代码_图象特效