add jquery.linscroll new function (js css 滚动条 ie6 ie7 ff )

usage:

$('.scrollContent').setScrollNoArrow( {img:'_common/img/scrollbar/scroll_bar.jpg',width:8},
{img:'_common/img/scrollbar/scroll_btn.jpg',height:16}
);


<script>
/*
* Adding by Jerome Xie
* Supporting DOCTYPE Declaration
*/

jQuery.fn.setScrollNoArrow = function(_scroll, _scroll_bar){
this.each(function(){

var _bar_margin = 0;
var _bar_margin_str = '0px';

//create scroll dom
var _scroll_control = jQuery('<div class="scroll_zone">').width(_scroll.width).css({'position':'absolute','float':'none','margin':'0px','padding':'0px'}).css('background','url('+_scroll.img+')');
var _scroll_control_bar = jQuery('<img class="scroll_bar">').attr('src',_scroll_bar.img).width(_scroll.width).css({'z-index':'1500','position':'absolute','float':'none','margin':'0px','padding':'0px','height':_scroll_bar.height+'px'}).css('top',_bar_margin_str);


_scroll_control.append(_scroll_control_bar);

var _oheight = jQuery(this).height();
var _owidth = jQuery(this).width();
var _ocontent = jQuery(this).html();

if(jQuery(this).attr('scrollHeight')<=_oheight) return;

var _content_zone = jQuery('<div>').html(_ocontent).css({ 'position':'relative','width':(_owidth-10)+'px','height':'auto','overflow':'visible','float':'none','left':'0px','top':'0px','margin':'0px','padding':'0px','white-space': 'normal'});

jQuery(this).css({'overflow':'hidden'});
jQuery(this).empty().append(_content_zone).css({'position':'relative'}).append(_scroll_control.css({'left':(_owidth-_scroll.width)+'px','top':'0px','height':_oheight+'px','margin':'0px','padding':'0px'}));

//register drag event
jQuery(this).find('.scroll_bar')
.mousedown(
function(){
jQuery(document).mousemove(
function(e){
var _content = _content_zone.get(0);

var lastProgress = (_scroll_control_bar.attr('progress') != undefined)? _scroll_control_bar.attr('progress') : 0 ;

_scroll_control_bar.attr('progress',e.pageY);

var _scroll_control_bar_position = _scroll_control_bar.position();

var nowProgress = _scroll_control_bar_position.top;

nowProgress += e.pageY-lastProgress;

var _content_top = ((_content.offsetHeight - _oheight)/(_oheight -_scroll_bar.height))*nowProgress

_content.style.top= -_content_top + "px";


if(nowProgress<(_bar_margin) || nowProgress > (_oheight-(_scroll_bar.height+_bar_margin))){
return false;
}
try{_scroll_control_bar.css('top',nowProgress+'px');}catch(e){}
return false;
}
);
return false;
}
)
.mouseout(
function(){
jQuery(document).mouseup(
function(){
jQuery(document).unbind('mousemove');
}
)
}
)


});
}

</script>

更多的请查考(感谢:cuikai):

http://www.aa25.cn/css_example/794.shtml
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值