分享一则JavaScript滚动条插件源码亚洲城ca88唯一官

时间:2019-05-02 07:17来源:亚洲城ca88唯一官方网站
自动隐藏的Sticky的Header 2015/07/22 · CSS ·Header,Sticky 本文由 伯乐在线 -吴鹏煜翻译,JustinWu校稿。未经许可,禁止转载! 英文出处:osvaldas.info。欢迎加入翻译组。 让StickyHeader自动隐藏是一

自动隐藏的Sticky的Header

2015/07/22 · CSS · Header, Sticky

本文由 伯乐在线 - 吴鹏煜 翻译,JustinWu 校稿。未经许可,禁止转载!
英文出处:osvaldas.info。欢迎加入翻译组。

让Sticky Header自动隐藏是一个一箭双雕的好办法,一来可以在任何页面任何地方都可以访问到导航条,二来可以节省页面空间。我的客户Easy Shine就非常乐意在自己的网站上使用这个技术,这个技术同时也在我的网站上实现了(viewport小于768px时可以看到效果)。

使导航条固定

XHTML

<header class="header" role="banner"> <!-- ... --> </header>

1
2
3
<header class="header" role="banner">
    <!-- ... -->
</header>

CSS

.header { width: 100%; height: 7.5em; position: fixed; z-index: 1000; top: 0; left: 0; }

1
2
3
4
5
6
7
8
9
.header
{
    width: 100%;
    height: 7.5em;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
}

这里有一些浅显易懂的HTML/CSS代码,无论页面滚动到何处,导航条都会固定在页面顶部。现在,我们如何让它自动隐藏?

学习资料

这是过年的时候自己写的js滚动条插件的源码,做出的效果自己并不满意,正因为做的并不满意所以回头重新巩固和深入学习js,这个插件有如下几个不太满意的地方:

自动隐藏导航条

「自动隐藏」意味着当用户在往下滚动页面时导航条将会消失,但当用户有可能需要导航条的时候又能让它出现:用户已经滚动到页面底部,或者开始向上滚动时。导航条的隐藏至少有两种形式:交互式和简单式。

鼠标滚轴事件,考虑到兼容性:

内容的过度效果,可以参阅QQ客户端最近会话列表里的滚动条,它的滚动非常的平滑,简单的说就是缺少动画过渡效果。

交互式

交互式视频演示

交互式的意思是,导航条会直接地,或者立刻响应页面滚动事件,这种形式或许会由于它操作起来的感觉,从用户体验看来是一个良好的小细节。不过它也有不好的一面:这种形式的本质决定了他必须要依赖于JavaScript,我们不能使用JS事件节流阀(在指定的时间周期内只调用某个函数一次)。基本上这就意味着每次滚动事件产生都要产生计算,并且会毫无意义的占用CPU。幸运的是,大多数情况下这只是理论,实际上因为计算量实在太微不足道而通常不会遇到这种问题。

滚动事件产生时,JS算法会计算并修改CSS中的top属性。

JavaScript

//... window.addEventListener( 'scroll', function() { //... if( wScrollCurrent <= 0 ) // 滚动到页面顶部; 元素保持在页面顶部 element.style.top = '0px'; else if( wScrollDiff > 0 ) // 向上滚动事件; 元素插入页面 element.style.top = ( elTop > 0 ? 0 : elTop ) 'px'; else if( wScrollDiff < 0 ) // 向下滚动事件 { if( wScrollCurrent wHeight >= dHeight - elHeight ) // 滚动到页面底部; 元素插入页面 element.style.top = ( ( elTop = wScrollCurrent wHeight - dHeight ) < 0 ? elTop : 0 ) 'px'; else // 向下滚动事件; 元素消失 element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) 'px'; } //... }); //...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//...
window.addEventListener( 'scroll', function()
{
    //...
    if( wScrollCurrent <= 0 ) // 滚动到页面顶部; 元素保持在页面顶部
        element.style.top = '0px';
 
    else if( wScrollDiff > 0 ) // 向上滚动事件; 元素插入页面
        element.style.top = ( elTop > 0 ? 0 : elTop ) 'px';
 
    else if( wScrollDiff < 0 ) // 向下滚动事件
    {
        if( wScrollCurrent wHeight >= dHeight - elHeight )  // 滚动到页面底部; 元素插入页面
            element.style.top = ( ( elTop = wScrollCurrent wHeight - dHeight ) < 0 ? elTop : 0 ) 'px';
 
        else // 向下滚动事件; 元素消失
            element.style.top = ( Math.abs( elTop ) > elHeight ? -elHeight : elTop ) 'px';
    }
    //...
});
//...

firefox

使用DOMMouseScroll,但该事件需要使用addEventListener()来绑定;

ff中使用事件对象中的detail属性来获取滚轮滚动的值,向上滚是负值,向下滚是正值;

为了统一同一滚动方向的值的正负一致,执行取反操作;

栗子:

document.addEventListener('DOMMouseScroll',function(e) {

var oEvent = e || event;

alert(e.detail);

},false);

并不算完美的兼容性,在IE6、7下的style仍然有点缺憾。

简单式

简单式视频演示

这种形式,取决于JavaScript节流阀的周期设置,或许不会有太多“得到回应”的感觉。不管怎么说,这种形式对CPU会比较友好,加之动画是基于CSS来实现的,这意味着我们的想象力可以尽情发挥。

和之前交互式不同的是,这里的JavaScript并不直接改变CSS的属性,而是为元素插入或移除header--hidden这个CSS类

JavaScript

