分享一则JavaScript滚动条插件源码,自动隐藏的Sticky的Header

自动隐藏的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,这几个插件有如下多少个不太满足的地点:

享用一则JavaScript滚动条插件源码

 那是过年的时候自己写的js滚动条插件的源码,做出的效劳要好并不合意,正因为做的并不如意所以回头重新巩固和深刻学习js,这些插件有如下多少个不太好听的地点:

情节的过火效果,可以参考QQ客户端近日会话列表里的滚动条,它的轮转卓殊的平滑,简单来讲就是缺少动画过渡效果。

并不算圆满的包容性,在IE6、7下的style如故有点缺憾。

体制的不周详,例如鼠标悬浮才显得滚动条,移除后潜伏那种功能都尚未写。

内部结构的混杂,须要调动内容结构。

滚动条那些图片毕竟不是画画,自己切图切的正是恶心到爆了…囧

一体化来说还是能看的,仍旧短缺一个动画片。在写那一个插件意识到温馨的插件用到了有的比较基础的函数,于是想到把这么些函数应该封装起来,近期仍旧在深入学习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:[email protected]
* 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
分享一则JavaScript滚动条插件源码,自动隐藏的Sticky的Header。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 – scroll伊夫nt(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 – remove伊芙nt(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 – addScroll伊夫nt(element,fn) –
在要素上加码Scroll伊芙nt事件(特殊事件,在要素上鼠标滚轮滚动事件)
/// </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 – get伊芙nt() –
在无参数的状态下得到伊夫nt对象,同时包容性处理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”>
/// 伊芙nt事件目的
/// </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%的黑体集团业务是经过那些合营伙伴开展的。其余,为了越发有限支撑行草的纯收入,经理埃里森还购买了马尔代夫的一个小岛。”
Craig Guarente说道。
用作满世界副主任,Guarente万分清楚钟鼓文的种种战略。Guarente具有16年的干活经验,曾在合同管理、软件许可证管理、软件审计方面有增加经历。二〇一一年离开燕书后,插足了Palisade集团,该商厦的显要工作是辅助仿宋客户提供软件承包、审计插足和证照“优化”等事情。
Guarente表示,Palisade公司工作发展丰裕便捷。作为第三方单位,Palisade帮忙客户得到了名著订单,因为她俩更近乎市场,能更确切地知道用户要求。
相似的话,咨询公司是赞助客户梳理他的实际上须求及软件本身能提供哪些价值。Guarente通过实际操作做了详实阐释。比如“你想建设一个新的数目主导,想要推出一个新的灾荒復苏布置,或者您想进入云端,第三方公司第一会制定一个规划图,最终达成,完结用户最后目的。纵然把软件陈设在广大服务器的不等职位上,公司会有丢失软件的气象。因为公司软件很少能得到许可证密钥。但Oracle已经形成习惯,每一个或许功用都足以在软件条件下下载。Oracle数据库管理员通过机关负载的存储库(AWR)报告就足以诊断数据库难题,那是大规模的事,但须要您有一个Oracle数据库包的批准。”
前不久,随着软件审计浪潮的起来,许多商厦正在设置软件资产管理工具来规定他们选择什么软件,能应用多久,一个合营社多少人在用。但闻明管理分析师Hegedus说到:“没有其余工具能可看重了然公司规则,越发是钟鼓文的产品使用,须要正式的第三方单位来援救用户知道软件规则。”
那就是说怎么才能为草书的软件应用打补丁呢?楷体主管马克•赫德(MarkHurd)前七天代表:在公司应用之初要把第三方单位定义为服务协理方,那样方便店家未来免费获得补丁修复和其它帮助,而不只是购买产品知识产权。其它,公司要实用运用咨询顾问,在打听公司运用什么软件,协议应该蕴涵哪些内容时,帮助资金控制的首先步。不要盲目离开软件供应商,依据自己预测和臆度的流水线采购软件。
</div>
</div>
</body>
</html>

 

如上就是本文的全体内容了,讲解的更加详实,希望大家可以欣赏。

那是过年的时候自己写的js滚动条插件的源码,做出的效应自己并倒霉听,正因为做的并不令人知足所以回头重…

活动隐藏导航条

「自动隐藏」意味着当用户在往下滚动页面时导航条将会消退,但当用户有可能必要导航条的时候又能让它出现:用户已经滚动到页面底部,或者开端提高滚动时。导航条的躲藏至少有三种样式:交互式和不难式。

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

情节的过度效果,可以参见QQ客户端近年来会话列表里的滚动条,它的轮转非凡的平滑,简单来讲就是缺少动画过渡效果。

相关小说

有关搜索:

今日看甚

搜寻技术库

重临首页

  • 隐性调用php程序的形式
  • php数组随机排序完成方式
  • ASP.NET中母版页和shtml实例入门
  • ASP.NET中Application全局对象用法实例浅析
  • ASP.NET中Global和URLReWrite用法
  • ASP.NET中ServerPush用法实例分析

连锁频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表明式  Flex教程  WEB前端教程  

交互式

交互式摄像演示

交互式的情致是,导航条会直接地,或者马上响应页面滚动事件,这种样式可能会由于它操作起来的感觉到,从用户体验看来是一个一石两鸟的小细节。可是它也有不佳的单方面:那种情势的精神决定了她必必要信赖于JavaScript,大家无法运用JS事件节流阀(在指定的日子周期内只调用某个函数一回)。基本上那就代表每一回滚动事件发生都要发生计算,并且会毫无意义的占有CPU。幸运的是,一大半境况下那只是理论,实际上因为统计量实在太人微权轻而普通不会遇上那种题材。

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

JavaScript

//… window.add伊夫ntListener( ‘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,但该事件需求接纳add伊芙ntListener()来绑定;

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.add伊芙ntListener( ‘scroll’, throttle( throttle提姆eout,
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);

}

});

};

