超鏈接怎么正確調(diào)用javascript函數(shù)

更新時間：2016年05月23日 15:24:47 作者：秦風

本文介紹使用超鏈接調(diào)用javasript函數(shù)且不會影響GIF圖片動畫的方法，有遇到相同問題的小伙伴可以參考一下。

點擊超鏈接調(diào)用 JavaScript 函數(shù)，一般人都用：

但這有個缺點，就是點擊鏈接后，頁面上的GIF動畫將靜止。

試看如下代碼：

<script type="text/javascript"> 

<!-- 

function Foo() 

{ 

    //do something 

} 

//--> 

</script> 

<img src="logo.gif" alt="GIF 動畫" /> 

<a href="javascript:Foo();">使 GIF 動畫靜止的鏈接</a>

解決方法探討：

復制代碼代碼如下:

此時不影響動畫顯示，但鼠標移上去后，鼠標及超鏈接樣式不發(fā)生變化，雖然可以利用樣式表來改變鼠標及超鏈接樣式，但畢竟有些繁瑣，況且這種思路也不好。

再考查如下代碼：

復制代碼代碼如下:

我們可以發(fā)現(xiàn)，雖然點擊鏈接后不影響動畫顯示，但頁面總是滾到最上面，這種效果也不是我們想要的。

最終解決方法：

復制代碼代碼如下:

<a onclick="javascript:Foo();return false;" href="#">不影響 GIF 的鏈接</a>

如果不考慮GIF圖片的問題，以上方法均可。

您可能感興趣的文章:

詳解JavaScript到TypeScript的轉(zhuǎn)換過程
JavaScript是一門強大而靈活的編程語言，TypeScript作為JavaScript的超集，為開發(fā)人員提供了靜態(tài)類型檢查、更好的協(xié)作能力和面向?qū)ο缶幊痰闹С?，本文將詳細講解如何將JavaScript代碼轉(zhuǎn)換為TypeScript，并寫一些代碼示例參考
2023-06-06
layer彈出層取消遮罩的方法
今天小編就為大家分享一篇layer彈出層取消遮罩的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
微信小程序?qū)崿F(xiàn)圓心進度條
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)圓心進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
JavaScript繼承學習筆記【新手必看】
下面小編就為大家?guī)硪黄狫avaScript繼承學習筆記。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考
2016-05-05
JavaScript 網(wǎng)頁中實現(xiàn)一個計算當年還剩多少時間的倒數(shù)計時程序
這篇文章主要介紹了JavaScript 網(wǎng)頁中實現(xiàn)一個計算當年還剩多少時間的倒數(shù)計時程序,需要的朋友可以參考下
2017-01-01
JS模擬實現(xiàn)哈希表及應用詳解
這篇文章主要介紹了JS模擬實現(xiàn)哈希表及應用,結(jié)合實例形式分析了javascript模擬實現(xiàn)哈希表的步驟、相關操作技巧與使用方法,需要的朋友可以參考下
2018-05-05
基于JavaScript實現(xiàn)HarmonyOS備忘錄服務卡片
這篇文章主要介紹了基于JavaScript實現(xiàn)HarmonyOS備忘錄服務卡片，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-05-05
JS實現(xiàn)的倒計時效果實例(2則實例)
這篇文章主要介紹了JS實現(xiàn)的倒計時效果,列舉了兩則JavaScript倒計時效果代碼供大家參考,原理基本相似,代碼簡潔實用,需要的朋友可以參考下
2015-12-12
iframe實現(xiàn)高度自適應小程序web-view方案
這篇文章主要為大家介紹了iframe實現(xiàn)高度自適應小程序web-view方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
簡單聊一聊原生Ajax與JQuery?Ajax
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù),下面這篇文章主要給大家介紹了關于原生Ajax與JQuery?Ajax的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-03-03