搜索
Hype九九自拍 首頁 學習 教程 查看內容

手把手教你Hype中如何調用外部JavaScript(jQuery)代碼

2015-5-15 22:39| 發布者: MIke| 查看: 23853| 評論: 3|原作者: Mike

偶然的機會讓我接觸到這款神奇的軟件,起初接觸他的原因也很簡單,為了更方便地實現我設計的H5響應式頁面,但越研究你就會發現他的功能越強大。很多時候簡單的動效對于強大的Hype來說可謂是家常便飯,但是真正涉及到 ...

一 . 為元素添加一個簡單的點擊觸發彈出警示框實例

1.首先你需要編寫一段簡單的點擊觸發警示框的js腳本代碼(這幾段代碼我會添加在附件中供大家下載學習),選擇你喜歡的代碼編輯軟件,這里我選擇了Sublime Text3。

如上圖所示,我們先將該函數命名為redAlert()  ,請記住這個函數名,因為我們將會在后面的操作中通過這個函數名來調用該函數內部的要執行的代碼。然后在該函數內添加用于顯示帶有一條指定消息和一個 OK 按鈕的警告框語法alert()。將其命名為script1.js,保存至桌面。然后打開我們的軟件Hype。

2.打開Hype之后,這里我們新建了2個元素,一個文本,命名為Test1作為我們的第一個測試案例名稱,另一個是需要點擊觸發運行該警示框的按鈕,我們將他命名為Run redAlert,打開資源庫,把我們之前保存在桌面的script1.js文件拖入到資源庫中。

3.那么導入到資源庫中,我們怎么運行這段js腳本代碼呢。這個時候我們找到操作一欄。要為按鈕添加一個鼠標點擊時運行該js腳本代碼的一個動作,找到鼠標點擊時,在其中的操作一欄中我們選擇運行javascript,函數一欄中我們選擇新函數,這個時候在上方會彈出第二個選項卡。

4.第二個選項卡這里在function后面有一個無名稱的一個函數名,你可以將他命名為任何你想要的名字,這里我們將他命名為Test1,然后在該函數內輸入之前編寫的script1.js腳本文件中一樣的函數名來調用這個腳本,這樣我們就已經成功地調用了 外部js腳本文件。

5.好了,我們通過chrome瀏覽器來閱覽我們成功調用的js腳本文件后的效果吧。


二 .  使用唯一的ID

1.與前一樣,代碼我們就不一一編寫了。

我們吧之前編寫好的代碼復制到我們的編輯器中,這里介紹下這個段代碼大致表達的意思(首先命名了一個changeColor()的一個函數,之后設置了一個ID為“box1”來獲取背景顏色樣式的一個臨時變量,之后通過if...else if判斷語句來判斷,當box1的顏色值為grb(0,0,255),他就會執行下一個代碼塊,變成該代碼塊獲取的一個顏色rgb值,依此類推)。同樣我們將這段代碼保存到桌面,命名為script2.js。

2.首先插入一個文本  我們將他命名為Test2,這里是我們的第二個測試。為了使這段js是腳本有效,這里我們需要新建一個名為"box1"的矩形和一個控制該矩形改變顏色值的一個button按鈕。重點來了,為了使我們導出的第二段js腳本正常運作,我必須將矩形的填充樣式顏色設置為#0000FF和腳本中的rgb顏色值(0,0,255)匹配。之后吧我們導出的第二段js腳本代碼導入到資源庫中。

3.真正的重點來了,這里我們需要將矩形的名稱和唯一的元素ID設置成之前第二段js腳本代碼中設置要獲取的ID文件名一致。所以我們要在名稱和元素ID輸入框中,同時輸入"box1",這樣我們就有權力讓js腳本文件正常工作了。

4.之后我們就要給這個按鈕設置動作了,鼠標點擊時來運行javascript-新函數。與之前一樣在彈出來的第二個選項卡里面將沒有名稱的函數名命名為Test2(當然你這個名字可以隨便命),然后在該函數內輸入之前編寫的script2.js腳本文件中相同的函數名(changeColor())來調用這個腳本,這樣我們第二個調用有成功了。