亚洲必赢官网 1

滚轴事件案例

滚动条那多少个图片毕竟不是丹青,自己切图切的正是恶心到爆了…囧

关于小编:吴鹏煜

亚洲必赢官网 2

诚意、勇气、创意和传奇。(搜狐新浪:@Nappp)
个人主页 ·
我的稿子 ·
13

亚洲必赢官网 3

包裹案例–改变背景颜色

亚洲必赢官网 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 – scroll伊芙nt(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 – remove伊夫nt(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 – addScroll伊夫nt(element,fn) –
    在要素上扩展Scroll伊夫nt事件(特殊事件,在要素上鼠标滚轮滚动事件)
                /// </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 – get伊夫nt() –
    在无参数的意况下取得伊芙nt对象,同时包容性处理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年的干活经验,曾在合同管理、软件许可证管理、软件审计方面有足够经验。二零一一年相差宋体后,出席了Palisade公司,该商厦的严重性工作是支持陶文客户提供软件承包、审计插足和证照“优化”等事情。
           
Guarente代表,Palisade集团事情发展分外高效。作为第三方机构,Palisade辅助客户拿到了大笔订单,因为她们更贴近市场,能更精确地精晓用户要求。
           
一般的话,咨询集团是协理客户梳理他的莫过于要求及软件本身能提供如何价值。Guarente通过实际操作做了详尽讲演。比如“你想建设一个新的数码焦点,想要推出一个新的苦难恢复生机陈设,或者你想进去云端,第三方集团首先会制定一个规划图,最终完结,落成用户最后目标。借使把软件陈设在多如牛毛服务器的不比职位上,公司会有丢失软件的场景。因为公司软件很少能博得许可证密钥。但Oracle已经形成习惯,每一个可能功效都得以在软件条件下下载。Oracle数据库管理员通过自动负载的存储库(AWR)报告就足以诊断数据库难点,那是广大的事,但要求您有一个Oracle数据库包的特许。”
           
近日,随着软件审计浪潮的兴起,许多合营社正在设置软件资产管理工具来规定他们选用什么软件,能动用多久,一个集团多少人在用。但知名管理分析师Hegedus说到:“没有别的工具能精确驾驭公司规则,越发是金鼎文的成品选择,需求规范的第三方单位来帮衬用户知道软件规则。”
           
那么怎么才能为金鼎文的软件应用打补丁呢?石籀文主管马克•赫德(MarkHurd)下七天表示:在公司应用之初要把第三方单位定义为服务协理方,这样有利于店家今后免费获取补丁修复和其它帮助,而不只是买进产品知识产权。其它,公司要有效行使咨询顾问,在询问公司选用什么软件,协议应该包蕴怎样内容时,援救基金控制的率先步。不要盲目离开软件供应商,依据自己预测和猜想的流程采购软件。
        </div>
    </div>
</body>
</html>

如上就是本文的全体内容了,讲解的相当详实,希望大家可以欣赏。

你可能感兴趣的稿子:

  • 用javascript落成转移TEXTAREA滚动条和按钮的颜色,以及哪些让滚动条变得扁平
  • JavaScript贯彻滚动栏成效的方式
  • javascript+html5达成仿flash滚动播放图片的法子
  • JavaScript控制网页平滑滚动到指定元素地点的主意
  • javascript落成左右决定无缝滚动
  • Javascript
    完结图片无缝滚动
  • 再次来到顶部按钮响应滚动且动态展现与隐藏
  • jquery左右滚动主题图banner图片鼠标经过显示上下页按钮
  • 根据jquery落成点击左右按钮图片横向滚动
  • js达成带按钮的左右滚动效应
网站地图xml地图