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