網頁動畫效果WOW.js+animate.css

Animate.css是個動畫CSS library,不過主要是專注在處理動畫的部分,在網頁上該什麼時機呈現動畫,加上WOW.js,如捲軸滑到畫面才出現動畫效果。

開始使用WOW.js

要使用WOW.js非常簡單,載入相關的程式碼後,加上一行程式碼就完成了!

Javascript

new WOW().init();

HTML

<div class="wow bounce"> 我只有在出現時才會呈現特效喔! </div>

Posted in Javascript

Continue Reading

Comment

Javascript 取得遊覽器語系代碼

navigator 對像中的這幾個與 language 相關的屬性。

navigator 對象包含有關瀏覽器的信息。沒有應用於 navigator 對象的公開標準,不過所有瀏覽器都支持該對象。但是其內部一些屬性及其返回值在各瀏覽器並不統一。

language:返回當前的瀏覽器語言(來自 Mozilla Developer Center)

userLanguage:返回操作系統設定的自然語言(來自 MSDN)

browserLanguage:返回當前的瀏覽器語言(來自 MSDN)

systemLanguage:返回當前操作系統的缺省語言(來自 MSDN)

Posted in Javascript

Continue Reading

Comment

Javascript使用setAttribute更改HTML元素屬性方法

Javascript可以使用getElementsById setAttribute來做到跟改html元素屬性方法如下:

範例一

<img id="images" src="/ucamc/" width="100"> 
<scritp> 
  document.getElementsById("images").setAttribute("width", "200"); 
<script>
 //執行結果 <img id="images" src="/ucamc/" width="200">

範例二

<!DOCTYPE html>
<html>
<head>
<style>
.democlass {
    color: red;
}
</style>
</head>
<body>

<h1>Hello World</h1>

<p>Click the button to add a class attribute with the value of "democlass" to the h1 element.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");
}
</script>

</body>
</html>

 

相關連結展示:http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_setattribute1

Posted in Javascript

Comment

Find the last offers by SkyBet at www.bettingy.com BettingY.com Bonuses