//... window.addEventListener( 'scroll', throttle( throttleTimeout, function() { //... if( wScrollCurrent <= 0 ) // 滚动到页面顶部; 元素保持在页面顶部 removeElementClass( element, elClassHidden ); else if( wScrollDiff > 0 && hasElementClass( element, elClassHidden ) ) // 向上滚动事件; 元素插入页面 removeElementClass( element, elClassHidden ); else if( wScrollDiff < 0 ) // 向下滚动事件 { if( wScrollCurrent wHeight >= dHeight && hasElementClass( element, elClassHidden ) ) // 滚动到页面底部; 元素插入页面 removeElementClass( element, elClassHidden ); else // 向下滚动事件; 元素消失 addElementClass( element, elClassHidden ); } //... })); //...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//...
window.addEventListener( 'scroll', throttle( throttleTimeout, function()
{
    //...
    if( wScrollCurrent <= 0 ) // 滚动到页面顶部; 元素保持在页面顶部
        removeElementClass( element, elClassHidden );
 
    else if( wScrollDiff > 0 && hasElementClass( element, elClassHidden ) ) // 向上滚动事件; 元素插入页面
        removeElementClass( element, elClassHidden );
 
    else if( wScrollDiff < 0 ) // 向下滚动事件
    {
        if( wScrollCurrent wHeight >= dHeight && hasElementClass( element, elClassHidden ) ) // 滚动到页面底部; 元素插入页面
            removeElementClass( element, elClassHidden );
 
        else // 向下滚动事件; 元素消失
            addElementClass( element, elClassHidden );
    }
    //...
}));
//...

在CSS中我们这样定义:

JavaScript

