整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
些項目中會?？吹近c擊文章內容文字變大縮小效果！下面就來說說用javascript實現該簡單效果，供小伙伴們參考！
整體的效果如下：
效果圖
點擊加減按鈕即可對文字的放大縮小
實現代碼如下
html展示：
主要javascript代碼：
主要是用javascript來改變文字的px值使文字變大縮小！
了點時間寫的，蠻長時間了。個人很喜歡，一段很簡單的代碼，卻能夠實現很多功能。（因為代碼文字呈現沒有格式，難以閱讀，以后小編提供的代碼都以截圖方式呈現，底部有源碼鏈接）。
到底多簡單，先來看代碼
基于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/
本文內容均屬個人原創作品，轉載此文章須附上出處及原文鏈接。
加關注，定時推送，互動精彩多，若你有更好的見解，歡迎留言探討！
天講了怎么使用css中font-family來設置字體，如微軟雅黑、宋體、Arial等。繼續講下使用font-size屬性來定義字體大小。
語法如下:
p {
font-size:20px;
}
px(像素)大小是我們網頁的最常用的單位。谷歌瀏覽器默認的字體大小為16px 不同瀏覽器可能默認顯示的字體字號大小不一致，盡量給一個明確值大小，不要默認大小。可以給<body>指定整個頁面文字的大小。
來看下效果:
對應的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體系列</title>
<!--對h2修改下字體-->
<style>
body {
font-size: 16px;
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p>明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p>我欲乘風歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
</body>
</html>
有沒有發現除了標題標簽，其余的字的字體都是16px了？那么這里需要注意一點: 標題標簽比較特殊，需要單獨指定文字大小。
如下的效果:
可以看到標題字體變小了，具體的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體系列</title>
<!--對h2修改下字體-->
<style>
body {
font-size: 16px;
}
h2 {
font-size: 16px;
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p>明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p>我欲乘風歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
</body>
</html>
可以看到對h2單獨進行了字體設置
h2 {
font-size: 16px;
}
注意點:
不要忘記加上px
標題有特殊性，需要單獨設置文字大小。
好的，今天就到這里了。晚安~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
