yl.fighter
- 浏览: 253209 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
pxczy：
我的firefox下和chrome下试了都不行。。。
JS+SWF实现浏览器复制 -
mengjie133233：
貌似那个js版本的不对啊
看到PHP的一道面试题, 做了下, 不知道还有没好点方法 -
shengerweinan：
您好，我在第四步测试的时候输入ssh -T git@githu ...
GIT 入门使用(以GITHUB为服务器) -
qq550906358：
谢谢了,这个问题困扰了我半天,原来添加一个doLayout就没 ...
Ext.Panel 动态添加组件后，没有显示组件 。需要调用Ext.Panel 的doLayout()函数 -
0633bbs点com：
问题已经解决了，谢谢。
cumulus(浑天仪)使用手册
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding: 0px; list-style:none;}
.box { width:500px; margin:0 auto; position:relative; top:100px; }
.Container { position: absolute; top:0px; left: 100px; width: 400px; height: 200px; background-color: #EEE; }
#Scroller-1 { position: absolute; overflow: hidden; width: 400px; height: 200px; }
#Scroller-1 p { margin: 0; padding: 10px 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 20px; color: #777; }
.Scroller-Container { position: absolute; top: 0px; left: 0px; }
.Scrollbar-Track { width: 10px; height: 200px; position: absolute; top: 0px; right:0px; background-color: #EEE; cursor:pointer; }
.Scrollbar-Handle { position: absolute; top: 0px; left: 0px; width: 10px; height: 30px; background-color: #CCC; }
</style>
<script type="text/javascript">
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("Scroller-1"), 400, 200);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i]; // 以 o 为对象，将对象包含的class名为Scroller-Container的元素付给 对象 o
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("Scroller-Container") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
};
function jsScrollbar (o, s, a, ev) {
var self = this;
this.reset = function () {
//Arguments that were passed
this._parent = o;
this._src = s;
this.auto = a ? a : false;
this.eventHandler = ev ? ev : function () {};
//Component Objects
this._up = this._findComponent("Scrollbar-Up", this._parent);
this._down = this._findComponent("Scrollbar-Down", this._parent);
this._yTrack = this._findComponent("Scrollbar-Track", this._parent);
this._yHandle = this._findComponent("Scrollbar-Handle", this._yTrack);
//Height and position properties
this._trackTop = findOffsetTop(this._yTrack);
this._trackHeight = this._yTrack.offsetHeight;
this._handleHeight = this._yHandle.offsetHeight;
this._x = 0;
this._y = 0;
//Misc. variables
this._scrollDist = 5;
this._scrollTimer = null;
this._selectFunc = null;
this._grabPoint = null;
this._tempTarget = null;
this._tempDistX = 0;
this._tempDistY = 0;
this._disabled = false;
this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
this._yHandle.ondragstart = function () {return false;};
this._yHandle.onmousedown = function () {return false;};
if(window.event){
this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
}//W3C
else{
this._addEvent(this._src.content, "DOMMouseScroll", this._scrollbarWheel);
}
this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
this._addEvent(this._parent, "mousedown", this._scrollbarClick);
this._src.reset();
with (this._yHandle.style) {
top = "0px";
left = "0px";
}
this._moveContent();
if (this._src.totalHeight < this._src.viewableHeight) {
this._disabled = true;
this._yHandle.style.visibility = "hidden";
if (this.auto) this._parent.style.visibility = "hidden";
} else {
this._disabled = false;
this._yHandle.style.visibility = "visible";
this._parent.style.visibility = "visible";
}
};
this._addEvent = function (o, t, f) {
if (o.addEventListener) o.addEventListener(t, f, false);
else if (o.attachEvent) o.attachEvent('on'+ t, f);
else o['on'+ t] = f;
};
this._removeEvent = function (o, t, f) {
if (o.removeEventListener) o.removeEventListener(t, f, false);
else if (o.detachEvent) o.detachEvent('on'+ t, f);
else o['on'+ t] = null;
};
this._findComponent = function (c, o) {
var kids = o.childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className && kids[i].className == c) {
return kids[i];
}
}
};
//Thank you, Quirksmode
function findOffsetTop (o) {
var t = 0;
if (o.offsetParent) {
while (o.offsetParent) {
t += o.offsetTop;
o = o.offsetParent;
}
}
return t;
};
this._scrollbarClick = function (e) {
if (self._disabled) return false;
e = e ? e : event;
if (!e.target) e.target = e.srcElement;
if (e.target.className.indexOf("Scrollbar-Up") > -1) self._scrollUp(e);
else if (e.target.className.indexOf("Scrollbar-Down") > -1) self._scrollDown(e);
else if (e.target.className.indexOf("Scrollbar-Track") > -1) self._scrollTrack(e);
else if (e.target.className.indexOf("Scrollbar-Handle") > -1) self._scrollHandle(e);
self._tempTarget = e.target;
self._selectFunc = document.onselectstart;
document.onselectstart = function () {return false;};
self.eventHandler(e.target, "mousedown");
self._addEvent(document, "mouseup", self._stopScroll, false);
return false;
};
this._scrollbarDrag = function (e) {
e = e ? e : event;
var t = parseInt(self._yHandle.style.top);
var v = e.clientY + document.body.scrollTop - self._trackTop;
with (self._yHandle.style) {
if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
top = self._trackHeight - self._handleHeight +"px";
else if (v <= self._grabPoint) top = "0px";
else top = v - self._grabPoint +"px";
self._y = parseInt(top);
}
self._moveContent();
};
this._scrollbarWheel = function (e) {
e = e ? e : event;
var dir = 0;
if (e.wheelDelta >= 120) dir = -1;
if (e.wheelDelta <= -120) dir = 1;
if(e.detail >=3) dir= 1;
if(e.detail <=-3) dir = -1;
self.scrollBy(0, dir * 20);
e.returnValue = false;
};
this._startScroll = function (x, y) {
this._tempDistX = x;
this._tempDistY = y;
this._scrollTimer = window.setInterval(function () {
self.scrollBy(self._tempDistX, self._tempDistY);
}, 40);
};
this._stopScroll = function () {
self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
self._removeEvent(document, "mouseup", self._stopScroll, false);
if (self._selectFunc) document.onselectstart = self._selectFunc;
else document.onselectstart = function () { return true; };
if (self._scrollTimer) window.clearInterval(self._scrollTimer);
self.eventHandler (self._tempTarget, "mouseup");
};
this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
this._scrollTrack = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._scroll(0, curY - this._trackTop - this._handleHeight/2);
};
this._scrollHandle = function (e) {
var curY = e.clientY + document.body.scrollTop;
this._grabPoint = curY - findOffsetTop(this._yHandle);
this._addEvent(document, "mousemove", this._scrollbarDrag, false);
};
this._scroll = function (x, y) {
if (y > this._trackHeight - this._handleHeight)
y = this._trackHeight - this._handleHeight;
if (y < 0) y = 0;
this._yHandle.style.top = y +"px";
this._y = y;
this._moveContent();
};
this._moveContent = function () {
this._src.scrollTo(0, Math.round(this._y * this._ratio));
};
this.scrollBy = function (x, y) {
this._scroll(0, (-this._src._y + y)/this._ratio);
};
this.scrollTo = function (x, y) {
this._scroll(0, y/this._ratio);
};
this.swapContent = function (o, w, h) {// 判断浏览器
if(window.event){
this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
}//W3C
else{
this._removeEvent(this._src.content, "DOMMouseScroll", this._scrollbarWheel, false);
}
this._src.swapContent(o, w, h);
this.reset();
};
this.reset();
};
</script>
</head>
<body>
<div class="box">
<div class="Container">
<div id="Scroller-1">
<div style="left: 0px; top: -596px;" class="Scroller-Container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo
ligula enim ac justo. Pellentesque id ligula. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam
blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut,
condimentum non, ullamcorper eu, neque. In hac habitasse platea
dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed,
libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum,
dolor ligula ultrices neque, in elementum ante erat et elit.</p>
<p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium
sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula.
Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam
eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin
neque. Aliquam erat volutpat. Pellentesque felis.</p>
<p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse
mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum,
elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac
habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi.
Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl.
Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo
ligula enim ac justo. Pellentesque id ligula. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam
blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut,
condimentum non, ullamcorper eu, neque. In hac habitasse platea
dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed,
libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum,
dolor ligula ultrices neque, in elementum ante erat et elit.</p>
<p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium
sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula.
Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam
eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin
neque. Aliquam erat volutpat. Pellentesque felis.</p>
<p>Aliquam consequat. Proin feugiat ultricies dui. Suspendisse
mollis dui nec nunc. Nam tristique, ante vitae imperdiet vestibulum,
elit nulla rhoncus nisl, vitae tincidunt dolor dui eu mi. In hac
habitasse platea dictumst. Nunc blandit dolor vel mauris. Proin wisi.
Nam pharetra ultrices tellus. Sed arcu. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nullam ultricies semper wisi. Sed nisl.
Donec blandit. Nunc vitae urna sed nisl mattis ornare.</p>
</div>
</div>
</div>
<div style="visibility: visible;" id="Scrollbar-Container">
<div class="Scrollbar-Track">
<div style="top: 70px; left: 0px; visibility: visible;" class="Scrollbar-Handle"></div>
</div>
</div>
</div>
</body>
</html>
分享到：
发表评论
-
nginx 配置.json文件直接访问，不下载
2012-06-22 12:36 6884配置： conf/mime.types 行： text ... -
PHP 常见算法【冒泡排序, 快速排序, 插入排序, 选择排序, 二分法查找, ..】
2012-06-09 23:58 2759// 冒泡排序 function bubblesort($a ... -
牛年求牛：有一母牛，到4岁可生育，每年一头，所生均是一样的母牛，到15岁绝育，不再能生，20岁死亡，问n年后有多少头牛
2012-06-09 23:42 5429问题： 牛年求牛：有一母牛，到4岁可生育，每年一头，所生均 ... -
PHP 递归实现层级树状展现数据
2012-06-09 22:26 12953<?php $db = mysql_conn ... -
看到PHP的一道面试题, 做了下, 不知道还有没好点方法
2012-03-07 02:10 1476题目如下, 类似这样的aaa<em>sss< ... -
JS 非贪婪模式详解
2012-03-07 00:28 2636首先, 先理解下概念: 非贪婪模式 即在正则后加问号" ... -
[转帖] js apply/call/caller/callee/bind使用方法与区别分析
2012-02-23 12:40 1091转自: http://www.codesky.net/arti ... -
用P3P header解决iframe跨域访问cookie
2011-12-22 12:41 1652目前在整合几个应用时 ... -
[转载]IE6:display:inline-block解决方案
2011-12-20 18:17 1290转自: http://hi.baidu.com/t ... -
ColorPicker(Fix IE6) 取色器
2011-12-20 18:16 946见附件 -
[转载]修正IE6不支持position:fixed的bug
2011-12-20 18:14 832众所周知IE6不支持position:fixed，这个bug与 ... -
CSS 点点
2011-12-20 18:12 991DIV添加滚动条 .singer_detail {overfl ... -
提示浮层跟随鼠标移动
2011-12-20 18:10 1240index.html <!DOCTYPE html ... -
解决在iframe页面里使用了DD_belatedPNG后显示空白的bug
2011-12-18 21:57 1282IE6不支持png的图片，DD_belatedPNG这个js脚 ... -
iframe或colorbox 父子窗口调用的方法
2011-12-18 21:57 1536在父窗口中, 如此声明方法: // 图片上传完成后, 子窗口掉 ... -
用js实现页面跳转的5种方法
2011-12-17 17:50 1035转载自: http://www.cnblogs.com/lgz ... -
JS浏览器检测
2011-12-17 17:48 867<html> <head> & ... -
[转载]DIV浮动层被FLASH挡住的简单解决方法
2011-12-17 17:47 1104转自: http://hi.baidu.com/zhifeng ... -
JS+SWF实现浏览器复制
2011-12-17 17:46 2117<!DOCTYPE HTML PUBLIC &quo ... -
jQuery替换element元素上已经绑定的事件
2011-12-14 19:10 12591. 默认绑定: $("#music_"+ ...
相关推荐
vue自定义浏览器滚动条(已兼容ie)
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome.docx
兼容ie滚动条前端代码，兼容ie滚动条js代码。兼容ie滚动条前端代码，兼容ie滚动条js代码。兼容ie滚动条前端代码，兼容ie滚动条js代码。兼容ie滚动条前端代码，兼容ie滚动条js代码。兼容ie滚动条前端代码，兼容ie滚动...
图片滚动展示单击放大代码，使用prettyPhoto插件，代码兼容：IE6，IE7，IE8，Firefox，chrome
表格 题头拖动 超出宽度显示省略号(中文亦可) 滚动条 兼容IE，FF，safari
element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的滚动条样式自定义，element table固定头部ie的...
原生javascript自定义滚动条（兼容IE，火狐，chrom)
JS最简单的滚动新闻，兼容IE6及其他主流浏览器，还可以调整滚动速度
本文主要分享了使用原生JavaScript实现自定义浏览器滚动条兼容IE、 火狐和chrome的思路与方法，具有一定的参考价值，下面跟着小编一起来看下吧
修改火狐滚动条样式demo,纯css修改火狐默认的滚动条样式
符合标准的间隙间歇滚动代码(兼容IE和FireFox).htm 符合标准的间隙间歇滚动代码(兼容IE和FireFox).htm
兼容IE的滚动条
向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）,效果比较好
网页制作用的一个设置IE滚动条 CSS样式的小工具
WEB设计里什么是树？简单讲，点击一个链接，会展开下级目录，再点击会合上，这个就是最简单的树，如何去实现呢，也很简单，css里有一个属性display，这个可以控制内容的现实还是不显示，那么再通过js... 顶级目录</div>
使用自定义滚动条颜色为您的Firefox浏览器提供个性化的触摸效果！ 您可以从任何颜色范围中进行选择，并在默认宽度和细滚动条之间切换...或者，如果这是使您的船浮起的话，则将其完全隐藏。 注意：由于技术限制，此...
兼容性比较好，js滚动条。
IE多彩滚动条 Ver 1.0 (C)Copyright 小鱼儿工作室 2002 免费软件 要VB6运行库的支持。预览功能要装IE5.5(ME默认安装)之后才有效。 IE5.5之后，支持滚动条的CSS，可以制作出彩色的滚动条。不过，...
兼容IE的滚动条，包涵开始滚动、滚动中、滚动到底部、滚动到顶部、正在滚动时的回调函数。