5.最后讓我們再次通過chrome瀏覽器來預覽調用的效果吧。是不是很很簡單呢...


三 . 調用jQuery,這一部分我們將實現通過點擊按鈕來顯示和隱藏一段文本文字


這一步時準備工作:為了運行之后的jQuery腳本代碼,我們需要把jQuery庫下載下來。在瀏覽器中輸入鏈接地址jQuery.com,在首頁我們會看到一個大大的橙色下載按鈕,點擊進入,這里我們選擇了一個相對穩定的一個版本,點擊下載下來。我們將其命名簡化為jQuery.js(這個可不改)。之所以要下載這個jQuery庫呢,這個在后面的講解中會提到。

1.為了實現本部分的調用,這里我們先新建了一個文本和之前一樣將他命名為Test3,作為我們的第三個測試實例名稱。在場景中間插入一段我們要控制他隱藏顯示的文本和一個控制該文本隱藏和顯示的按鈕。這里我隨便找了一段關于“東方之星”報道的文字(為此次翻船遇難感到不幸)。

2.這一步挺重要的(通過這段jquery腳本代碼我們可以知道他的含義:當點擊這個名為"button1"的按鈕時,觸發2秒鐘的時間通過toggle() 方法切換名為"paragraph1"的可見狀態。)和之前在測試二中一樣為了使jQuery腳本代碼正常運作,我們需要將代碼中的ID名與Hype中對應的該元素的名稱,唯一的元素ID保持一致。所以我們將Hype中的按鈕命名為"button1",將中的文本命名為"paragraph1"。

3.之后我們將jQuery.js拖入到我們的資源庫中,這里為了安全起見我們檢查一遍之前的對應元素的名稱和唯一元素ID,OK。這里我們需要他在每一次場景加載的時候都運行這個jQuery庫,鼠標點到場景加載時-運行JavaScript-新函數。好的,和之前一樣第二個選項卡彈出。


4.我們給這個函數命名為LoadjQuery,這里有個地方不一樣,有人就要問了為什么和之前js的腳本代碼調用不一樣,不是簡單輸入函數名來執行,而是要導入整段jQuery腳本代碼呢。因為jquery代碼不能單獨調用,需要有jQuery庫的支持,這就是為什么我們前面需要下載jQuery庫,并將其導入到Hype資源庫中的原因。所以打開我們的代碼文件,將Test3中的jQuery腳本代碼復制粘貼到該函數中來運行。

5.好的,那讓我們在chrome瀏覽器中預覽效果把。當我第一次點擊按鈕時,文本通過2秒鐘的時間慢慢地隱藏了,第二次點擊這個按鈕時,他又通過2秒鐘的時間慢慢地顯示出來了。說明我們的調用已經成功了。

最后我還要補充一個知識點

如果你想手動在場景中編寫CSS樣式,以及需要提前加載的JavaScript腳本,你可以在文稿一欄中找到編輯頭部html,在彈出的選項卡中編寫你想要的樣式代碼

好的,這次我們的三個測試案例已經講完了,希望對大家今后的學習有一些幫助。如所述有錯誤的地方,請大家指出。附上測試案例講解中運用到的代碼文件和保存的Hype文件大家可以下載下來研究。歡迎大家轉采。喜歡該教程的可以為我點贊,并且關注我哦,謝謝!

教程素材合集.zip


16

鮮花

握手

雷人

路過

雞蛋

剛表態過的朋友 (16 人)

發表評論

最新評論

引用 crystal 2017-8-14 16:12
根據id class 添加元素樣式時,大部分不能完全生效,怎么辦~
引用 djscfzx 2016-6-28 02:33
很不錯~注意第三個是場景而不是按鈕,否則需按2次按鈕才會有效果,僅供后來者借鑒,避免繞路。
引用 zhuweihua 2016-5-25 22:19
好棒,正好用到!

查看全部評論(3)

為廣大Hype愛好者提供一個學習交流的平臺

正在努力制作Hype教程,盡可能為大家帶來最新的體驗!

Copyright © 2015 Comsenz Inc. Powered by Discuz! X3.1

返回頂部