www.gusucode.com > 大气广告设计类企业公司网站织梦模板源码程序 > 大气广告设计类企业公司网站织梦模板/templets/pinmoban/imgstyle/scroll_bar.js
/**
* Created by JetBrains WebStorm.
* User: Administrator
* Date: 12-4-25
* Time: 上午11:08
* To change this template use File | Settings | File Templates.
*/
var now_wheel = null;
var _isExec = false; //控制程序继续执行开关
try{
var testDiv = document.getElementById('test_scroll_bar');
_isExec = false;
}catch(e){
_isExec = true;
}
function gId(id){
return document.getElementById(id);
};
var newScroller = function(a){
var self = this;
var timer;
this._isMove = false;
this.container = document.getElementById(a+"_container"); // 容器
this.shower = document.getElementById('bigPicInfo'); // 显示的内容
this.scroller = document.getElementById(a+"_scroller"); // 滚动条容器
this.scroll_up = document.getElementById(a+"_scroll_up"); // 上翻按钮
this.scroll_down = document.getElementById(a+"_scroll_down"); // 下翻按钮
this.scroll_bar = document.getElementById(a+"_scroll_bar"); // 滑动块
this.clearselect = window.getSelection ? function(){ window.getSelection().removeAllRanges(); } : function(){ document.selection.empty(); };
this.is_bottom = function(){ // 检测是不是位于底部了
if (gId("bigPicInfo").offsetTop <= self.container.offsetHeight-gId("bigPicInfo").offsetHeight){
return true;
}
return false;
}
this.resetright = function(){
var a = gId("bigPicInfo").offsetTop / (gId("bigPicInfo").offsetHeight - gId('test_container').offsetHeight);
var b = self.scroller.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight - self.scroll_up.offsetHeight;
var c = self.scroll_up.offsetHeight + (0 - b * a);
self.scroll_bar.style.top = c + "px";
}
this.resetleft = function(){
var a = (self.scroll_bar.offsetTop - self.scroll_up.offsetHeight) / (self.scroller.offsetHeight - self.scroll_up.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight);
var b = gId("bigPicInfo").offsetHeight - gId('test_container').offsetHeight;
var c = 0 - (b * a);
gId("bigPicInfo").style.top = c + "px";
}
this.move=function(a){
if (gId("bigPicInfo").offsetTop+a <= 0 && gId("bigPicInfo").offsetTop+a >= gId("test_container").offsetHeight-gId("bigPicInfo").offsetHeight){
gId("bigPicInfo").style.top = (gId("bigPicInfo").offsetTop+a)+"px";
}else if (gId("bigPicInfo").offsetTop+a > 0){
gId("bigPicInfo").style.top = 0+"px";
}else if (gId("bigPicInfo").offsetTop+a < self.container.offsetHeight-gId("bigPicInfo").offsetHeight){
gId("bigPicInfo").style.top = self.container.offsetHeight-gId("bigPicInfo").offsetHeight+"px";
}
self.resetright();
}
this.upper = function(){
if(gId('bigPicInfo').offsetHeight < gId('test_container').offsetHeight-10){
self._isMove = false;
return false;
}
self._isMove = true;
self.clear();
timer = window.setInterval(function(){self.move(2);}, 5);
}
this.downer = function(){
if(gId('bigPicInfo').offsetHeight < gId('test_container').offsetHeight-10){
self._isMove = false;
return false;
}
self._isMove = true;
self.clear();
timer = window.setInterval(function(){self.move(-2);}, 5);
}
this.clear = function(){
window.clearInterval(timer);
}
this.test_bar = function(){
if (self.container.offsetHeight < gId("bigPicInfo").offsetHeight){
self.scroller.style.display = "block";
}else {
self.scroller.style.display = "none";
}
}
this.gotobottom = function(){
var a = (gId("bigPicInfo").offsetHeight > self.container.offsetHeight) ? self.container.offsetHeight - gId("bigPicInfo").offsetHeight : 0;
gId("bigPicInfo").style.top = a + "px";
self.test_bar();
self.resetright();
}
this.wheel = function(){
if(gId('bigPicInfo').offsetHeight < gId('test_container').offsetHeight-10){
self._isMove = false;
return false;
}
self._isMove = true;
if (now_wheel == null) now_wheel =a;
if (now_wheel == a){
var e=arguments[0]||window.event;
var act = e.wheelDelta ? e.wheelDelta/120 : (0 -e.detail/3);
self.clear();
self.move(80*act);
try{ e.preventDefault();}
catch(e){}
}
window.setTimeout(function(){self.end_wheel();}, 1);
return false;
}
this.end_wheel = function(){
now_wheel = null;
}
this.barmove = function(){
if(gId('bigPicInfo').offsetHeight < gId('test_container').offsetHeight-10){
self._isMove = false;
return false;
}
self._isMove = true;
// 记录当时鼠标的位置与
self.clearselect;
var mover = this;
this.can_move_top = self.scroll_bar.offsetTop - self.scroll_up.offsetHeight; // 这个滚动条上方的可移动距离
this.can_move_bottom = self.scroller.offsetHeight - self.scroll_bar.offsetTop - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight; // 这个滚动条下方的可移动距离
this.e=arguments[0]||window.event;
this.starts = this.e.clientY;
this.starttop = self.scroll_bar.offsetTop;
this.drag = function(){
if(!self._isMove) return; //判断是否需要move
this.e=arguments[0]||window.event;
this.ends = this.e.clientY;
this.dis = this.ends - mover.starts;
if (this.dis < (0-mover.can_move_top)) this.dis = 0-mover.can_move_top;
if (this.dis > mover.can_move_bottom) this.dis = mover.can_move_bottom;
self.scroll_bar.style.top = (mover.starttop + this.dis) + "px";
self.resetleft();
self.clearselect;
}
this.cleardrag = function(){
if (window.removeEventListener){
document.removeEventListener("mousemove", mover.drag, true);
}else {
document.detachEvent("onmousemove", mover.drag);
}
self.clearselect;
}
this.add_listener = function(){
if (window.addEventListener){
document.addEventListener("mousemove", mover.drag, true);
document.addEventListener("mouseup", mover.cleardrag, true);
}else {
document.attachEvent("onmousemove", mover.drag);
document.attachEvent("onmouseup", mover.cleardrag);
}
}
this.add_listener();
}
this.outbar = function(){
if(gId('bigPicInfo').offsetHeight < gId('test_container').offsetHeight-10){
self._isMove = false;
return false;
}
self._isMove = true;
var e=arguments[0]||window.event;
var obj = e.srcElement ? e.srcElement : e.target;
if (obj.id == self.scroller.id){
var y = e.offsetY || e.layerY;
var new_top = y - 0.5 * self.scroll_bar.offsetHeight;
if (y - self.scroll_up.offsetHeight < 0.5 * self.scroll_bar.offsetHeight) new_top = self.scroll_up.offsetHeight;
if (self.scroller.offsetHeight - y - self.scroll_down.offsetHeight < 0.5 * self.scroll_bar.offsetHeight) new_top = self.scroller.offsetHeight - self.scroll_down.offsetHeight - self.scroll_bar.offsetHeight;
self.scroll_bar.style.top = new_top + "px";
self.resetleft();
}
}
gId('test_scroll_bar').ondrag=function(){return false;}
gId('test_scroll_bar').oncontextmenu=function(){return false;}
gId('test_scroll_bar').onselectstart=function(){return false;}
if (window.addEventListener){
gId('test_scroll_up').addEventListener("mousedown", this.upper, false);
gId('test_scroll_down').addEventListener("mousedown", this.downer, false);
gId('test_scroll_bar').addEventListener("mousedown", this.barmove, false);
gId('test_scroller').addEventListener("mousedown", this.outbar, false);
gId('test_scroller').parentNode.addEventListener("DOMMouseScroll", this.wheel, false);
gId('test_scroller').parentNode.addEventListener("mousewheel", this.wheel, false);
document.addEventListener("mouseup", this.clear, false);
}else {
gId('test_scroll_up').attachEvent("onmousedown", this.upper);
gId('test_scroll_down').attachEvent("onmousedown", this.downer);
gId('test_scroll_bar').attachEvent("onmousedown", this.barmove);
gId('test_scroller').attachEvent("onmousedown", this.outbar);
gId('test_container').parentNode.attachEvent("onmousewheel", this.wheel);
document.attachEvent("onmouseup", this.clear);
try{ window.event.cancelBubble=true;}
catch(e){}
}
}
var te = function(){
if(_isExec) return;
return new newScroller("test");
}