滑鼠移動與按鍵事件 JavaScript 滑鼠移動與按鍵事件.

Slides:



Advertisements
Similar presentations
醫學美學之我見ー肉毒桿菌 班級:應日三乙 姓名:蔡雅卉 學號: 497E0076. 前言 現在的人,已經把 整型看做是微不足 道的事情了。即使 只是戴牙套、局部 雷射、割雙眼皮、 打美白針、肉毒桿 菌等等,都可以在 身體上做不同的改 變,而讓自己更滿 意自己的外表。
Advertisements

“321人才计划”情况介绍 南京高新技术产业开发区 人才工作办公室.
第六章 网页设计与制作基础.
南宁市中考网上报名录取系统 使用手册 2014年5月.
主計室 請購系統 沈淑芬 助理 分機 2587.
讲故事训练 授课人:田轶.
第十一課 菜園 6-11.
邮币卡开户、银行签约、出入金流程.
作業2-Javascript實作 (請同學自行研讀電子書或指定之Javascript教科書) 書上習題: 11-3
校本选修课 第三专题 西藏问题 北京师大二附中 李文燕.
实验一:分析“征途游戏”网站的类型与推广手段
網路程式設計-期末專案 資工二B B975701 2 8 黃首翰 ~Rock your life~
簡報內容 網路請購系統說明 經費授權注意事項 請購單&授權應用範例 系統環境及設定. 簡報內容 網路請購系統說明 經費授權注意事項 請購單&授權應用範例 系統環境及設定.
JavaScript中常用的互動方式 認識簡單的交談與基本的運算.
第12讲 Javascript 复习 信息学院 孙辉.
——奧科特公開及內部培訓 系列課程(三)之十一
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
P303 HTML/DHTML/CSS/JavaScript 專業HTML網頁設計 陳錦輝.
三重有情、修德有愛 2003/12/24.
第五单元课1-3 层叠样式表.
正修科技大學教學發展中心 教師教學觀摩與經驗分享 電子工程系 張法憲副教授.
文書檔案與實務概述 103年7月30日 主講人:總務處文書組單秀琴組長.
第4章 JavaScript脚本语言基础 4.1 JavaScript简介 4.2 JavaScript语法基础
第3章 JavaScript语言基础.
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
14 JavaScript语言基础 JavaScript是一种轻量级、解释型的Web开发语言。所谓轻量级,就是语言的体系结构不是很庞杂,例如,没有C、Java等语言中的类、内存管理、系统管理等高深的知识范畴;所谓解释型,就是语言在浏览器或服务器等环境中直接被解释执行,不需要对源代码进行编译操作。
北京市医师定期考核信息管理系统 在线考试培训会 北京市卫生和计划生育委员会 北京市医师定期考核办公室 2016年9月
经 络 学.
蘇軾詞的賞析
数据访问页.
柯奕宏(06) 王予亨(13) 郭秉逸(15) 楊雯凈(23) 顏佑瑩(32)
5.1 – 表格(FORM) 輸入元素 : 兩種傳遞方法 : GET or POST 範例 1. 文字欄位 Text box
第十五章 传播学调查研究方法.
CT212 (02/03)-Network Programming and design
网页制作 第五讲 Dreamweaver基础.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
网 页 制 作 DREAMWEAVERMX 2004.
教師: 陳明瑤 電郵: 網際網路應用-網頁設計3 教師: 陳明瑤 電郵:
DhtmlXGrid表格显示控件简介.
第15章 行为 Dreamweaver CS4提供了丰富的行为,这些行为的使 用可以为网页对象添加一些动态效果和简单的交互功 能,使那些不熟悉JavaScript语言的网页设计师也可 以方便的设计出通过编写JavaScript语言才能实现的 功能。本章将首先介绍一些基本概念,以及“行为” 面板的基本操作;接着结合实例具体讲解常用的.
第7章 层与行为.
Ch.13 HTML網頁實作.
JavaScript 语言3 学习网站:心蕊设计
網頁製作比賽 ----技術探討
JavaScript 靜宜大學 資管系 楊子青.
PHP 程式流程控制結構.
吉林省信息技术与教学融合优质课大赛 参赛教师提交大赛作品流程 吉林省电化教育馆.
网 站 设 计 与 建 设 Website design and developments
2.2 Web界面设计 信息工程系 向模军 Tel: QQ:
程式語言與邏輯 高慧君 台北市立南港高中 2006年12月22日.
Ajax编程技术 第六章 调试与错误处理.
Ch09 在網頁之間傳遞資訊 網頁程式設計.
主讲:陶建平 华中科技大学网络与计算中心
JavaScript Sunxiaoshen.
網站HOLMES DATA監測代碼.
UI 软件 设计 页面布局(一).
JavaScript 语言2 学习网站: 第 4 章 JavaScript 语言2 学习网站:
HTML 103 互動式網頁 助教:黃毓瑩.
布局大师——表格.
第3章 JavaScript基本语句.
网 站 设 计 与 建 设 Website design and developments
Unity回傳統計資訊程式說明: 填寫回傳資訊網址(theUrl)。
杭州国家粮食交易中心 欢迎您!.
大葉服務學習執行說明 課外活動暨服務學習中心:黃泰元.
PHP程式設計 五、程式流程控制結構 建國科技大學 資訊管理學系 饒瑞佶.
一切都是課程 『國際教育』在明道.
網頁設計實務- PHP 與資料庫整合.
道家的中心觀念.
學生學習診斷與進展評量 測驗科目:第一次國語文、第二次數學 (數學要帶紙筆計算)
JavaScript 教师:魏小迪
Presentation transcript:

滑鼠移動與按鍵事件 JavaScript 滑鼠移動與按鍵事件

滑鼠移動事件 滑鼠在視窗內移來移去,就會產生事件。 稱為 onmousemove 事件 可用下列敘述告訴電腦,當發生 onmousemove 時,要去執行什麼函式去處理這個事件。 document.onmousemove = test; JavaScript 滑鼠移動與按鍵事件

滑鼠座標 滑鼠在視窗裡的座標會記錄在 ( event.x , event.y ) 裡。 視窗原點 ( 0, 0 ) 是在左上角。 往右 x 遞增 往下 y 遞增 JavaScript 滑鼠移動與按鍵事件

JavaScript 滑鼠移動與按鍵事件

純 IE 的版本 <SCRIPT language="JavaScript"> 在狀態列顯示滑鼠座標 純 IE 的版本 <SCRIPT language="JavaScript"> document.title = "取得滑鼠座標"; function msCoordinate(){ edX = event.x; //取得編輯區X座標 edY = event.y; //取得編輯區Y座標 window.status = "編輯區座標: x=" + edX + " y=" + edY; } document.onmousemove = msCoordinate; </SCRIPT> JavaScript 滑鼠移動與按鍵事件

JavaScript 滑鼠移動與按鍵事件

純 IE 的版本 圖片隨著滑鼠跑來跑去 <html> <style type="text/css"> #msPos { position:absolute; left:0px; top:0px; } </style> <SCRIPT language="JavaScript"> document.title = "圖片隨著滑鼠指標移動"; function msCoordinate(){ edX = event.x; //取得編輯區X座標 edY = event.y; //取得編輯區Y座標 document.all["msPos"].style.left = edX + 10; document.all["msPos"].style.top = edY + 16; } document.onmousemove = msCoordinate; </SCRIPT> <body> <img src="企鵝.bmp" id="msPos"> </body> </html> JavaScript 滑鼠移動與按鍵事件

滑鼠被按下事件 滑鼠按鍵(左鍵、右鍵)被按下時所產生的事件稱為 onmousedown 事件。 按鍵值會記錄在 event.button 裡。 左鍵:event.button = 1 右鍵:event.button = 2 JavaScript 滑鼠移動與按鍵事件

滑鼠被按下事件 可用下列敘述告訴電腦,當發生 onmousedown 時,要去執行什麼函式去處理這個事件。 document.onmousedown = test; 按鍵值會記錄在 event.button 裡。 左鍵:event.button = 1 右鍵:event.button = 2 JavaScript 滑鼠移動與按鍵事件

JavaScript 滑鼠移動與按鍵事件

純 IE 的版本 顯示滑鼠按鍵情形 <script language="JavaScript"> document.title = "滑鼠按鍵的辨識"; var leftMsg = "按了左鍵"; var rightMsg = "按了右鍵"; var msg = new String(); function msKey(){ btnCode = event.button; if( btnCode == 1 ) msg = leftMsg; if( btnCode == 2 ) msg = rightMsg; document.theForm.showMsg.value = msg; } document.onmousedown = msKey; </script> <body> 請按滑鼠左鍵或右鍵<BR> <form name="theForm"> <input type="text" name="showMsg" size="20"> </form> </body> JavaScript 滑鼠移動與按鍵事件

按右鍵的警告 為了防止有心人窺探網頁程式碼,或者不想讓人直接下載網頁圖片,最簡單的第一道防線,就是『按右鍵時,給他出現警告』。 JavaScript 滑鼠移動與按鍵事件

純 IE 的版本 按到滑鼠右鍵出現警告 <script language="JavaScript"> document.title = "滑鼠按鍵的辨識"; var leftMsg = "按了左鍵"; var rightMsg = "按了右鍵"; var msg = new String(); function msKey(){ btnCode = event.button; if( btnCode == 1 ) msg = leftMsg; if( btnCode == 2 ) alert("你想幹嘛?!"); document.theForm.showMsg.value = msg; } document.onmousedown = msKey; </script> <body> 請按滑鼠左鍵或右鍵<BR> <form name="theForm"> <input type="text" name="showMsg" size="20"> </form> </body> JavaScript 滑鼠移動與按鍵事件

練習 結合『在狀態列顯示滑鼠座標』、『圖片隨著滑鼠跑來跑去』、『按到滑鼠右鍵出現警告』這三個程式。 在視窗裡有個圖片會隨著滑鼠跑來跑去,同時在狀態列顯示滑鼠座標,當按到滑鼠右鍵時出現警告。 圖片不一定要用那隻企鵝。 JavaScript 滑鼠移動與按鍵事件