CSS+DIV+Javascript前端开发实例之《图片展示》（2）滚动条控制 - 原创教程- 日志信息 - 飘雨之夜

　　所在位置：杂记 >> 原创教程 >> CSS+DIV+Javascript前端开发实例之《图片展示》（2）滚动条控制

CSS+DIV+Javascript前端开发实例之《图片展示》（2）滚动条控制

发表于十四年前(2009-11-17 11:45:54) | 阅读 (2117) | 评论 (0)

演示地址：http://www.pyzy.net/Demo/js_css_div_img_box/scroll.htm

以下为滚动条控制的相关演示代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JS控制滚动条的实例</title>
    <meta name="Keywords" content="飘雨之夜 javascript 控制滚动条 样例 展示 css div 网站建设 脚本学习 网站开发 " />
    <script type="text/javascript">
        if (typeof (pyzy) == 'undefined') {
            var pyzy = {};  //起用封装方法名称，避免脚本命名污染
            pyzy.$ = function(fctId) { return document.getElementById(fctId); };
        }
        pyzy.MinImgsScroll = {   //www.pyzy.net 原创于2009-11-17
            intAllScrollSeep: 0, //步长，单次滚动的幅度
            intScrollCount: 0,   //滚动长度记录 记录按象素滚动的长度与步长对比 用以实现动态滚动效果
            objScroll: null,     //要控制其滚动条的目标对象
            boolLeft: true,      //滚动条类型，默认为左右水平滚动条
            /* Into 索引方法：
            @ (fctBoxObj) 要控制其滚动条的目标对象,必须指定
            @ [fctSeep]   移动步长 按正负数控制左右滚动[不指定则默认为目标对象的宽度(如果是垂直则为其高度)]
            @ [fctTop]    滚动条类型 默认Left为左右水平滚动条,此参数指定任意值则为垂直滚动条
            */
            Into: function(fctObj, fctSeep, fctTop) {
                this.objScroll = fctObj;
                this.boolLeft = (fctTop == null);
                this.intAllScrollSeep = (fctSeep == null ? (this.boolLeft ? this.objScroll.offsetWidth : this.objScroll.offsetHeight) : fctSeep);
                //判断滚动步长值 如果为当前状态的反方向 则将滚动幅度取反
                this.intSeep = ((this.intAllScrollSeep < 0 && this.intSeep > 0) || (this.intAllScrollSeep > 0 && this.intSeep < 0) ? -1 : 1) * this.intSeep;
                this.intScrollCount = 0; //初始化步长执行进度统计为0
                this.AutoSeep();
            },
            intSeep: 5, //自动滚动时的幅度 默认为10象素
            AutoSeep: function() {
                if (Math.abs(this.intAllScrollSeep) > Math.abs(this.intScrollCount)) { //是否已经完成滚动步长
                    this.intScrollCount += this.intSeep;
                    if (this.boolLeft) { this.objScroll.scrollLeft += this.intSeep; }
                    else { this.objScroll.scrollTop += this.intSeep; }
                    window.setTimeout("pyzy.MinImgsScroll.AutoSeep();", 8); //8 毫秒后继续执行滚动,也可以更改此参数控制滚动时的速度
                }
            }
        };
    </script>
    <style type="text/css">
    span{ cursor:pointer; margin:0px 10px; font-weight:bold; font-family:宋体}
    #divInfoBox{overflow:auto; width:400px; height:400px; font-size:12px; line-height:20px; border:solid #999999 1px; background-color:#F7FAFE;}
    </style>
</head>
<body>
    <b>滚动条控制方法演示：</b>  
    <span onclick="pyzy.MinImgsScroll.Into(pyzy.$('divInfoBox'),200);">→</span>
    <span onclick="pyzy.MinImgsScroll.Into(pyzy.$('divInfoBox'),-200);">←</span>
    <span onclick="pyzy.MinImgsScroll.Into(pyzy.$('divInfoBox'),200,1);">↑</span>
    <span onclick="pyzy.MinImgsScroll.Into(pyzy.$('divInfoBox'),-200,1);">↓</span>
    <div id="divInfoBox">
        <img src="http://www.pyzy.net/new_pyzy_images/head_bg.jpg" alt="飘雨之夜 javascript 控制滚动条 样例 展示" />
        本站(www.pyzy.net)承接网站建设、功能扩展，用户体验优化、特效功能实现，ERP分析架构，CRM开发，空间、域名出售等业务；详情联系：Admin@pyzy.net。<br />
        本站(www.pyzy.net)承接网站建设、功能扩展，用户体验优化、特效功能实现，ERP分析架构，CRM开发，空间、域名出售等业务；详情联系：Admin@pyzy.net。<br />
        本站(www.pyzy.net)承接网站建设、功能扩展，用户体验优化、特效功能实现，ERP分析架构，CRM开发，空间、域名出售等业务；详情联系：Admin@pyzy.net。<br />
        本站(www.pyzy.net)承接网站建设、功能扩展，用户体验优化、特效功能实现，ERP分析架构，CRM开发，空间、域名出售等业务；详情联系：Admin@pyzy.net。<br />
        本站(www.pyzy.net)承接网站建设、功能扩展，用户体验优化、特效功能实现，ERP分析架构，CRM开发，空间、域名出售等业务；详情联系：Admin@pyzy.net。<br />
        本站(www.pyzy.net)承接网站建设、功能扩展，用户体验优化、特效功能实现，ERP分析架构，CRM开发，空间、域名出售等业务；详情联系：Admin@pyzy.net。<br />
        本站(www.pyzy.net)承接网站建设、功能扩展，用户体验优化、特效功能实现，ERP分析架构，CRM开发，空间、域名出售等业务；详情联系：Admin@pyzy.net。<br />
        本站(www.pyzy.net)承接网站建设、功能扩展，用户体验优化、特效功能实现，ERP分析架构，CRM开发，空间、域名出售等业务；详情联系：Admin@pyzy.net。<br />
    </div>
</body>
</html>

有任何问题欢迎回复评论进行沟通。

杂记评论(0):

上一篇：CSS+DIV+Javascript前端开发实例之《图片展示》（1）　　下一篇：CSS+DIV+Javascript前端开发实例之《图片展示》（3）成品　　　 <<返回杂记列表