Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>
</body>
</html>
輸出:
其他格式:
<strong>這個文本是加粗的</strong>
<em>這個文本是斜體的</em>
<big>這個文本字體放大</big>
<small>這個文本是縮小的</small>
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
標簽 | 描述 |
<code> | 定義計算機代碼 |
<kbd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目。 |
了點時間寫的,蠻長時間了。個人很喜歡,一段很簡單的代碼,卻能夠實現很多功能。(因為代碼文字呈現沒有格式,難以閱讀,以后小編提供的代碼都以截圖方式呈現,底部有源碼鏈接)。
到底多簡單,先來看代碼
基于jQuery
基于jQuery
拖拽實例圖:
拖拽實例圖
將代碼剝離,只要寫5行就可以實現拖拽了,是不是很簡單:
調用方式
放大、縮小
我們給拖拽增加點功能,支持放大、縮小,先看實例圖:
放大、縮小
將代碼剝離,原先的代碼保留不變,增加一個綁定事件:
放大、縮小
這樣來實現放大、縮小、拖拽是不是很簡單,還能實現很多其他效果,大家慢慢領悟。
原理分析:
放大、縮小、拖拽都離不開在網頁上拖動鼠標,對于前端來說就是 document 的 mousemove,當鼠標在網頁上移動的時候,無時無刻不在觸發 mousemove 事件,當鼠標觸發事件時,什么時候需要執行我們特定的操作,這就是我們要做的了。我在 mousemove 中增加了幾個對象來判定是否進行操作:
move:是否執行觸發操作
move_target:操作的元素對象
move_target.posix:操作對象的坐標
call_down:mousemove的時候的回調函數,傳回來的this指向document
call_up:當鼠標彈起的時候執行的回調函數,傳回來的this指向document
小提示:
簡單的操作,只需要設定 move_target 對象,設置 move_target 的時候不要忘記了 move_target.posix 哦;
復雜的操作可以通過call_down、call_up進行回調操作,這個時候是可以不用設置 move_target 對象的
深入研究
拖拽和放大、縮小實現了,但是有個問題,當我們鼠標點擊并滑動的時候,是會選中文本的,為了避免這個問題,大家可以自行百度
css 阻止文本選中
css 阻止文本選中
網頁的放大、縮小、拖拽事件就研究到這里了,小編不再對如何拓展進行深入講解,一切靠大家自行研究,權當課后作業了。~~
源碼鏈接地址:
http://orzcss.com/posts/d554a392/
本文內容均屬個人原創作品,轉載此文章須附上出處及原文鏈接。
加關注,定時推送,互動精彩多,若你有更好的見解,歡迎留言探討!
SS3實現可展開收縮的彈性動畫菜單,可以用在pc端和移動端頁面。喜歡的朋友可以進來看看!
效果圖:
未點擊菜單前
點擊菜單標識后
點擊“菜單”圖標后,導航文字會逐步顯示出來,然后菜單的標識也會變回為交叉圖形
代碼展示:
html:
css:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。