用纯AS写了个滚动条

代码如下:

下面是所有的AS代码:
//%%%%%%%%%%%%MC类自定义方法%%%%%%%%%%%%//
//——————绘图方法————//
//三角型方法
MovieClip.prototype.sanjiaoxing = function(zuobiao1, zuobiao2, zuobiao3, bangzhi, yanse, toumingdu) {
       this.lineStyle(bangzhi, yanse, toumingdu);
       this.moveTo(zuobiao1.x, zuobiao1.y);
       this.lineTo(zuobiao2.x, zuobiao2.y);
       this.lineTo(zuobiao3.x, zuobiao3.y);
       this.lineTo(zuobiao1.x, zuobiao1.y);
};
//宽高矩形法,根据初始点坐标和宽与高确定矩形。x,y为初始点坐标,kuan和gao为矩形的宽和高。
MovieClip.prototype.changkuanjuxing = function(x, y, kuan, gao, bangzhi, yanse, toumingdu) {
       this.lineStyle(bangzhi, yanse, toumingdu);
       this.moveTo(x, y);
       this.lineTo(x+kuan, y);
       this.lineTo(x+kuan, y+gao);
       this.lineTo(x, y+gao);
       this.lineTo(x, y);
};
//中心点矩形法,根据中心点的坐标和宽与高确定矩形。x,y为中心点坐标,kuan,gao为矩形的长和宽。
MovieClip.prototype.zhongxinjuxing = function(x, y, kuan, gao, bangzhi, yanse, toumingdu) {
       this.lineStyle(bangzhi, yanse, toumingdu);
       this.moveTo(x-kuan/2, y+gao/2);
       this.lineTo(x+kuan/2, y+gao/2);
       this.lineTo(x+kuan/2, y-gao/2);
       this.lineTo(x-kuan/2, y-gao/2);
       this.lineTo(x-kuan/2, y+gao/2);
};
//————定位方法————//
MovieClip.prototype.dingwei = function(x, y) {
       this._x = x;
       this._y = y;
};
//————上色方法————//
//定义一个获取颜色值,并把它转化成16进制的函数       
//获取颜色值的后六位,使此方法可以同时满足“#FFFFFF”和“0xFFFFFF”两种格式的颜色值
function jinzhizhuanhuan(yansezhi) {
       var yansezhi = yansezhi.substr(-6, 6);
       return parseInt(yansezhi, 16);
}
Color.prototype.shangse = function(yansezhi) {
       this.setRGB(jinzhizhuanhuan(yansezhi));
};
MovieClip.prototype.shangse = function(yansezhi) {
       var linshi_color = new Color(this);
       linshi_color.shangse(yansezhi);
};
//%%%%%%%%%%%加载XML文档%%%%%%%%%%%%%//
gundongtiao_xml = new XML();
gundongtiao_xml.ignoreWhite = true;
gundongtiao_xml.load("gundongtiao.xml");
gundongtiao_xml.onLoad = function() {
       var jiedianlujing_xml = gundongtiao_xml.firstChild.childNodes;
       //滚动条背景参数
       with (jiedianlujing_xml[0]) {
              var gundongtiaobeijingse = jinzhizhuanhuan(attributes["背景色"]);
              var gundongtiaotoumingdu = attributes["背景透明度"];
              var gundongtiaobiankuangse = jinzhizhuanhuan(attributes["边框色"]);
              var gundongtiaobiankuangtoumingdou = attributes["边框透明度"];
              var gundongtiaobiankuangcuxi = attributes["边框粗细"];
              var gundongtiaokuan = attributes["宽"];
       }
       //方块参数
       with (jiedianlujing_xml[1]) {
              var fangkuaibeijingse = jinzhizhuanhuan(attributes["背景色"]);
              var fangkuaitoumingdu = attributes["背景透明度"];
              var fangkuaibiankuangse = jinzhizhuanhuan(attributes["边框色"]);
              var fangkuaibiankuangtoumingdou = attributes["边框透明度"];
              var fangkuaibiankuangcuxi = attributes["边框粗细"];
       }
       //三角参数
       with (jiedianlujing_xml[2]) {
              var sanjiaoyuanshise = jinzhizhuanhuan(attributes["原始色"]);
              var sanjiaohuodongse = jinzhizhuanhuan(attributes["活动色"]);
              //记录下原始色和活动色,以备在“上”,“下”按钮中使用
              jiluyuanshise = attributes["原始色"];
              jiluhuodongse = attributes["活动色"];
              var sanjiaotoumingdou = attributes["透明度"];
       }
       //滑块参数
       with (jiedianlujing_xml[3]) {
              var huakuaibeijingse = jinzhizhuanhuan(attributes["背景色"]);
              var huakuaitoumingdu = attributes["背景透明度"];
              var huakuaibiankuangse = jinzhizhuanhuan(attributes["边框色"]);
              var huakuaibiankuangtoumingdou = attributes["边框透明度"];
              var huakuaibiankuangcuxi = attributes["边框粗细"];
       }
       //先根据文本域的高确定滚动条的高
       gundongtiaogao = wenben_txt._height;
       ////////////中心法绘制滚动条背景矩形条
       createEmptyMovieClip("gundongtiao_mc", 1000);
       gundongtiao_mc.beginFill(gundongtiaobeijingse, gundongtiaotoumingdu);
       gundongtiao_mc.zhongxinjuxing(0, 0, gundongtiaokuan, gundongtiaogao, gundongtiaobiankuangcuxi, gundongtiaobiankuangse, gundongtiaobiankuangtoumingdou);
       gundongtiao_mc.endFill();
       //根据文本域的位置确定滚动条位置,使其紧贴在文本域的右端
       gundongtiao_mc.dingwei(wenben_txt._x+wenben_txt._width+gundongtiao_mc._width/2, wenben_txt._y+wenben_txt._height/2);
       /////////中心点矩形法绘制滚动条上下按钮
       //////绘制上按钮背景方块
       gundongtiao_mc.createEmptyMovieClip("shangfangkuai_mc", 1);
       gundongtiao_mc.shangfangkuai_mc.beginFill(fangkuaibeijingse, fangkuaitoumingdu);
       gundongtiao_mc.shangfangkuai_mc.zhongxinjuxing(0, 0, gundongtiao_mc._width, gundongtiao_mc._width, fangkuaibiankuangcuxi, fangkuaibiankuangse, fangkuaitoumingdu);
       gundongtiao_mc.shangfangkuai_mc.endFill();
       //定位上按钮背景方块
       gundongtiao_mc.shangfangkuai_mc.dingwei(0, -gundongtiao_mc._height/2+gundongtiao_mc.shangfangkuai_mc._height/2);
       //////绘制上按钮三角形
       gundongtiao_mc.createEmptyMovieClip("shangsanjiao_mc", 2);
       //中心点法绘制三角形
       //首先定义一个因子,此因子等于正三角形中心到各顶点的距离,用来定位三角形各顶点的位置。
       var yinzi = gundongtiaokuan/3;
       var zuobiao1x = -1/2*Math.pow(3, 1/2)*yinzi;
       var zuobiao1y = 1/2*yinzi;
       var zuobiao2x = 1/2*Math.pow(3, 1/2)*yinzi;
       var zuobiao2y = 1/2*yinzi;
       var zuobiao3x = 0;
       var zuobiao3y = -yinzi;
       var zuobiao1 = {x:zuobiao1x, y:zuobiao1y};
       var zuobiao2 = {x:zuobiao2x, y:zuobiao2y};
       var zuobiao3 = {x:zuobiao3x, y:zuobiao3y};
       gundongtiao_mc.shangsanjiao_mc.beginFill(sanjiaoyuanshise, sanjiaotoumingdou);
       gundongtiao_mc.shangsanjiao_mc.sanjiaoxing(zuobiao1, zuobiao2, zuobiao3, 1, 0x000000, 0);
       gundongtiao_mc.shangsanjiao_mc.endFill();
       //定位上三角形
       gundongtiao_mc.shangsanjiao_mc.dingwei(0, -gundongtiao_mc._height/2+gundongtiao_mc.shangfangkuai_mc._height/2);
       //////复制上按钮背景方块和三角形,并定位于下方
       //复制下方块
       gundongtiao_mc.shangfangkuai_mc.duplicateMovieClip("xiafangkuai_mc", 3);
       //定位下按钮背景方块,这里的Y坐标加一,是为了让下方块跟文本框底部对齐!
       gundongtiao_mc.xiafangkuai_mc.dingwei(0, Math.floor(gundongtiao_mc._height/2-gundongtiao_mc.xiafangkuai_mc._height/2)+1);
       //复制下三角形
       gundongtiao_mc.shangsanjiao_mc.duplicateMovieClip("xiasanjiao_mc", 4);
       //旋转180度
       gundongtiao_mc.xiasanjiao_mc._rotation = 180;
       //定位下三角形
       gundongtiao_mc.xiasanjiao_mc.dingwei(0, gundongtiao_mc._height/2-gundongtiao_mc.xiafangkuai_mc._height/2);
       ///////////绘制滑块
       //长宽矩形法绘制滑块矩形
       gundongtiao_mc.createEmptyMovieClip("huakuai_mc", 5);
       gundongtiao_mc.huakuai_mc.beginFill(huakuaibeijingse, huakuaitoumingdu);
       gundongtiao_mc.huakuai_mc.changkuanjuxing(-gundongtiao_mc._width/2, 0, gundongtiao_mc._width, gundongtiao_mc._width, huakuaibiankuangcuxi, huakuaibiankuangse, huakuaibiankuangtoumingdou);
       gundongtiao_mc.huakuai_mc.endFill();
       //---------滚动初始化---------//
       //滑块的初始高度,并记录
       chushigaodu = Math.floor(gundongtiao_mc.xiafangkuai_mc._y-gundongtiao_mc.shangfangkuai_mc._y-gundongtiao_mc.shangfangkuai_mc._height);
       //初始化滑块Y坐标,并记录
       ychushiweizhi = gundongtiao_mc.huakuai_mc._y=Math.round(gundongtiao_mc.shangfangkuai_mc._y+gundongtiao_mc.shangfangkuai_mc._height/2);
       //小滑块不可见
       gundongtiao_mc.huakuai_mc._visible = false;
};
//%%%%%%%%%%%%%%%%滚动代码%%%%%%%%%%%%%%%%%%//
//////////为父剪辑的文字域注册侦听器,以侦听在文字域产生变化时,也就是在文本被载入进来时,执行下面的代码。这样就不用担心代码执行顺序问题!
var zhentingqi = new Object();
wenben_txt.addListener(zhentingqi);
//当文字域载入完成时,为什么触发onScroller事件,而不是onChange事件?
zhentingqi.onScroller = function() {
       trace("-------------------------");
       trace("滚动总行数="+wenben_txt.maxscroll);
       trace("当前行="+wenben_txt.scroll);
       //判断滑块儿是否显示,并根据文本内容多少定义滑块高度
       if (_parent.wenben_txt.maxscroll != 1) {
              gundongtiao_mc.huakuai_mc._visible = true;
              //定义一个高度因子,此因子随加载文本的增多,将无限趋向于1。
              var gaoduyinzi = 1-(wenben_txt.maxscroll-1.5)/wenben_txt.maxscroll;
              //初始化滑块的高度,它的最小高度定义为2象素。
              gaodu = gundongtiao_mc.huakuai_mc._height=Math.floor(chushigaodu*Math.pow(gaoduyinzi, 1/6));
              trace("滑块高="+gaodu);
       }
       //滑块滚动的总象素数
       var zongxiangsu = gundongtiao_mc.xiafangkuai_mc._y-gundongtiao_mc.shangfangkuai_mc._y-gundongtiao_mc.shangfangkuai_mc._height-gundongtiao_mc.huakuai_mc._height;
       //定义平均象素,每一行所包含的像素数,即文本域每滚动一行,滑块需要移动的象素数。              
       var pingjunxiangsu = zongxiangsu/(wenben_txt.maxscroll-1);
       //定义平均行数,每一像素包含的行数,即滑块每移动一象素,文本域在理论上应当滚动的行数(尽管非整数行在视觉上没有反映)。
       var pingjunhangshu = (wenben_txt.maxscroll-1)/Math.floor(zongxiangsu);
       trace("滚动总象素="+zongxiangsu);
       trace("平均象素值="+pingjunxiangsu);
       ///////////定义上按钮
       gundongtiao_mc.shangfangkuai_mc.onRollOver = function() {
              gundongtiao_mc.shangsanjiao_mc.shangse(jiluhuodongse);
              this.onPress = function() {
                     this.onEnterFrame = function() {
                            wenben_txt.scroll--;
                            // 使滑块儿移动到相应的位置。
                            gundongtiao_mc.huakuai_mc._y = ychushiweizhi+pingjunxiangsu*(wenben_txt.scroll-1);
                            trace("滑块Y坐标="+gundongtiao_mc.huakuai_mc._y);
                     };
              };
              this.onRelease = function() {
                     delete this.onEnterFrame;
              };
              this.onRollOut = function() {
                     gundongtiao_mc.shangsanjiao_mc.shangse(jiluyuanshise);
              };
       };
       ////////////定义下按钮
       gundongtiao_mc.xiafangkuai_mc.onRollOver = function() {
              gundongtiao_mc.xiasanjiao_mc.shangse(jiluhuodongse);
              this.onPress = function() {
                     this.onEnterFrame = function() {
                            wenben_txt.scroll++;
                            //使滑块儿移动到相应的位置。       
                            gundongtiao_mc.huakuai_mc._y = ychushiweizhi+pingjunxiangsu*(wenben_txt.scroll-1);
                            trace("滑块Y坐标="+gundongtiao_mc.huakuai_mc._y);
                     };
              };
              this.onRelease = function() {
                     delete this.onEnterFrame;
              };
              this.onRollOut = function() {
                     gundongtiao_mc.xiasanjiao_mc.shangse(jiluyuanshise);
              };
       };
       ///////////换用MOUSE对象的onMouseWheel方法结合侦听器实现滑块随鼠标滚球滚动
       mouseListener = new Object();
       Mouse.addListener(mouseListener);
       mouseListener.onMouseWheel = function(delta) {
              delta = 1;
              gundongtiao_mc.huakuai_mc._y = ychushiweizhi+pingjunxiangsu*(wenben_txt.scroll-1);
       };
       ///////////滑块MC事件处理,当鼠标经过或按下时
       gundongtiao_mc.huakuai_mc.onPress = function() {
              //开始拖动
              this.startDrag(false, this._x, ychushiweizhi, this._x, Math.round(gundongtiao_mc.xiafangkuai_mc._y-gundongtiao_mc.xiafangkuai_mc._height/2-gundongtiao_mc.huakuai_mc._height));
              //使文本随滑块滚动
              this.onEnterFrame = function() {
                     //在滚动过程中即时获得“滑块所处位置”
                     var xianzaiweizhi = Math.floor(this._y);
                     trace("现在位置="+xianzaiweizhi);
                     //使文本随滚动条滚动,这里为什么要加1,可见scroll属性值应该是取正的,也就是说它会删除小数部分,而非采用四舍五入制?
                     wenben_txt.scroll = (xianzaiweizhi-ychushiweizhi)*pingjunhangshu+1;
                     trace("scroll值="+Math.floor((xianzaiweizhi-ychushiweizhi)*pingjunhangshu+1));
                     trace("初始位置="+ychushiweizhi);
                     trace("现在位置="+xianzaiweizhi);
              };
       };
       //滑块MC事件处理,鼠标移出或释放时
       gundongtiao_mc.huakuai_mc.onRollOut = gundongtiao_mc.huakuai_mc.onRelease=function () {
              // “滑块”停止拖动
              this.stopDrag();
              // 停止文本随滑块滚动事件
              delete this.onEnterFrame;
       };
};

