超酷滚动公式实现自定义滚动条
QtQScrollArea显示滚动条（添加自定义控件）
QtQScrollArea显⽰滚动条（添加⾃定义控件） 最近在做项⽬，想要使⽤⼀个带滚动条的窗体来显⽰⼀些信息，可以⾃⼰重写⼀个区域再关联⼀个QScrollBar，但是这样⼀来，⼯作量貌似挺⼤，之前就知道有QScrollArea对象，但是⼀直没⽤过，⼼⾥想着应该可以在上⾯布⼀些控件对象，但是后来查了帮助⽂档，怎么也没发现类似于append或者insert之类的⽅法，有从⽹上找了些资料，原来QScrollArea可以使⽤setWidget⽅法来设置需要使⽤滚动条来控制显⽰的窗⼝（现在想想，这样其实是很合理的，我⾃⼰当初想偏了，滚动条本来是应该⽤来控制窗⼝的滚动，⽽不能是⼀个button或者lineEdit）。
不过这样也简单，只需要⼦类化QWidget，或者仅仅创建⼀个QWidget对象，然后在其上使⽤⼀个布局，放需要显⽰的部件就可以了，于是就上⼿试了⼀下，源码如下：类及⽅法的声明1class ChatList : public QWidget2 {3 Q_OBJECT4public:5explicit ChatList(QWidget *parent = 0);6 ~ChatList();78private:9void initComponent();1011 signals:1213public slots:1415private:16 QScrollArea* m_pChatListScrollArea;17 QVBoxLayout* m_pSCVLayout;18 };类⽅法的实现1 ChatList::ChatList(QWidget *parent) : QWidget(parent)2 {3 initComponent();4 }56 ChatList::~ChatList()7 {8delete m_pChatListScrollArea;9 }1011void ChatList::initComponent()12 {13this->m_pChatListScrollArea = new QScrollArea(this);14this->m_pChatListScrollArea->setSizePolicy(QSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding));15this->m_pChatListScrollArea->setWidgetResizable(true);1617this->m_pSCVLayout = new QVBoxLayout(this);18this->m_pSCVLayout->setSizeConstraint(QVBoxLayout::SetMinAndMaxSize);1920 QWidget* widget = new QWidget(this);21 widget->setMinimumSize(72, 32);22 widget->setMaximumSize(80,32);2324int i = 0;25 QString str("pushButton %1");26 QPushButton* pushButton;27for (i=0; i<10; ++i)28 {29 pushButton = new QPushButton(str.arg(i+1), widget);30 pushButton->setMinimumSize(pushButton->size());31this->m_pSCVLayout->addWidget(pushButton);32 }33 widget->setLayout(this->m_pSCVLayout);34this->m_pChatListScrollArea->setWidget(widget);35 }但是这样并没有⾃⼰想要的效果，没有滚动条出现，或者滚动条不可以⽤，继续从⽹上找资料，在QTCN开发⽹是发现了⼀个求助帖，在最后⼀条回答中找到了答案，只需要在initCompont()⽅法的末尾给this添加⼀个Layout并且将QScrollArea对象放在该Layout中就可以了，具体需要添加的代码如下：1 QVBoxLayout *mainLayout = new QVBoxLayout(this);2 mainLayout->addWidget(this->m_pChatListScrollArea);3this->setLayout(mainLayout);main函数为：1 #include "ChatWidget.h"2 #include "ScrollArea.h"3 #include <QApplication>4 #include <QVBoxLayout>56int main(int argc, char* argv[])7 {8 QApplication app(argc, argv);910 ChatList chatList;11 chatList.show();1213return app.exec();14 }运⾏效果如下：后来⼜梳理了⼀下，在使⽤QScrollArea⼤体上需要按照这么⼀个框图顺序关于initComponent()⽅法中的⼀下设置属性的问题，是根据帮助⽂档中关于QScrollArea部分的Size Hints and Layouts部分中建议说明设置的，具体如下：Size Hints and LayoutsWhen using a scroll area to display the contents of a custom widget, it is important to ensure that the size hint of the child widget is set to a suitable value. If a standard QWidget is used for the child widget, it may be necessary to call QWidget::setMinimumSize() to ensure that the contents of the widget are shown correctly within the scroll area.If a scroll area is used to display the contents of a widget that contains child widgets arranged in a layout, it is important to realize that the size policy of the layout will also determine the size of the widget. This is especially useful to know if you intend to dynamically change the contents of the layout. In such cases, setting the layout's size constraint property to one which provides constraints on the minimum and/or maximum size of the layout (e.g., QLayout::SetMinAndMaxSize) will cause the size of the scroll area to be updated whenever the contents of the layout changes.具体内部原理也不太清楚，只是根据各种资料摸索出来的，也不确定这样写是不是合理，如果有更好的建议还望告知，在此先拜谢~~。
详解css3自定义滚动条样式写法
详解css3⾃定义滚动条样式写法本⽂介绍了css3⾃定义滚动条样式写法，分享给⼤家，具体如下：先简单介绍⼀下各个属性::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。
::-webkit-scrollbar-button ：滚动条两端的按钮。
可以⽤display:none让其不显⽰，也可以添加背景图⽚，颜⾊改变显⽰效果。
::-webkit-scrollbar-track ：外层轨道。
可以⽤display:none让其不显⽰，也可以添加背景图⽚，颜⾊改变显⽰效果。
::-webkit-scrollbar-track-piece ：内层轨道，具体区别看下⾯gif图，需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb ：滚动条⾥⾯可以拖动的那部分::-webkit-scrollbar-corner ：边⾓，两个滚动条交汇处::-webkit-resizer ：两个滚动条交汇处⽤于拖动调整元素⼤⼩的⼩控件（基本⽤不上）下⾯看⼏组⽐较效果⼀上图滚动条效果的css代码如下,默认此部分为原始代码，之后的效果图修改都是在此基础上修改/*css主要部分的样式*//*定义滚动条宽⾼及背景，宽⾼分别对应横竖滚动条的尺⼨*/::-webkit-scrollbar {width: 10px; /*对垂直流动条有效*/height: 10px; /*对⽔平流动条有效*/}/*定义滚动条的轨道颜⾊、内阴影及圆⾓*/::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: rosybrown;border-radius: 3px;}/*定义滑块颜⾊、内阴影及圆⾓*/::-webkit-scrollbar-thumb{border-radius: 7px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #E8E8E8;}/*定义两端按钮的样式*/::-webkit-scrollbar-button {background-color:cyan;}/*定义右下⾓汇合处的样式*/::-webkit-scrollbar-corner {background:khaki;}效果⼆在上⾯原始代码上加如下代码::-webkit-scrollbar-track-piece {background-color: darkred;}可看出覆盖了之前::-webkit-scrollbar-track属性的样式效果三在上⾯原始代码上加如下代码::-webkit-scrollbar-track-piece {background-color: darkred;background-image:url(https:///img/baidu_jgylogo3.gif); }现在是不是能理解上⾯说的内层轨道和外层轨道之分了效果四将原始代码的::-webkit-scrollbar-track属性改为::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-image:url(https:///img/baidu_jgylogo3.gif);background-color: rosybrown;border-radius: 3px;}⼤家仔细观察上⾯的⼏种情况，得出结论。
自定义滚动条mCustomScrollbar
⾃定义滚动条mCustomScrollbarmCustomScrollbar 是个基于 jQuery UI 的⾃定义滚动条插件，它可以让你灵活的通过 CSS 定义⽹页的滚动条，并且垂直和⽔平两个⽅向的滚动条都可以定义，它通过 BrandonAaron jquery mouse-wheel plugin 提供了⿏标滚动的⽀持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以⾃动调整滚动条的位置和定义滚动到的位置等。
(HTML必须存在于⽂档流, 不能为display:none)1.如何使⽤ mCustomScrollbar(必须要加载如下的4个⽂件)jquery.mCustomScrollbar.jsjquery.mousewheel.min.jsjquery.mCustomScrollbar.cssmCSB_buttons.pngjQuery：这个插件的必备库jQuery UI：扩展 jQuery 库并且为我们的滚动条提供了简单的动画和拖动功能。
jquery.mousewheel.min.js：这是 Brandon Aaron 编写的⼀个伟⼤的只有2kb的插件，它⾯向所有的操作系统和浏览器，为我们提供了⿏标滚动事件的⽀持。
jquery.mCustomScrollbar.js：这是我们的插件主⽂件。
在插件包的 minified 你可以找到它的压缩版。
jquery.mCustomScrollbar.css：这个 CSS ⽂件是让我们来定义边栏⽤的。
你可以在这个⽂件中定义你的边栏，当然你可以在其他的 CSS ⽂件中定义，要注意的是，你要⽤CSS 中的顺序，其中的优先级关系来覆盖这个⽂件中的定义。
mCSB_buttons.png：这个 png 图⽚⽂件，包含了向上向下向左向右滚动的按钮。
可以使⽤ CSS sprites 技术，来使⽤这个图⽚中的相应按钮。
插件包中包含了这个图⽚的 PSD源⽂件（sources/mCSB_buttons.psd ），你可以根据⾃⼰的需求⾃定义。
CSS中实现滚动条样式定制
CSS中实现滚动条样式定制滚动条是网页中常见的功能之一，而自定义滚动条样式则是增加网页美观度和个性化的一种方式。
本文将介绍如何使用CSS来实现滚动条样式的定制。
一、使用CSS的::-webkit-scrollbar伪元素WebKit浏览器引擎提供了一系列伪元素来定制滚动条的样式。
通过使用这些伪元素，我们可以修改滚动条的外观、颜色、大小等属性。
以下是一个示例代码，用于修改滚动条的基本样式：```css/* 修改垂直滚动条的样式 */::-webkit-scrollbar {width: 10px; /* 设置滚动条宽度 */}/* 修改滚动条轨道的样式 */::-webkit-scrollbar-track {background-color: #f1f1f1; /* 设置滚动条轨道背景颜色 */}/* 修改滚动条滑块的样式 */::-webkit-scrollbar-thumb {background-color: #888; /* 设置滚动条滑块背景颜色 */}/* 修改滚动条滑块悬停状态下的样式 */::-webkit-scrollbar-thumb:hover {background-color: #555; /* 设置滚动条滑块悬停状态下的背景颜色*/}```通过对上述代码进行修改，你可以根据个人需求来定制滚动条的样式，实现更加个性化的效果。
二、使用CSS3的scrollbar样式除了使用WebKit浏览器引擎提供的伪元素，CSS3也提供了scrollbar样式来定制滚动条的外观。
以下是一个示例代码，用于修改滚动条的基本样式：```css/* 修改滚动条的样式 */scrollbar {width: 10px; /* 设置滚动条宽度 */background-color: #f1f1f1; /* 设置滚动条背景颜色 */}/* 修改滚动条滑块的样式 */scrollbar-thumb {background-color: #888; /* 设置滚动条滑块背景颜色 */}/* 修改滚动条滑块悬停状态下的样式 */scrollbar-thumb:hover {background-color: #555; /* 设置滚动条滑块悬停状态下的背景颜色*/}```通过对上述代码进行修改，你可以根据个人需求来定制滚动条的样式，实现更加个性化的效果。
详解如何自定义CSS滚动条的样式
详解如何⾃定义CSS滚动条的样式本⽂会介绍CSS滚动条选择器，并在demo中展⽰如何在Webkit内核浏览器和IE浏览器中，⾃定义⼀个横向以及⼀个纵向的滚动条。
0.需求有的时候我们不想使⽤浏览器默认的滚动条样式，因为不够定制化和美观。
那么如何⾃定义滚动条的样式呢？下⾯⼀起来看看吧。
1 基础知识1.1 Webkit内核的css滚动条选择器::-webkit-scrollbar CSS伪类选择器影响了⼀个元素的滚动条的样式属性：::-webkit-scrollbar — 整个滚动条::-webkit-scrollbar-track — 滚动条轨道::-webkit-scrollbar-thumb — 滚动条上的滚动滑块::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分::-webkit-scrollbar-corner — 边⾓，即当同时有垂直滚动条和⽔平滚动条时交汇的部分::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)注意：(1)浏览器的⽀持情况：::-webkit-scrollbar 仅仅在⽀持Webkit的浏览器 (Chrome, Safari)可以使⽤。
(2)可设置竖直/⽔平⽅向的滚动条可以设置⽔平⽅向的滚动条(:horizontal)，不加默认是竖直⽅向(:vertical)。
(3)滚动条上的按钮（:decrement、:increment）可以设置图⽚，这点会在下⾯demo中展⽰。
1.2 IE⾃定义滚动条样式可⾃定义的样式⽐较少，只能控制滚动条各个部分显⽰的颜⾊，定制性较低。
这⾥我只列举了部分样式，诸如scrollbar-3dlight-color、scrollbar-highlight-color等样式试了下没有效果，这⾥不再列出：scrollbar-arrow-color — 滚动条三⾓箭头的颜⾊ scrollbar-face-color — 滚动条上滚动滑块颜⾊scrollbar-track-color— 滚动条轨道、按钮背景的颜⾊ scrollbar-shadow-color— 滚动框上滑块边框的颜⾊2.demo快速上⼿2.1 Webkit内核的浏览器⾃定义滚动条样式 (chrome, safari)如果觉得上述说明有些抽象，可以直接在浏览器中打开demo，结合demo中的注释来理解各个属性的意义。
Excel中的控件——滚动条的使用
创建滚动分条类汇总基本用法
• 最大值、最小值：为当前选项
-6-
的最值；
• 步长指每点一下滚动条上的左 右箭头时的增减值；
• 页步长指每点一下滚动条中非 滚动块的空位置时的增减值。
• 单元格链接指数值反应的单元 格
• 点击“确定”完成。，
Excel中的控件——滚动条
创建滚动分条类汇总基本用法
滚动条应用——创建图表数据区域
• 选中姓名和1月两列数据 • 插入一个柱形图
-11-
Excel中的控件——滚动条
滚动条应用——创建图表数据区域
• 根据姓名列和1月列产生柱形图：
-12-
Excel中的控件——滚动条
滚动条应用——添加滚动条控件
• “开发工具”选项卡，在“控件”组中找到插入滚动条控件
滚动条应用——插入动态图表
• 打开函数参数对话框可以看到，公式的结果为1月份的数据
-18-
Excel中的控件——滚动条
滚动条应用——插入动态图表
• 在“公式”菜单中单击“定义名称”，打开“新建名称”对话框，将将 该公式定义为名称；
-19-
Excel中的控件——滚动条
滚动条应用——插入动态图表
• 在J12单元格输入公式=INDEX(B2:M2,,I11)，获得对应的月份的名称
• 在右侧单击滚动条，链接的单元格B2的数值也随着变化，面积也随之改
-7-
变。
Excel中的控件——滚动条
创建滚动分条类汇总基本用法
• 按同样的方法，依次为下底和高设置滚动条
-8-
• 调整滚动条，就会引起指定单元格值发生变化，带动引用该参数的所有 数值发生变化，直到满意为止
自定义滚动条API
jQuery 自定义网页滚动条样式插件mCustomScrollbar 的介绍和使用方法开源程序 2013年01月04日文章目录[隐藏]●关于 mCustomScrollbar●如何使用 mCustomScrollbar● mCustomScrollbar 的参数介绍● mCustomScrollbar 的使用方法● mCustomScrollbar的原理●定义滚动条外观●更加进阶的使用：修改浏览器的滚动条WPJAM TOC如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个：jScrollPane 和mCustomScrollbar。
关于 jScrollPane，大家见过的可能比较多，但是这个插件太过于古老而且功能不强大，效果在几年前非常不错，但是放在现在就不好说了。
所以我选择了后者：mCustomScrollbar。
下图是两者官方示例的简单对比：本文就是介绍如何使用 mCustomScrollbar 这个插件，大部分的内容是翻译自mCustomScrollbar 官方的介绍页面，但是根据自己的理解做了部分的调整和修改，同时增加一些自己在使用中的一些技巧。
关于 mCustomScrollbarmCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义网页的滚动条，并且垂直和水平两个方向的滚动条都可以定义，它通过Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等。
总之，你知道非常好用就是了，:-)下载| 演示如何使用 mCustomScrollbarmCustomScrollbar 这个插件的下载包里面包含了所有的插件文件和一些例子。
添加滚动条的方法和步骤
添加滚动条的方法和步骤
要在网页中添加滚动条，你可以使用CSS样式来实现。
下面是一些步骤和方法：
1. 使用CSS的overflow属性，你可以通过设置元素的overflow属性来实现滚动条。
例如，如果你想要在一个元素中添加垂直滚动条，你可以将其overflow-y属性设置为scroll。
这样，当元素内容超出固定高度时，就会出现垂直滚动条。
2. 使用overflow-x和overflow-y属性，如果你只想要水平滚动条或垂直滚动条，你可以分别使用overflow-x和overflow-y属性来实现。
3. 使用max-height和overflow属性，你还可以结合max-height和overflow属性来实现在元素内容超出固定高度时出现垂直滚动条的效果。
通过设置max-height来限制元素的高度，并将overflow-y属性设置为scroll，就可以实现这一效果。
4. 使用iframe标签，如果你想要在网页中嵌入另一个网页，并为其添加滚动条，你可以使用iframe标签，并设置其属性来实现
滚动条效果。
总的来说，通过CSS的overflow属性以及结合其他属性的运用，你可以在网页中实现各种滚动条效果。
希望这些方法和步骤能够帮
助到你。
用scrollTop制作一个自动滚动公告栏
⽤scrollTop制作⼀个⾃动滚动公告栏我们在浏览⽹页时，经常会看到会⼀些滚动的栏⽬，⽐如向上滚动的公告、新闻等。
其实他们的制作都不难，只要学了基础的html、css、javascript就可以做出来，⽤JavaScript的scrollTop就⾏。
scrollTop：返回或设置匹配元素的滚动条的垂直位置。
1<div id="div1" style="width:200px;height:200px;background-color:#999999;overflow:auto;background-color: #999999;">2<div style="width:100px;height:300px;background-color:#FFFF00;">3这些⽂字显⽰在内层元素中。
4</div>5</div>这⾥，内层容器⾼度⼤于外层容器，就会产⽣垂直滚动条，当⽤javascript设置外层容器：var div1=document.getElementById("div1");div1.scrollTop=50;⽂字部分会往上⾛50像素，相当于⽤滚动条向下拉了50像素。
（注意：当内层容器内容不超出外层容器⾼度时，不会产⽣滚动条，因此scrollTop⾃然也⽆效了。
若外层容器设置了overflow:hidden时，不显⽰滚动条，但内容部分超出外层容器的话，scrollTop依然有效）这就是⼀个已经做好的demo截图，下⾯是详细步骤1、写html结构和css样式1<div id="main">2<h3 id="title">Title</h3>3<div id="box">4<ul id="con1">5<li><a href="#">1.学会html5 绝对的屌丝逆袭</a><span>2016-06-01</span></li>6<li><a href="#">2.tab页⾯切换效果（案例）</a><span>2016-06-01</span></li>7<li><a href="#">3.圆⾓⽔晶按钮制作（案例）</a><span>2016-06-01</span></li>8<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2016-06-01</span></li>9<li><a href="#">5.分页页码制作（案例）</a><span>2016-06-01</span></li>10<li><a href="#">6.导航条菜单的制作（案例）</a><span>2016-06-01</span></li>11<li><a href="#">7.信息列表制作(案例)</a><span>2016-06-01</span></li>12<li><a href="#">8.下拉菜单制作(案例)</a><span>2016-06-01</span></li>13<li><a href="#">9.如何实现“新⼿引导”效果</a><span>2016-06-01</span></li>14</ul>15<ul id="con2"> /* 滚动需要 */16 </ul>17 </div>18</div>1 * {2 margin: 0px;3 padding: 0px; /* 去掉所有标签的marign和padding的值 */4 }5 ul {6 list-style: none; /* 去掉ul标签默认的点样式 */7 }8 a {9 color: #333;10 font-size: 12px;11 text-decoration: none; /* 超链接样式 */12 }13 a:hover {14 color: #ff0000;15 }16 #main {17 width: 399px;18 border: 5px solid #ababab;19 -moz-border-radius: 15px; /* Gecko browsers */20 -webkit-border-radius: 15px; /* Webkit browsers */21 border-radius: 15px;22 box-shadow: 2px 2px 10px #ababab;23 margin: 50px auto 0;24 text-align: left; /* 让新闻内容靠左 */25 }26/* 头部样式 */27 #title {28 height: 62px;29 overflow: hidden; /* 内容超出的部分要隐藏，免得撑⾼头部 */30 font-size: 26px;31 line-height: 62px;32 padding-left: 30px;33 background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */34 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */35 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/36 border: 1px solid #f05e6f;37 -moz-border-radius: 8px 8px 0 0; /* Gecko browsers */38 -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */39 border-radius: 8px 8px 0 0;40 color: #fff;41 position: relative;42 }43 #title a {44 position: absolute;45 right: 10px;46 bottom: 10px;47 display: inline;48 color: #fff;49 font-size: 12px;50 line-height: 24px;51 }52 #box {53 height: 144px;54 width: 335px;55 margin-left: 25px;56 margin-top: 10px;57 overflow: hidden; /* 超出的内容部分要隐藏，免得撑⾼中间部分 */58 }59 #main ul li {60 height: 24px;61 }62 #main ul li a {63 float: left;64 text-indent: 15px;65 }66 #main ul li span {67 float: right;68 color: #999;69 }在con1设置了ul和li的⾼度样式，⾜以撑⼤容器，使得con1⾼度⼤于了外层容器#box⾼度，scrollTop就起作⽤了。
制作动态滚动条幅
会移动的文字(Marquee)基本语法<marquee> ... </marquee><marquee>啦啦啦，我会移动耶！</marquee>文字移动属性的设置方向 <direction=#> #=left, right<marquee direction=left>啦啦啦，我从右向左移！</marquee> <P><marquee direction=right>啦啦啦，我从左向右移！</marquee>方式 <bihavior=#> #=scroll, slide, alternate<marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee> <P> <marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee> <P> <marquee behavior=alternate>啦啦啦，我来回走耶！</marquee>循环 <loop=#> #=次数；若未指定则循环不止(infinite)<marquee loop=3 width=50% behavior=scroll>啦啦啦，我只走 3 趟哟！</marquee> <P><marquee loop=3 width=50% behavior=slide>啦啦啦，我只走 3 趟哟！</marquee> <P><marquee loop=3 width=50% behavior=alternate>啦啦啦，我只走 3 趟哟！</marquee>速度 <scrollamount=#><marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>延时 <scrolldelay=#><marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>外观(Layout)设置对齐方式(Align) <align=#> #=top, middle, bottom<font size=6><marquee align=# width=400>啦啦啦，我会移动耶！</marquee></font>对齐上沿、中间、下沿。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
免费素材 http://www.58pic.com xs1
超酷滚动公式实现自定义滚动条
本文作者:egoldy
文章出处:http://www.webstuido.com.cn
此教程是webstudio的预计将在11月底出版的新书 Flash网站建设技术精粹
第八章最后一节中的内容,以此用作示范。本文出现的演示文件，源文件均在此
文件里，
源文件下载 Scrollbar即滚动条，对我们来说再熟悉不过了，从我们开始使
用Windows操作系统那一天开始就已经知道滚动条了，它可以帮助我们在较小的
区域内显示更多的内容，这也是它非常实用的主要原因。在我们创建Flash站点
时，总会或多或少的用到它。下面将研究滚动条的应用。
1．文本滚动
首先来看一个简单的文本滚动，最简单的滚动就是我们常见的上下箭头，它同
样可以达到滚动的效果，如下图所示。
当然你可以任意对它的位置进行变换，它的应用是比较简单的，只是
TextField.scroll方法的应用而已。
范例11 演示文件
（1）重新创建好了一个FLA文档，将它存为scroll_external_text.fla。
（2）准备两个按钮，例如一个向上和一个向下的MovieClip，这里准备使用
的是MovieClip，当然你可以使用按钮。将它们放在第一层上，摆好位置，并在
属性面板上分别为其命名为down_btn和up_btn。
（3）选中场景中上的第1帧，按下F9键，打开ActionScript面板，在其中
写入如下脚本。
代码:
//载入外部文本var my_lv = new LoadVars();my_lv.onLoad =
function(success){ if(success){ my_txt.text = this.mytext;
my_txt.setTextFormat(my_fmt); }else{ trace( error load the external
files my_lv.load( hello.txt //创建字体各式实例对象var my_fmt = new
TextFormat();my_fmt.bullet = true;my_fmt.bold = true;my_fmt.color =
0x669933 //创建动态文本并指定文本格式
this.createTextField( my_txt ,this.getNextHighestDepth(),10,10,530,12
0);my_txt.wordWrap = true;my_txt.multiline = true;my_txt.border =
true;//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++//向
上滚动down_btn.onRelease = function(){ my_txt.scroll--;//向下滚动
up_btn.onRelease =
function(){ my_txt.scroll++;//+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++ 前面的一大段代码都是介绍过的内容，最后一段是应用的
滚动方式，如my_txt.scroll--和my_txt.scroll++，这两句中的scroll是
TextField的滚动方法，至于++和--实际上相当于my_txt.scroll
=my_txt.scroll+1和my_txt.scroll = my_txt.scroll-1。
（4）测试影片，点击按钮MovieClip，文本就可以上下滚动了。
（5）可能你还希望两个滚动按钮能够在被按下去不放时一直让内容不停地滚
免费素材 http://www.58pic.com xs1
动，那么只要找一种方法让scroll不断地循环执行就可以了，首选当然是
onEnterFrame。
只需要将滚动代码改写如下即可。
范例12 演示文件
2．超级滚动公式自定义滚动条
我们虽然比较熟悉滚动条，几乎是每天在使用它，但它的制作看上去并不是很
简单，虽然Macromedia已在Flash中提供了滚动条组件，但一方面由于通用性
的原因，它的体积大小比较大，另一方面，对于设计师来讲它可能并不适合，通
常情况下我们都希望能自已定义一个适合自已设计特点的滚动条。
下面我们就准备来制作一个自定义的滚动条，我做过多个版本的滚动条，经过
多次的实验，发现可以将它总结为一个公式来操作，这样无论遇到什么样的滚动
条，只要掌握了这个公式，滚动条的制作就自然不是问题了，下面首先分析一下
滚动的原理。
滚动条---超级滚动数学公式如下:
滚动内容的位置=内容的起始位置－(滚动百分比 可滚动的区域);
为了方便说明问题，我们把它写成变量表达示如下。
学好版面设计的小窍门
1、版面设计中要有理由对齐
2、版面设计中要做些精致的小零件
3、版面设计中的色块运用，往往选取图形中的颜色
4、版面设计中的统一、均衡、韵律
5、版面设计中的视觉导向、视觉中心根据版面中的图形确定
6、版面设计中要有隐形矩形框、隐形对齐线条
7、版面设计中敢于留白，整个版面中要通风，利于让人行走。
8、注意人们看图习惯于从上至下，从走至右。
9、版面中的字体最好少于三种，大小起码要三种，背景颜色最好少于三种。
10、当图片多了就把他们格起来。
11、有的时候可以违反以上所有规矩，要夸张、要疯、字要大的出奇，版面
乱成稻草堆，这样也是一种好的版面设计。
12、扎堆是个不错的主意。
13、不要被一眼看穿。耐看。
免费素材 http://www.58pic.com xs1
20个怎么学好广告图形创意的绝妙方法
1、丰富资料库，压缩资料库为经典资料库，提高自身阅历。
2、善于联想，善于拟人，比喻
3、以另类的眼光看成功的广告，提取优秀广告作品的基本图形创意并做记
录。总结其中思路，及创作方法。
4、对图形有审美能力，不放过具有象征意义、文化意义、积极意义的图形。
并能归类整理。
5、多做移花接木的训练(如库索)，能把不同类甚至无法归类的物体进行整
体化统一化系统化。如用班级同学名字创作故事。
6、联想图形不能轻易放弃对大脑的搜索，先从生活经验分类联想如从餐饮
用品、起居用品，办公用品、文化用品搜索相关物体进行联想，然后跳跃思维联
想一会儿想到了北极的埃斯积木人，一会儿想到七巧板中的董浩叔叔，一会儿又
想到了宿舍楼管员他儿子、象征，接着对联想到的物体进行拐弯联想如联想火的
图形，可能会先联想到森林大火，但森林大火怎么引起的?画一个人家自助游在
大森林落下的白酒瓶。有经验的人看到森林中枯黄的叶子上躺着一个灌着雨水的
白酒瓶，他们会意识到大火的来临。
7、就象李敖说的，他为什么会比人家聪明，他说他善于用故事情节，用图
形化的东西来表达文字，表达一个概念。如，我们做市场调查数据的说明往往用
柱状图或饼图来表达是一样道理。
8、多注意观察，特别是细节的问题，看到人家看不到的东西。
9、大家多多交流，以头脑风暴的形式来想图形创意。多看看同学的作品，
取长补短，不要自命清高。
10、关注成功广告或获奖广告的每一个细节，如背景色及制作背景的是手法，
版面排版，字体设计，文案与图形的搭配技巧，色彩运用等细节。
11、兴趣提高很重要。兴趣是学好任何技能的第一老师。
12、多看看有关于美术审美方面的书籍，提高自己的眼界。让自己的审美尺
度保持在最前沿。
13、随时把梦中、路上、马桶上等的突然的灵感记录在手机，或者随身携带
的小型笔记本上。防止灵感流失。
14、学好广告的基础，把自己在QQ上闲聊的时间用来恶补：素描速写、色
彩原理、色彩心理，版面设计等非常基础的东西。
免费素材 http://www.58pic.com xs1
15、到设计帝国、CNAD(中国广告网) DOLCN(中国设计在线) 333CN(中国设
计之窗) BULEIDEA(蓝色理想) HXSD (火星时代) 等论坛BBS上寻找前辈，通过
QQ、MSN、EMAIL等工具，通过各种手段(包括甜蜜的称呼，虔诚的崇拜)结交前
辈。通过前辈不仅能搜刮到他工作中常用的图形，还能学到他们在社会上打拼的
实战经验，以使自己少走弯路。
16、问责常理，用独特的思维、眼光看待这个是世界，人家都认可的东西要
无理唱反调，从而发现人家发现不到的图形，创意。
17、多做实际案例，可以先临摹、接着对临摹的东西进行再创作，最后进行
完全创新地创作。
18、用商人的眼光、客户的角度、评委的要求对自己作品进行批判批判再批
判。
19、爱就一个字，爱上广告，爱上图形创意很重要。