js圖片模糊切換顯示特效的方法
更新時間：2015年02月17日 11:40:19 作者：代碼家園
這篇文章主要介紹了js圖片模糊切換顯示特效的方法,涉及js操作圖片特效的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實(shí)例講述了js圖片模糊切換顯示特效的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<html>
<title>一款圖片模糊切換顯示效果</title>
<body>
<script language="JavaScript1.1">
<!--
var slidespeed=3000
var slideimages=new Array("/images/m01.jpg","/images/m02.jpg","/images/m03.jpg","/images/m04.jpg")
var slidelinks=new Array("http://www.dbjr.com.cn","http://www.dbjr.com.cn","http://www.dbjr.com.cn")
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>
<a href="javascript:gotoshow()"><img src="/images/csrcode.ico" name="slide" border=0 style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a>
<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
if (ie55) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
//-->
</script>
</body>
</html>
<title>一款圖片模糊切換顯示效果</title>
<body>
<script language="JavaScript1.1">
<!--
var slidespeed=3000
var slideimages=new Array("/images/m01.jpg","/images/m02.jpg","/images/m03.jpg","/images/m04.jpg")
var slidelinks=new Array("http://www.dbjr.com.cn","http://www.dbjr.com.cn","http://www.dbjr.com.cn")
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>
<a href="javascript:gotoshow()"><img src="/images/csrcode.ico" name="slide" border=0 style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/></a>
<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
if (ie55) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
//-->
</script>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- 用javascript實(shí)現(xiàn)的圖片馬賽克后顯示并切換加文字功能
- 用javascript實(shí)現(xiàn)圖片馬賽克后顯示并切換
- JS實(shí)現(xiàn)圖片高斯模糊切換效果的焦點(diǎn)圖實(shí)例
- Javascript實(shí)現(xiàn)圖片加載從模糊到清晰顯示的方法
- js放大鏡放大圖片效果
- JavaScript圖片放大鏡效果代碼[代碼比較簡單]
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- 純JS實(shí)現(xiàn)旋轉(zhuǎn)圖片3D展示效果
- JavaScript 圖片放大鏡（可拖放、縮放效果）
- js實(shí)現(xiàn)圖片漂浮效果的方法
- JS實(shí)現(xiàn)馬賽克圖片效果完整示例
相關(guān)文章
梳理總結(jié)JavaScript的23個String方法
文章主要介紹了梳理總結(jié)JavaScript的23個String方法,JavaScript?中的String類型用于表示文本型的數(shù)據(jù)。它是由無符號整數(shù)值作為元素而組成的集合,更多詳細(xì)內(nèi)容需要的朋友可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖動模糊框特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript使用FileReader實(shí)現(xiàn)圖片上傳預(yù)覽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript使用FileReader實(shí)現(xiàn)圖片上傳預(yù)覽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
超級簡易的JS計算器實(shí)例講解(實(shí)現(xiàn)加減乘除)
下面小編就為大家?guī)硪黄壓喴椎腏S計算器實(shí)例講解(實(shí)現(xiàn)加減乘除)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
COM組件中調(diào)用JavaScript函數(shù)詳解及實(shí)例
這篇文章主要介紹了COM組件中調(diào)用JavaScript函數(shù)詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了css+js制作不定高度展開收起動畫詳解的相關(guān)資料,需要的朋友可以參考下2023-06-06
本篇文章主要介紹了JS實(shí)現(xiàn)頁面打?。ㄕw、局部），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JS效率個人經(jīng)驗(yàn)談（8-15更新），加入range技巧
JS效率個人經(jīng)驗(yàn)談（8-15更新），加入range技巧...2007-01-01
這篇文章主要介紹了對TypeScript庫進(jìn)行單元測試的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了js制作提示框插件的方法，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12