`
madfroghe
  • 浏览: 122145 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Flash/Flex学习笔记(48):迷你滚动条ScrollBar

阅读更多

先看最终效果:

整个swf最终不到4k,如果用系统的组件List来做的话,最终尺寸会接近30k ! (当然,核心代码是从网上收集到的:))

 

大致原理:

把要显示的对象上面加一层遮罩,然后根据滚动条的位置,上下移动显示对象。

 

源文件:http://cid-2959920b8267aaca.skydrive.live.com/self.aspx/Flash/miniScrollBar.rar

 

分享到:
评论

相关推荐

    flex滚动条三种实现方式

    总结来说,Flex布局中的滚动条实现主要分为默认滚动条和自定义滚动条两种方式。默认滚动条适用于快速开发,而自定义滚动条则能更好地融入到页面设计中,提供更一致的用户体验。需要注意的是,自定义滚动条的兼容性和...

    浏览器滚动条设置 scrollBar

    在前端开发中,浏览器的滚动条(scrollBar)是用户界面不可或缺的一部分,它允许用户查看网页超出可视区域的内容。默认情况下,滚动条的宽度通常为10像素,但有时为了满足设计需求或优化用户体验,开发者可能需要...

    css美化滚动条

    滚动条由三部分组成:轨道(scrollbar)、滑块(thumb)和箭头(buttons),在CSS中分别对应`scrollbar`、`thumb`和`arrow`。在自定义时,主要关注滑块,因为它是用户交互的主要部分。 二、开启滚动条自定义 在CSS...

    好看的滚动条样式

    标题中的“好看的滚动条样式”指的是在网页设计中对浏览器默认滚动条进行美化和定制的一种技术。滚动条作为用户浏览长内容时不可或缺的交互元素,其样式和用户体验往往被开发者忽视,但通过自定义,可以提升网站的...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    在网页设计中,滚动条是不可或缺的元素,尤其是在内容超过屏幕显示范围时。HTML和CSS是构建网页的基础,其中HTML负责结构,CSS负责样式。本文将深入探讨如何使用HTML和CSS来实现滚动条的显示、隐藏以及自定义样式,...

    CSS如何设置滚动条样式?.docx

    在网页设计中,有时我们希望滚动条不仅具备基本的滚动功能,还能与整体设计风格保持一致,这时就需要自定义滚动条的样式。本文将详细介绍如何使用CSS来设置滚动条的样式,主要分为Webkit浏览器(如Chrome、Safari)...

    一款好看的DIV+CSS滚动条

    1. `-webkit-scrollbar`:这个选择器定义了滚动条的整体样式。 2. `-webkit-scrollbar-thumb`:用于定义滚动条滑块部分的样式,可以设置背景颜色、边框和圆角等。 3. `-webkit-scrollbar-track`:定义滚动条轨道的...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    但是,随着 CSS3 的发展,现代浏览器(如 Chrome、Firefox 和 Safari)引入了 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` 等伪元素,使得我们可以自定义滚动条的外观。 以下是一些关键的 CSS 属性,...

    div滚动条样式一览-div+css设计网

    1. `::-webkit-scrollbar`: 用于选取Webkit内核浏览器(如Chrome、Safari)的滚动条整体。 2. `::-webkit-scrollbar-thumb`: 选取滚动条上的滑块部分,也就是用户拖动的部分。 3. `::-webkit-scrollbar-track`: 选取...

    CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解

    在CSS3中,我们可以利用`::webkit-scrollbar`伪元素来为Web浏览器中的滚动条自定义样式,这在设计用户界面时特别有用,可以提升滚动条的美观度和一致性。默认情况下,不同操作系统的滚动条样式各异,而通过CSS3,...

    vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条

    在现代浏览器中,我们可以利用CSS的伪元素`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`来定制滚动条的外观。然而,这种CSS方法并不适用于所有浏览器,尤其是IE。 为了实现跨浏览器的自定义滚动条,我们可以...

    web彩色滚动条(HTML)

    1. **启用自定义滚动条**:在CSS中,我们可以通过`::-webkit-scrollbar`选择器来启用自定义滚动条。这个伪元素表示整个滚动条,而`::-webkit-scrollbar-thumb`则用于选择滚动条上的滑块部分。 ```css body { -...

    jQuery插件:Tiny Scrollbar滚动条插件(滚动条美化、默认滚动条)

    jQuery Tiny Scrollbar是一款用于美化网页滚动条的插件,它为网页中的滚动条提供了一种简洁而优雅的呈现方式,让滚动条与整体网站设计更好地融合。本文将深入探讨Tiny Scrollbar的使用方法、功能特性以及如何在项目...

    滚动条样式 html css

    在 CSS3 中,可以使用伪元素 `::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`、`::-webkit-scrollbar-track` 和 `::-webkit-scrollbar-corner` 来分别定义滚动条的宽度、滚动条滑块(即用户可以拖动的部分)、...

    css 设置overflow:scroll 滚动条的样式

    css 设置overflow:scroll 滚动条的样式 /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1); } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-...

    滚动条效果

    在网页设计中,滚动条是不可或缺的元素,它允许用户浏览超出屏幕范围的内容。默认情况下,浏览器提供的滚动条样式简洁但可能与网站的整体设计风格不协调。为了提升用户体验和界面美观性,我们可以自定义滚动条的样式...

    自制图片代替滚动条代码

    在网页设计中,为了增强用户体验和个性化,有时我们会选择自定义滚动条的样式,将传统的浏览器默认滚动条替换为更具视觉吸引力的图片或图形元素。本文将深入探讨如何使用代码实现这一功能,主要关注HTML、CSS以及...

    自定义滚动条 scroll js滚动条

    "自定义滚动条 scroll js滚动条"就是这样一个主题,它涉及到JavaScript库,如jQuery和jScroll,以及图像资源的使用,来实现滚动条的个性化效果。 首先,jQuery.js是广泛使用的JavaScript库,它简化了DOM操作,事件...

    原生js scrollbars滚动条插件设置浏览器竖直滚动条美化

    为了实现自定义的滚动条,我们需要使用CSS3的伪元素`::webkit-scrollbar`和`::webkit-scrollbar-thumb`来修改滚动条的外观。例如: ```css /* 隐藏默认滚动条 */ body::-webkit-scrollbar { width: 0; } /* ...

    前端自定义滚动条

    在前端开发中,自定义滚动条是一个常见的需求,它能够为网页或应用提供更美观、一致的用户体验。在HTML中,虽然默认的滚动条样式由浏览器控制,但通过CSS我们能够实现自定义滚动条的外观和行为。接下来,我们将深入...

Global site tag (gtag.js) - Google Analytics