利用Javascript的getSelection()搜尋頁面裡的字串,再用document.execCommand()標注出來,就可以完成一個簡易的頁面搜尋功能了。
閱讀全文 Javascript 搜尋頁面關鍵字 document.execCommand
分類彙整: jQuery
RWD網頁切版(零){HTML網頁架構、常用標籤}
Javascript / jQuery execCommand 複製文字至剪貼簿 | Javascript / jQuery execCommand Copy Text to Clipboard
在網頁上加入[用line分享]的按鈕吧! | LINE Social Plugins – LINE it button
SVG的基本形狀
隨著html5技術的發展,SVG繪圖技術也越來越被廣範使用,除了可以大幅降低網頁流量之外,也可以避免圖片解析不穩定的問題,這一篇先寫一些基本的圖形標籤。
閱讀全文 SVG的基本形狀
RWD概論
RWD概論分成幾個部份,這一篇當目錄
- RWD的缺點
- 手機/平板/桌機 常見尺寸
- DPI vs PPI
- 像素密度
- Media Queries 媒體查詢
- 版⾯配置重點
- 不同平台的圖片比例
- 彈性圖片
- 網頁字型
- 表單
- 表格
- 在電腦上預覽手機畫面
- HTML5 繪圖物件
- HTML5 多媒體物件
- CSS動畫 vs JS動畫
手機/平板/桌機 常見尺寸
手機尺寸似乎有越來越大的趨勢,都快跟電腦螢幕一樣大了
根據統計網站 StatCounter 2016/03 – 2017/03 統計資料整理出來的圖表 閱讀全文 手機/平板/桌機 常見尺寸
RWD網頁切版(一){HTML5網頁框架}
jQuery辨識選單按鈕開關狀態
製作RWD網頁時,右上角的漢堡(hamburger)按鈕通常是按一下開啟選單,再按一下關閉選單,這個功能可以利用jQuery來製作就可以了。
閱讀全文 jQuery辨識選單按鈕開關狀態
jQuery go to top 按鈕 (go to top button)
<html>
<div id=”top”>TOP</div>
<css>
#top{
position: fixed;
right: 50px;
bottom: 20px;
}
<script>
$(‘#top’).click(function () {
$(‘html,body’).animate({
‘scrollTop’ : ‘0px’
}, 1000);
});