js圖片模糊切換顯示特效的方法

更新時(shí)間：2015年02月17日 11:40:19 作者：代碼家園

這篇文章主要介紹了js圖片模糊切換顯示特效的方法,涉及js操作圖片特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js圖片模糊切換顯示特效的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<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.dhdzp.com","http://www.dhdzp.com","http://www.dhdzp.com")

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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript中replace( )方法的使用
JavaScript中replace函數(shù)方法是返回根據(jù)正則表達(dá)式進(jìn)行文字替換后的字符串的復(fù)制。使用方法:其中stringObj是必選項(xiàng)。要執(zhí)行該替換的 String 對(duì)象或字符串文字。
2015-04-04
鼠標(biāo)移動(dòng)到圖片名上,顯示圖片的簡(jiǎn)單實(shí)例
鼠標(biāo)移動(dòng)到名(wait.gif)上，顯示圖片，鼠標(biāo)移開(kāi)則不顯示圖片
2013-07-07
JS中filter( )數(shù)組過(guò)濾器的使用
這篇文章主要介紹了filter() 數(shù)組過(guò)濾的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-11-11
JavaScript頁(yè)面回流與重繪
這篇文章主要介紹了JavaScript頁(yè)面回流與重繪,一個(gè)html頁(yè)面是一個(gè)整體，當(dāng)這個(gè)整體中的某一個(gè)部分發(fā)生改變，那么這個(gè)頁(yè)面整體會(huì)重新進(jìn)行渲染，而如果我們采用添加標(biāo)簽的方式，每次添加一個(gè)標(biāo)簽，就會(huì)讓每一次頁(yè)面都重新渲染，性能急劇下降,下面來(lái)看看具體內(nèi)容吧
2022-01-01
使用firebug進(jìn)行調(diào)試javascript的示例
調(diào)試javascript的方法有很多，在本文為大家介紹下使用firebug是如何做到的，感興趣的朋友可以參考下
2013-12-12
實(shí)現(xiàn)圖片預(yù)加載的三大方法及優(yōu)缺點(diǎn)分析
本文介紹了實(shí)現(xiàn)圖片預(yù)加載的三大方法（CSS/JAVASCRIPT/AJAX)以及這三種方法的優(yōu)缺點(diǎn)分析，是篇非常值得推薦的文章，小伙伴們可要仔細(xì)研究下。
2014-11-11
一起來(lái)了解JavaScript的變量作用域
這篇文章主要為大家詳細(xì)介紹了JavaScript變量作用域，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
javascript同步服務(wù)器時(shí)間和同步倒計(jì)時(shí)小技巧
本文給出如何在頁(yè)面上同步顯示服務(wù)器時(shí)間的解決方案，能夠?qū)崿F(xiàn)同步服務(wù)器時(shí)間、同步倒計(jì)時(shí)，卻不占用服務(wù)器太多資源，下面我給寫(xiě)出實(shí)現(xiàn)的思路
2015-09-09
bootstrap fileinput 上傳插件的基礎(chǔ)使用
這篇文章主要介紹了bootstrap fileinput 上傳插件基礎(chǔ)使用，重點(diǎn)是把界面做得更加友好，更好的增加用戶體驗(yàn)。對(duì)bootstrap fileinput知識(shí)感興趣的朋友通過(guò)本文一起學(xué)習(xí)吧
2017-02-02
JavaScript實(shí)現(xiàn)無(wú)窮滾動(dòng)加載數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)無(wú)窮滾動(dòng)加載數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05