整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
些项目中会常看到点击文章内容文字变大缩小效果！下面就来说说用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小时内与您取得联系。