(0)

相关推荐

  • 用纯AS写了个滚动条

    复制代码 代码如下: 下面是所有的AS代码: //%%%%%%%%%%%%MC类自定义方法%%%%%%%%%%%%// //------绘图方法----// //三角型方法 MovieClip.prototype.sanjiaoxing = function(zuobiao1, zuobiao2, zuobiao3, bangzhi, yanse, toumingdu) {        this.lineStyle(bangzhi, yanse, toumingdu);        this

  • 分享纯手写漂亮的表单验证

    哈哈 手工馒头好吃,今天小编跟大家分享手工js表单验证代码,感兴趣的朋友快来吧. 因为是自定义样式,所以兼容所有浏览器版本,个人认为非常漂亮:网址wuxi.rongzi.com css <style> /*tooltip*//* CSS属性顺序按照 字母首字母 排列*/ .ui-slider-tooltip{ background:#fa; border:px solid #fa; color:#fff; display: block; text-align: left; padding: p

  • iOS 纯代码写个侧滑栏功能

    代码原理就是使用UIView并对其移动来完成,一个twoView作为侧滑栏,一个oneView作为主界面,需要弹出侧滑栏时对twoView向右移动200,当隐藏侧滑栏时,向左移动200就行了,twoVIew初始的x地址为-200. #import <UIKit/UIKit.h> @interface ViewController : UIViewController<UITableViewDelegate,UITableViewDataSource> @property (stro

  • 纯js写的分页表格数据为json串

    什么也不说了,直接上代码: 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String ba

  • django-初始配置(纯手写)详解

    我们通过django-admin startproject zhuyu命令创建好项目后,在pycharm中打开 我们需要在在该项目中,配置一些相关操作. 1.template(存放模板的文件夹) 如果你是通过pycharm创建项目的话,那么在settings.py里的TEMPLATES(56行)就不需要你去配置了 你是通过命令行方式的话,1.首先在根路径下创建文件夹templates,然后在settings.py中TEMPLATES里配置你刚创建的路径,'DIRS': [os.path.join

  • vue 纯js监听滚动条到底部的实例讲解

    在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议. 1.怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: window.onscroll = function(

  • C语言+win32api写窗体应用程序

    昨晚看了一下win32api编程的知识,我在网上搜索了许多教程,一个美化版的windows编程,代码错漏百出,缺字,翻译难懂生硬,术语不专业,一个windows.c编程,模糊,而且用的是VC++6.0,由于我的电脑装不上vc++6.0,只能用vs2008,许多操作和函数都不太一样了.在网上找到一篇博客园的win32api编程的文章,照抄下来,结果编译下来几十个错误--晕死了. 后来还是参照以下四个步骤,自己查MSDN用C语言写出来了,晕死,英文不好,话说,金山词霸对MSDN的整句翻译很专业啊.

  • 利用div+jquery自定义滚动条样式的2种方法

    最近做项目中有一个模块是用于实时监控的,左边有个菜单栏用于显示所有的设备,那当然是从数据库中动态获取的了,右边是个iframe用于显示监控画面.本来这个功能并不复杂,左边的菜单项是利用dtree.js来实现的,可时当功能实现完成之后,却发现一个问题,就是左边菜单栏中的设备名有的会很长,会超出了div的长度,准确说是左边iframe的宽度和长度不够.那么,这时就必须要利用滚动条了,可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条,但

  • 分享一则JavaScript滚动条插件源码

    这是过年的时候自己写的js滚动条插件的源码,做出的效果自己并不满意,正因为做的并不满意所以回头重新巩固和深入学习js,这个插件有如下几个不太满意的地方: 内容的过度效果,可以参阅QQ客户端最近会话列表里的滚动条,它的滚动非常的平滑,简单的说就是缺少动画过渡效果. 并不算完美的兼容性,在IE6.7下的style仍然有点缺憾. 样式的不完美,例如鼠标悬浮才显示滚动条,移除后隐藏这种效果都没有写. 内部结构的混乱,需要调整内容结构. 滚动条那个图片毕竟不是美工,自己切图切的真是恶心到爆了...囧 总体

  • iOS进阶之xib上控件自动生成纯代码

    最近公司写了一新项目,写完项目总结时发现,大部分时间都浪费在纯代码写一些简单的控件上,用xib布局吧,还怕为后期的维护给自己挖坑,总是纠结到底用纯代码,还是xib呢,纠结来纠结去突然灵感乍现? 为什么不能用xib布局,让它自动生成相应的代码呢,安卓就有这类似的功能- -!!想到就着手开干,写了一个自动生成的工具,废话不多说介绍下我自己写的小工具 因为还不成熟,就先不发布到cocoapods 了,就一个动态库,直接拖进工程即可,有兴趣的小伙伴可以到网盘下载体验一下 demo下载地址 下面介绍下怎么

随机推荐