.header { -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 ); transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 ); -webkit-transition-property: -webkit-transform; transition-property: transform; } .header--hidden { -webkit-transform: translateY( -100% ); -ms-transform: translateY( -100% ); transform: translateY( -100% ); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.header
{
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
 
    -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
    transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
 
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
}
 
.header--hidden
{
    -webkit-transform: translateY( -100% );
    -ms-transform: translateY( -100% );
    transform: translateY( -100% );
}

chrome,firefox,safair,ie,opera等

使用mousewheel;

这些浏览器中使用事件对象的wheelDelta属性来获取滚轮滚动的值,上滚为正,下滚为负;

栗子:

document.onmousewheel = function(e) {

var oEvent = e || event;

console.log(e.wheelDelta);

};

案例--改变元素的尺寸

HTML

<div id="box"></div>

CSS

#box {width: 200px;height: 300px; background: orange;}

JS

window.onload=function() {

var oBox =document.getElementById('box');

//判断方向

var down =true;

if(window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {

/*火狐*/

oBox.addEventListener("DOMMouseScroll",function(e) {

varoEvent = e ||event;

/*统一滚动值,同一方向值要么为正值,要么为负值*/

if(-oEvent.detail<0) {

//向下

down =true;

}else{

//向上

down =false;

}

changeSize(down);

},false)

}else{

oBox.onmousewheel=function(e) {

varoEvent = e ||event;

if(e.wheelDelta<0) {

down =true;

}else{

down =false;

}

changeSize(down);

};

}

function changeSize(down) {

if(down) {

oBox.style.height= oBox.offsetHeight 10 'px';

}

else{

oBox.style.height= oBox.offsetHeight-10 'px';

}

}

};

样式的不完美,例如鼠标悬浮才显示滚动条,移除后隐藏这种效果都没有写。

导航条的额外的一些状态

视频演示

有些时候,尤其在主页中时,在页面顶部使用更大的导航条有助于获取访问者的注意,我们需要一个额外的CSS类来控制导航条高度:

CSS

.header--narrow { height: 5em; }

1
2
3
4
.header--narrow
{
    height: 5em;
}

然而这个新定义的CSS类是由JavaScript来控制如何使用的——在页面开始滚动时添加,并在滚动到页面顶部时移除。

JavaScript

// ... window.addEventListener( 'scroll', throttle( throttleTimeout, function() { // ... if( wScrollCurrent > elNarrowOffset ) // toggles "narrow" classname { if( !hasElementClass( element, elClassNarrow ) ) addElementClass( element, elClassNarrow ); } else removeElementClass( element, elClassNarrow ); // ... })); // ...

1
2
3
4
5
6
7
8
9
10
11
12
13
// ...
window.addEventListener( 'scroll', throttle( throttleTimeout, function()
{
    // ...
    if( wScrollCurrent > elNarrowOffset ) // toggles "narrow" classname
    {
        if( !hasElementClass( element, elClassNarrow ) )
            addElementClass( element, elClassNarrow );
    }
    else removeElementClass( element, elClassNarrow );
    // ...
}));
// ...

鼠标滚抽滚动事件的封装

/*

* 鼠标滚轴滚动事件封装

* @param target:添加事件的对象

* @param fn: 鼠标滚轴滚动后需要实现的功能函数

*/

function wheelFn(target,fn) {

/*

* 判别方向

* @param {e} 事件对象

* true: 向下滚动

*/

function direction(e) {

var oEvent = e ||event;

if(e.wheelDelta) {

if(e.wheelDelta<0) {

down =true;

}else{

down =false;

}

}else{

if(- e.detail<0) {

down =true;

}else{

down =false;

}

}

fn(down);

/* 阻止系统的默认事件 */

oEvent.preventDefault&& oEvent.preventDefault();

return false;

}

/*

* 事件绑定

* @param target: 绑定事件的对象

* @param type: 绑定的事件类型

* @param fn

*/

function bandEvent(target,type,fn) {

if(target.attachEvent) {

target.attachEvent('on' type,fn);

}else{

target.addEventListener(type,fn,false);

}

}

/*

* 规定鼠标滚抽滚动的方向

*/

var down =true;

/* 浏览器兼容的处理 */

if(window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {

bandEvent(target,"DOMMouseScroll",direction);

}else{

bandEvent(target,'mousewheel',function(e) {

direction(e);

});

}

}

内部结构的混乱,需要调整内容结构。

示范

这个Demo的源代码中包括了纯JavaScript(兼容IE9 )和依赖于jQuery的两种实现方式,尽管去研究去使用吧!

Demo地址

1 赞 收藏 评论

封装使用案例--鼠标滚轴事件 自定义滚动条拖拽效果

HTML

<div id="wrap">

<div id="list">

<ul><li><a href="javascript:;"><img src="...jpg"></a></li><li><a href="javascript:;"><img src="...jpg"></a></li></ul>

</div><div id="scroll"><div id="bar"></div></div>

</div>

CSS

div,ul,li,a,img {padding: 0;margin: 0;list-style: none;text-decoration: none;}

#wrap {overflow: hidden;width: 600px;height: 550px;margin: 50px auto;}

#list {position: relative;width: 600px;height: 540px;overflow: hidden;}

#list ul {position: absolute;top: 0;left: 0;overflow: hidden;width: 2100px;height: 540px;}

#list li {float: left;}

#list img {display: inline-block;*display: inline;width: 350px;height: 540px;margin-right: 20px;}

#scroll {position: relative;width: 600px;height:10px;background-color: #ccc;border-radius: 5px;}

#bar {position: absolute;top: 0;left: 0;width: 100px;height: 10px;background: orangered;border-radius: 5px;}

JS

window.onload = function() {

var oWrap = document.getElementById('wrap');

var oUL = document.getElementsByTagName('ul')[0];

var oScroll = document.getElementById('scroll');

var oBar = document.getElementById('bar');

var l = 0;

//用于方向的规定

var down = true;

/* 图片总移动范围 */

var moveAreaImg = oUL.offsetWidth - oWrap.offsetWidth;

/* 滚动条总移动的范围 */

var moveAreaBar = oScroll.offsetWidth - oBar.offsetWidth;

//1.鼠标按下时

oBar.onmousedown = function(e) {

var oEvent = e || event;

//2.获取元素的初始位置

var x = oEvent.clientX - oBar.offsetLeft;

//3.鼠标按下并移动时,元素随之移动

document.onmousemove = function(ev) {

var oEv = ev || event;

//4.偏移距离

l = oEv.clientX - x;

changePosition(l);

};

//7.鼠标弹起时结束移动

document.onmouseup = function() {

document.onmousemove = null;

document.onmouseup = null;

oBar.releaseCapture && oBar.releaseCapture();

};

//8.阻止默认事件

oBar.setCapture && oBar.setCapture();

return false;

};

/*

* 移动位置

* @param pos偏移距离

*/

function changePosition(pos) {

//5.限定移动区域

if (l <= 0) {

l = 0;

}

if (l >= (oScroll.offsetWidth - oBar.offsetWidth)) {

l = oScroll.offsetWidth - oBar.offsetWidth;

}

//比例

var scale = l / moveAreaBar;

//6.目标元素的移动

oBar.style.left = l 'px';

//图片列表偏移距离:图片列表总移动范围*移动的比例

oUL.style.left = -(moveAreaImg*scale) 'px';

}

/*

* 鼠标滚轴滚动事件封装

* @param target:添加事件的对象

* @param fn: 鼠标滚轴滚动后需要实现的功能函数

*

*/

function wheelFn(target,fn) {

/*

* 事件绑定

* @param target: 绑定事件的对象

* @param type: 绑定的事件类型

* @param fn

*/

function bandEvent(target,type,fn) {

if (target.attachEvent) {

target.attachEvent('on' type, fn);

} else {

target.addEventListener(type, fn, false);

}

}

/*

* 判别方向

* @param {e} 事件对象

* true: 向下滚动

*/

function direction(e) {

var oEvent = e || event;

if (oEvent.wheelDelta) {

if (oEvent.wheelDelta < 0) {

//向下滚动

down = true;

} else {

//向上滚动

down = false;

}

} else {

if (-oEvent.detail < 0) {

down = true;

} else {

down = false;

}

}

fn(down);

/* 阻止系统的默认事件 */

oEvent.preventDefault && oEvent.preventDefault();

return false;

}

/* 鼠标滚轴事件的兼容写法 */

if (window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {

bandEvent(target, "DOMMouseScroll", direction);

} else {

bandEvent(target, 'mousewheel', function (e) {

direction(e);

});

}

}

/*

*鼠标滚动时,滚动条也发生移动

*/

wheelFn(oWrap,function(down) {

if (down) {

//向下滚动的速度

l = 22;

//发生偏移

changePosition(l);

} else {

l -= 22;

changePosition(l);

}

});

};

-

亚洲城ca88唯一官方网站 1

滚轴事件案例

滚动条那个图片毕竟不是美工,自己切图切的真是恶心到爆了...囧

关于作者:吴鹏煜

亚洲城ca88唯一官方网站 2

童心、勇气、创意和传奇。(新浪微博:@Nappp) 个人主页 · 我的文章 · 13

亚洲城ca88唯一官方网站 3

封装案例--改变背景颜色

亚洲城ca88唯一官方网站 4

鼠标滚轴案例

wheelFn(oBox,changeBg);

var r =parseInt(Math.random()*255),

g =parseInt(Math.random()*255),

b =parseInt(Math.random()*255),

function changeBg(down) {

if(down) {

//oBox.style.height = oBox.offsetHeight 10 'px';

oBox.style.backgroundColor='rgb(' r ',' g ',' b ')';

r ,g ,b ;

if(r <0|| g <0||b <0) {return false;}

}else{

//oBox.style.height = oBox.offsetHeight - 10 'px';

oBox.style.backgroundColor='rgb(' r ',' g ',' b ')';

r--,g--,b--;

}

}

总体来说还是可以看的,还是缺少一个动画。在写这个插件意识到自己的插件用到了一些比较基础的函数,于是想到把这些函数应该封装起来,最近仍然在深入学习js,把手头上这本书看完就应该着手写这个基础函数的插件了,当然,动画引擎必不可少。话不多说,源码在此(注意:本插件完整版的是有图片的,请在文末附件中下载完整的插件):

CSS

复制代码 代码如下:

.lf_Scroll, .lf_Scroll li { padding: 0; margin: 0; list-style: none; font: 14px/24px "Helvetica Neue" ,Helvetica,Arial, 'Microsoft Yahei' ,sans-serif; outline: none; }
.lf_Scroll { cursor: pointer; width: 10px; position: absolute; right: 0; top: 0; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
.lf_ScrollFocus { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
.lfs_Top, .lfs_Center, .lfs_Bottom { background: url('ScrollBar.gif'); width: 10px; height: 10px; }
.lfs_Top { background-position: 1px 0px; }
.lfs_Center { background-position: center 0; height: 100px; }
.lfs_Bottom { background-position: -22px 0; }
/*Developers config*/
.rollDiv { height: 100%; width: 100%; overflow: hidden; position: relative; }

JavaScript

复制代码 代码如下:

/*
* This plugin is defined on the simulation Webpage scroll bar, please insert after binding for DOM events
*
* Comment version: 1.0.0
* Author:linkfly
* Sina:为你聚焦半世纪 |  cnblogs: | Email:linkFly6@live.com
* date:2014-02-05 02:38:35
*
*
* Dual licensed under the MIT and GPL licenses:
*
*
*
*/
(function (window, undefined) {
    //配置参数信息
    var config = {
        auto: true,
        height: 'auto',
        width: 'auto'
    };
    var linkFlyScroll = function (dom, options) {
        /// <summary>
        ///     1: 生成模拟滚动条对象,【请在本对象工作之后再为您指定的对象绑定事件,否则您之前绑定的事件将不会进行工作】
        ///         1.1 - linkFlyScroll(dom) - 在指定的dom上生成滚动条对象
        ///         1.2 - linkFlyScroll(dom,options) - 生成滚动条对象,同时提供一系列的参数允许您自定义配置该对象的工作模型
        /// </summary>
        /// <param name="dom" type="String Or element">
        ///     传入js的dom对象,或者为string类型的该对象ID
        /// </param>
        /// <param name="options" type="Json">
        ///     自定义配置该对象的工作模型,有如下选项:
        ///       [可选]auto(Boolean):当内容并未达到容器的高度的时候,是否自动隐藏滚动条,默认为true(是)
        ///       [可选]height(Int Or String):默认单位为px,可以为int和String.值为auto则默认采用css的高度
        ///       [可选]width(Int Or String):默认单位为px,可以为int和String.值为auto则默认采用css的宽度
        /// </param>
        /// <returns type="linkFlyScroll" />
        if (typeof (dom) === 'string') {
            dom = document.getElementById(dom);
        }
        //没有指定dom和没有查找到有效的dom
        //linkFlyScroll("")、 linkFlyScroll(null)、linkFlyScroll(undefined)
        if (!dom || !dom.nodeType)
            return this;
        //创建容器对象
        var scrollObj = document.createElement('div');
        //深度克隆内容对象,并未包含事件,所以需要等到linkFlyScroll对象工作完毕后才可以为该dom对象绑定事件
        var cloneObj = dom.cloneNode(true);
        scrollObj.className = 'rollDiv';
        scrollObj.appendChild(cloneObj);
        //替换页面上当前对象
        dom.parentNode.replaceChild(scrollObj, dom);
        return new linkFlyScroll.prototype.init(scrollObj, options ? options : {});
    };
    linkFlyScroll.prototype.init = function (dom, options) {
        /// <summary>
        ///     1: 本对象才是真正意义上工作的对象,特殊的工作方式是因为可能存在linkFlyScroll的静态调用和实例化调用
        ///         1.1 - init(dom,options) - 在指定的dom上生成滚动条对象
        /// </summary>
        /// <param name="dom" type="element">
        ///     dom对象
        /// </param>
        /// <param name="options" type="Json">
        ///     自定义配置该对象的工作模型,有如下选项:
        ///       [可选]auto(Boolean):当内容并未达到容器的高度的时候,是否自动隐藏滚动条,默认为true(是)
        ///       [可选]height(Int Or String):默认单位为px,可以为int和String.值为auto则默认采用css的高度
        ///       [可选]width(Int Or String):默认单位为px,可以为int和String.值为auto则默认采用css的宽度
        /// </param>
        /// <returns type="linkFlyScroll" />
        /*
        * 本对象包含以下属性:
        * isDrag:是否正在拖拽滚动条
        * startTop:(工作中)滚动条开始滚动位置
        * endTop:(工作中)滚动条结束滚动位置
        * topLimit:滚动条顶部极限位置
        * bottomLimit:滚动条底部极限位置
        * context:内容Dom
        * scrollRadix:滚动基数
        * target:容器Dom
        */
        //当前this对象,为防止this指针在环境中会经常改变(例如绑定事件的时候),所以将当前对象保存起来
        var currScroll = this;
        //DOMElement
        if (dom.nodeType) {
            //保存容器和内容DOM
            currScroll.target = dom;
            currScroll.context = dom.firstChild;
            //合并配置参数
            currScroll.options = tool.extend(config, options);
            if (currScroll.options.width !== 'auto') {
                dom.style.width = tool.convertValue(currScroll.options.width);
            }
            if (currScroll.options.height !== 'auto') {
                dom.style.height = tool.convertValue(currScroll.options.height);
            }
            //查找到有效的dom
            while (currScroll.context.nodeType != 1) {
                currScroll.context = currScroll.context.nextSibling;
            }
            //创建滚动条dom
            currScroll.scrollUl = document.createElement('ul');
            currScroll.scrollUl.className = 'lf_Scroll';
            currScroll.scrollUl.appendChild(tool.setClass('li', 'lfs_Top'));
            currScroll.scrollUl.appendChild(tool.setClass('li', 'lfs_Center'));
            currScroll.scrollUl.appendChild(tool.setClass('li', 'lfs_Bottom'));
            currScroll.context.style.position = 'relative';
            //先呈现在页面上才可以读取位置数据
            dom.appendChild(currScroll.scrollUl);
            this.change();
            tool.addScrollEvent(currScroll.context, function (e) {
                //绑定鼠标滚轮事件,3px滚动单位
                if (e.wheel > 0) {//滚轮向上滚动
                    var currTop = currScroll.endTop -= 3;
                    currScroll.scrollEvent.call(currScroll, currTop);
                } else {//滚轮向下滚动
                    var currTop = currScroll.endTop = 3;
                    currScroll.scrollEvent.call(currScroll, currTop);
                }
            });
            //需要处理禁止文字在拖动的时候被选中  TODO
            //鼠标点下事件,需要判断是否是左键点击,目前右键也会实现滚动  TODO
            tool.addEvent(currScroll.scrollUl, 'mousedown', function (e) {
                mouseDown.call(currScroll, e);
            });
            //追加事件,为了更好的用户体验在body上实现监听
            tool.addEvent(document.body, 'mousemove', function (e) {
                if (currScroll.isDrag) {
                    //获取当前鼠标位置
                    var position = tool.getMousePos(e);
                    //当前滚动条top位置
                    var currTop = (currScroll.endTop position.y - currScroll.startTop);
                    //call是为了让this指针准确的指向本工作对象
                    currScroll.scrollEvent.call(currScroll, currTop);
                }
                return false;
            });
            //追加鼠标释放事件,为了准确的捕捉到释放事件在body上监听
            tool.addEvent(document.body, 'mouseup', function () {
                mouseUp.call(currScroll, []);
            });
            var mouseDown = function (e) {
                /// <summary>
                ///     1: 鼠标按下事件
                ///         1.1 - mouseDown(e) - 滚动条中鼠标按下滚动条事件
                /// </summary>
                /// <param name="e" type="Event">
                ///     Event对象
                /// </param>
                /// <returns type="linkFlyScroll" />
                currScroll.isDrag = true;
                //获取当前鼠标y位置
                currScroll.startTop = tool.getMousePos(e).y;
                tool.addClass(currScroll.scrollUl, 'lf_ScrollFocus');
                return false;
            };
            var mouseUp = function () {
                /// <summary>
                ///     1: 鼠标释放事件
                ///         1.1 - mouseUp() - 滚动条中鼠标释放滚动条事件
                /// </summary>
                /// <returns type="linkFlyScroll" />
                currScroll.isDrag = false;
                currScroll.endTop = currScroll.scrollUl.style.top ? parseInt(currScroll.scrollUl.style.top) : 0;
                tool.removeClass(currScroll.scrollUl, 'lf_ScrollFocus');
                return false;
            };
            currScroll.scrollEvent = function (currTop) {
                /// <summary>
                ///     1: 滚动事件(核心),传入需要滚动的坐标即可(滚动条top)
                ///         1.1 - scrollEvent(currTop) - 核心滚动事件
                /// </summary>
                /// <param name="currTop" type="Int">
                ///     滚动条顶部距离上一层容器的top值
                /// </param>
                /// <returns type="void" />
                if (currTop <= currScroll.topLimit || currTop < 0) {//顶部极限
                    currTop = currScroll.topLimit;
                } else if (currTop >= currScroll.bottomLimit) {//底部极限
                    currTop = currScroll.bottomLimit;
                }
                //滚动条偏移效果
                currScroll.scrollUl.style.top = currTop 'px';
                var tempTop = parseInt(currScroll.context.style.top ? currScroll.context.style.top : 0);
                //debug code
                //                document.getElementById('postionInfo').innerHTML = 'currTop:' currTop

  • ' 滚动基数:' currScroll.scrollRadix ' bottomLimit:' currScroll.bottomLimit ' endTop:' currScroll.endTop ' startTop:' currScroll.startTop " Y:" currTop " offsetTop:" currScroll.scrollUl.offsetTop " compute:" (currTop * currScroll.scrollRadix * -1) 'px';
                    //text code
                    //内容滚动:当前滚动条top*基数取负数
                    currScroll.context.style.top = currTop * currScroll.scrollRadix * -1 'px';
                };
                return currScroll;
            };
        };
        linkFlyScroll.prototype.init.prototype.change = function () {
            /// <summary>
            ///     1: 滚动条内容改变函数
            ///         1.1 - change() - 本函数代表刷新本滚动条对象的数据,在某些情况下,内容的数据是一直在变化的,可以调用本函数对当前滚动条对象刷新数据
            /// </summary>
            /// <returns type="linkFlyScroll" />
            /*
            * linkFlyScroll包含的属性主要在本函数中初始化或重新定义:
            * isDrag:是否正在拖拽滚动条
            * startTop:(工作中)滚动条开始滚动位置
            * endTop:(工作中)滚动条结束滚动位置
            * topLimit:滚动条顶部极限位置
            * bottomLimit:滚动条底部极限位置
            * context:内容Dom
            * scrollRadix:滚动基数
            * target:容器Dom
            */
            //重置或读取一系列数据
            var currScroll = this;
            currScroll.isDrag = false,
            currScroll.startTop = 0,
            currScroll.endTop = (currScroll.scrollUl.style.top ? parseInt(currScroll.scrollUl.style.top) : 0),
            currScroll.topLimit = currScroll.target.scrollTop,
            currScroll.bottomLimit = currScroll.target.clientHeight,
            currScroll.scrollRadix = 10;
            //得出滚动条的高度:内容高度*(容器高度/内容高度=容器占内容百分比)
            var scrollPx = currScroll.target.clientHeight * (currScroll.target.clientHeight / currScroll.context.offsetHeight);
            //滚动条高度
            currScroll.scrollUl.childNodes[1].style.height = scrollPx 'px';
            if (currScroll.context.clientHeight <= currScroll.target.clientHeight && currScroll.options.auto) {
                currScroll.scrollUl.style.display = 'none';
            } else {
                currScroll.scrollUl.style.display = 'block';
                //当滚动条显示,修正最大位置数据
                currScroll.bottomLimit -= currScroll.scrollUl.offsetHeight;
            }
            //设置滚动条滚动基数(滚动条没滚动1px内容滚动像素):(内容高度-容器高度[因为当前容器已经显示了一屏])/滚动条top(滚动条空白可滚动高度)
            currScroll.scrollRadix = (currScroll.context.offsetHeight - currScroll.target.clientHeight) / currScroll.bottomLimit;
            return currScroll;
        };
        linkFlyScroll.prototype.init.prototype.roll = function (value) {
            /// <summary>
            ///     1: 滚动条偏移方法
            ///         1.1 - roll(value) - 滚动条滚动方法
            /// </summary>
            /// <param name="value" type="Int">
            ///     滚动条目标滚动的百分比
            /// </param>
            /// <returns type="linkFlyScroll" />
            var currScroll = this;
            if (typeof (value) !== 'number') {
                return currScroll;
            }
            var currTop = (currScroll.bottomLimit - currScroll.topLimit) * value / 100;
            currScroll.scrollEvent(currTop);
            currScroll.endTop = currTop;
            return currScroll;
        };
        /*
        * 工具类
        */
        var tool = {
            setClass: function (element, className) {
                /// <summary>
                ///     1: 设置元素节点的class属性
                ///         1.1 - setClass(element,className) - 设置元素节点的class属性,如没有该节点则创建该节点,并返回修改后的节点对象
                /// </summary>
                /// <param name="element" type="Element Or String">
                ///     传入String则创建该节点,否则修改该节点
                /// </param>
                /// <param name="className" type="String">
                ///     Class Name
                /// </param>
                /// <returns type="Element" />
                if (typeof element === 'string') {
                    element = document.createElement(element);
                }
                element.className = className;
                return element;
            },
            hasClass: function (element, className) {
                /// <summary>
                ///     1: 判断元素是否有class
                ///         1.1 - hasClass(element,className) - 判断元素是否有class,在业务中异常(基本没有该情况的发生)和有该class返回true,否则返回false
                /// </summary>
                /// <param name="element" type="Element Or String">
                ///     节点对象
                /// </param>
                /// <param name="className" type="String">
                ///     Class Name
                /// </param>
                /// <returns type="Element" />
                if (!element || element.nodeType !== 1)//让异常通过,外面不进行处理
                    return true;
                var elementClassName = element.className;
                if (elementClassName.length < 1) {
                    return false;
                }
                if (elementClassName == className || elementClassName.match(new RegExp("(^|\s)" className "(\s|$)"))) {
                    return true;
                }
                return false;
            },
            addClass: function (element, className) {
                /// <summary>
                ///     1: 为元素【追加】class
                ///         1.1 - addClass(element,className) - 为元素【追加】class,并返回修改后的class
                /// </summary>
                /// <param name="element" type="Element Or String">
                ///     节点对象
                /// </param>
                /// <param name="className" type="String">
                ///     Class Name
                /// </param>
                /// <returns type="Element" />
                if (!tool.hasClass(element, className)) {
                    if (element.className.length < 1) {
                        element.className = className;
                    } else {
                        element.className = ' ' className;
                    }
                }
                return element;
            },
            removeClass: function (element, className) {
                /// <summary>
                ///     1: 为元素移除class
                ///         1.1 - addClass(element,className) - 为元素移除class,并返回修改后的class
                /// </summary>
                /// <param name="element" type="Element Or String">
                ///     节点对象
                /// </param>
                /// <param name="className" type="String">
                ///     Class Name
                /// </param>
                /// <returns type="Element" />
                if (tool.hasClass(element, className)) {
                    var reg = new RegExp("(^|\s)" className "(\s|$)");
                    element.className = element.className.replace(reg, '');
                }
                return element;
            },
            css: function (element, key) {
                /// <summary>
                ///     1: 获取元素css指定的属性值
                ///         1.1 - css(element,className) - 获取元素css指定的属性值
                /// </summary>
                /// <param name="element" type="Element Or String">
                ///     节点对象
                /// </param>
                /// <param name="key" type="String">
                ///     要获取的css属性
                /// </param>
                /// <returns type="String" />
                return element.currentStyle ? element.currentStyle[key] : document.defaultView.getComputedStyle(element, false)[key];
            },
            addEvent: function (element, type, fn) {
                /// <summary>
                ///     1: 为元素追加事件
                ///         1.1 - css(element, type, fn) - 为元素追加事件,函数中this指向事件源
                /// </summary>
                /// <param name="element" type="Element Or String">
                ///     节点对象
                /// </param>
                /// <param name="type" type="String">
                ///     追加的事件名,不含字符on
                /// </param>
                /// <param name="fn" type="Function">
                ///     事件对象
                /// </param>
                /// <returns type="void" />
                if (element.attachEvent) {
                    element['e' type fn] = fn;
                    element[type fn] = function () { element['e' type
  • fn](window.event); }
                    element.attachEvent('on' type, element[type fn]);
                } else if (element.addEventListener) {
                    element.addEventListener(type, fn, false);
                }
            },
            //        removeEvent: function (element, type, fn) {
            //            /// <summary>
            //            ///     1: 为元素删除事件,本函数并未用到
            //            ///         1.1 - removeEvent(element, type, fn) - 为元素删除事件
            //            /// </summary>
            //            /// <param name="element" type="Element Or String">
            //            ///     节点对象
            //            /// </param>
            //            /// <param name="type" type="String">
            //            ///     删除的事件名
            //            /// </param>
            //            /// <param name="key" type="String">
            //            ///     删除的事件的函数名
            //            /// </param>
            //            /// <returns type="void" />
            //            if (element.detachEvent) {
            //                element.detachEvent('on' type, element[type
  • fn]);
            //                element[type fn] = null;
            //            } else if (element.removeEventListener) {
            //                element.removeEventListener(type, fn, false);
            //            }
            //        },
            addScrollEvent: function (element, fn) {
                /// <summary>
                ///     1: 追加ScrollEvent事件
                ///         1.1 - addScrollEvent(element,fn) - 在元素上追加ScrollEvent事件(特殊事件,在元素上鼠标滚轮滚动事件)
                /// </summary>
                /// <param name="element" type="Element Or String">
                ///     元素节点
                /// </param>
                /// <param name="fn" type="Function">
                ///     事件方法
                /// </param>
                /// <returns type="void" />
                var bindScrollFn = function (e) {
                    e = e || window.event;
                    //判断滚轮滚动方向:Firefox和其他浏览器不同
                    e.wheel = (e.wheelDelta ? e.wheelDelta : -e.detail) > 0 ? 1 : -1; // 通过事件判断鼠标滚轮反向,1是向上,-1是向下
                    //阻止浏览器默认行为
                    if (e.preventDefault) { //ff
                        e.preventDefault();
                    } else {
                        e.returnValue = false; //ie
                    }
                    fn.call(element, e);
                }
                if (document.addEventListener) {
                    //ff
                    element.addEventListener('DOMMouseScroll', bindScrollFn, false);
                    //w3c
                    element.addEventListener('mousewheel', bindScrollFn, false);
                } else//ie
                {
                    element.attachEvent('onmousewheel', bindScrollFn);
                }
            },
            getEvent: function () {
                /// <summary>
                ///     1: 获取Event对象
                ///         1.1 - getEvent() - 在无参数的情况下获取Event对象,同时兼容性处理IE和FF
                /// </summary>
                /// <returns type="Event" />
                if (document.all) {
                    return window.event;
                }
                func = getEvent.caller;
                while (func != null) {
                    var arg0 = func.arguments[0];
                    if (arg0) {
                        if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
                            return arg0;
                        }
                    }
                    func = func.caller;
                }
                return null;
            },
            getMousePos: function (ev) {
                /// <summary>
                ///     1: 获取当前鼠标坐标
                ///         1.1 - getMousePos(ev) - 获取当前鼠标坐标,兼容性处理,返回的对象格式:{ x:鼠标x坐标 , y:鼠标y坐标 }
                /// </summary>
                /// <param name="ev" type="Event">
                ///     Event事件对象
                /// </param>
                /// <returns type="Json" />
                if (!ev) {
                    ev = currScroll.getEvent();
                }
                if (ev.pageX || ev.pageY) {
                    return {
                        x: ev.pageX,
                        y: ev.pageY
                    };
                }
                if (document.documentElement && document.documentElement.scrollTop) {
                    return {
                        x: ev.clientX document.documentElement.scrollLeft
  • document.documentElement.clientLeft,
                        y: ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop
                    };
                }
                else if (document.body) {
                    return {
                        x: ev.clientX document.body.scrollLeft - document.body.clientLeft,
                        y: ev.clientY document.body.scrollTop - document.body.clientTop
                    };
                }
            },
            extend: function (oldObj, newObj) {
                /// <summary>
                ///     1: 将两个对象进行合并
                ///         1.1 - extend(oldObj,newObj) - 将两个对象合并,并返回合并后的对象,采用clone的方式实现,所以不会对两个对象产生任何影响
                /// </summary>
                /// <param name="oldObj" type="Object">
                ///     要合并的对象A,该对象作为基础对象,将新对象的同名属性覆盖到基础对象中
                /// </param>
                /// <param name="newObj" type="Object">
                ///     要合并的对象B
                /// </param>
                /// <returns type="Object" />
                var tempObj = tool.clone(oldObj);
                for (var key in newObj) {
                    if (newObj.hasOwnProperty(key) && !tempObj.hasOwnProperty(key)) {
                        tempObj[key] = newObj[key];
                    }
                }
                return tempObj;
            },
            clone: function (obj) {
                /// <summary>
                ///     1: 克隆一个对象
                ///         1.1 - clone(obj) - 克隆一个对象,并返回克隆后的新对象,该对象的原型是被克隆的对象
                /// </summary>
                /// <param name="obj" type="Object">
                ///     要克隆的对象
                /// </param>
                /// <returns type="Object" />
                function Clone() { }
                Clone.prototype = obj;
                var newObj = new Clone();
                for (var key in newObj) {
                    if (typeof newObj[key] == "object") {
                        newObj[key] = tool.clone(newObj[key]);
                    }
                }
                return newObj;
            },
            convertValue: function (value) {
                /// <summary>
                ///     1: 将数值转换为有效的数值
                ///         1.1 - convertValue(value) - 将Json配置的css数值转换为有效的数值,请保证value的值不为"auto"
                /// </summary>
                /// <param name="value" type="Object">
                ///     要转换的数值
                /// </param>
                /// <returns type="Object" />
                var reg = /^d $/g;
                if (typeof (value) === 'number' || reg.test(value)) {
                    return value 'px';
                } else
                    return value;
            }
        };
        //注册到window下
        window.linkFlyScroll = linkFlyScroll;
        //注册到window.so命名空间下
        if (!window.so) {
            window.so = {};
        }
        window.so.scroll = window.linkFlyScroll;
    })(window);

代码示例

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
    <title></title>
    <link href="linkFlyScroll/linkFlyRollCss.css" rel="stylesheet" type="text/css" />
    <script src="linkFlyScroll/linkFlyScroll-1.0.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            var config = {
                auto: true, //当内容并未达到容器的高度的时候,是否自动隐藏滚动条
                height: '100', //滚动条对象工作高度(超过该高度则显示滚动条),auto取对象当前高
                width: 'auto'//滚动条对象工作宽度
            };
            var scrollObj = so.scroll('obj', config);
            //            scrollObj.change();//当滚动条内容改变后,需要刷新滚动条的显示,则调用本方法
            //            scrollObj.roll(value);//把滚动条定位到某一点上,value为相对于滚动条对象的百分比
        };
    </script>
</head>
<body>
    <div id="obj">
        <div>
            当前,企业管理领域刮起一股新的“时尚风”,一些巨头企业纷纷为自己“瘦身”,向更智慧和灵动的业务转型。据了解,甲骨文软件正越来越多地把客户的主要维护成本向咨询顾问和第三方供应商转移。
            “在中国本土,90%的甲骨文公司业务是通过这些合作伙伴开展的。此外,为了进一步确保甲骨文的收入,CEO埃里森还购买了夏威夷的一个小岛。” Craig Guarente说道。
            作为全球副总裁,Guarente非常清楚甲骨文的各项战略。Guarente具有16年的工作经历,曾在合同管理、软件许可证管理、软件审计方面有丰富经验。2011年离开甲骨文后,加入了Palisade公司,该公司的主要业务是帮助甲骨文客户提供软件承包、审计介入和许可证“优化”等业务。
            Guarente表示,Palisade公司业务发展非常迅速。作为第三方机构,Palisade帮助客户赢得了大笔订单,因为他们更贴近市场,能更准确地理解用户需求。
            一般来说,咨询公司是帮助客户梳理他的实际需求及软件本身能提供什么价值。Guarente通过实际操作做了详细阐述。比如“你想建设一个新的数据中心,想要推出一个新的灾难恢复计划,或者你想进入云端,第三方公司首先会制定一个规划图,最后落实,达成用户最终目标。如果把软件部署在很多服务器的不同位置上,企业会有丢失软件的现象。因为企业软件很少能得到许可证密钥。但Oracle已经形成习惯,每一个可能功能都可以在软件环境下下载。Oracle数据库管理员通过自动负载的存储库(AWR)报告就可以诊断数据库问题,这是常见的事,但需要你有一个Oracle数据库包的许可。”
            近年来,随着软件审计浪潮的兴起,许多公司正在安装软件资产管理工具来确定他们使用什么软件,能使用多长时间,一个企业多少人在用。但资深管理分析师Hegedus说到:“没有任何工具能准确理解企业规则,尤其是甲骨文的产品应用,需要专业的第三方机构来帮助用户理解软件规则。”
            那么怎么才能为甲骨文的软件应用打补丁呢?甲骨文总裁马克•赫德(Mark Hurd)上周表示:在企业应用之初要把第三方机构定义为服务支持方,这样方便企业日后免费获得补丁修复和其他支持,而不只是购买产品知识产权。另外,企业要有效利用咨询顾问,在了解企业使用什么软件,协议应该包含什么内容时,支持成本控制的第一步。不要盲目离开软件供应商,按照自己预测和猜想的流程采购软件。
        </div>
    </div>
</body>
</html>

以上就是本文的全部内容了,讲解的十分详细,希望大家能够喜欢。

您可能感兴趣的文章:

  • 用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
  • JavaScript实现滚动栏效果的方法
  • javascript html5实现仿flash滚动播放图片的方法
  • JavaScript控制网页平滑滚动到指定元素位置的方法
  • javascript实现左右控制无缝滚动
  • Javascript 实现图片无缝滚动
  • 返回顶部按钮响应滚动且动态显示与隐藏
  • jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
  • 基于jquery实现点击左右按钮图片横向滚动
  • js实现带按钮的上下滚动效果

编辑:亚洲城ca88唯一官方网站 本文来源:分享一则JavaScript滚动条插件源码亚洲城ca88唯一官

关键词: 亚洲城ca88