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

開始使用WOW.js

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

Javascript

new WOW().init();

HTML

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

Comment

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

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

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

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

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

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

Comment

jQuery捲軸滑動區塊的判斷,網頁上常看到應用在廣告區塊上,讓使用者在滑下遊覽器捲軸時,到此區塊廣告的高度的後,並能夠將畫面上的廣告區塊能夠在此時畫面固定住,然而離開這個卷軸高度廣告區塊又能夠還原在原來區塊不固定。

Comment

jQuery隱藏與顯示所要展現的區塊

在網頁上常使用按下指定的按鈕(或區塊)後,jQuery隱藏與顯示所要展現的區塊,此方法可以使用jQuery click slideToggle 簡單的實現。

Comment

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

範例一

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

 //執行結果 <img id="images" src="/" 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

Comment

Copyright © 2018 ucamc