图片与JavaScript配合做出个性滚动条- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 图片与JavaScript配合做出个性滚动条

Javascript: 图片展示效果鼠标经过变大图，支持FF; 可拖动可改变大小div的实现代码; javascript 随机广告代码(图片广告); JS+Ajax+Jquery实现页面无刷新分页以及分组超强的实现; JQuery 浮动导航栏实现代码; jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera; js 分栏效果实现代码; 基于jQuery的ajax功能实现web service的json转化; IE 条件注释详解总结（附实例代码）; 用cssText批量修改样式; JavaScript 应用技巧集合[推荐]; jquery 导航设计实现代码学习jquery的朋友可以看下; 动态样式类封装JS代码; 一步一步教你写一个jQuery的插件教程(Plugin); 使用jQuery的ajax功能实现的RSS Reader 代码; jquery tools 系列 scrollable（2）; jquery tools系列 overlay 学习; jquery tools系列 expose 学习; javascript十个最常用的自定义函数(中文版); javascript 流畅动画实现原理

No. « ‹ 225 226 227 228 › »

技术文章搜索

关键字

Javascript 中的图片与JavaScript配合做出个性滚动条

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 130 ::

收藏到网摘: n/a

简单的加密css地址防止别人下载你的CSS文件的方法 JavaScript 复制功能代码兼容多浏览器

如果你想定制出一个漂亮的滚动条的话,这个JS特效可能会适合你,不过代码稍嫌麻烦些,但效果真的不错,代码含有中文注释,学习也是不错的,希望朋友们喜欢.

<!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>图片与JavaScript配合做出个性滚动条</title>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:20px 0 400px 20px; font:12px Arial; }
h1 { font-size:14px; }
ol { margin:20px; line-height:160%; }
#out {
position:relative;
width:500px;
height:300px;
margin:100px 0 100px 80px;
border:1px solid #369;
overflow:hidden;
}
#content {
width:520px;
height:100%;
overflow:auto;
-moz-user-select:none;
}
#scrollBar,#scrollBarHandle,.scroll_bar_top,.scroll_bar_top_a,.scroll_bar_bottom,.scroll_bar_bottom_a {
background-image:url(http://files.ruanchen.com/"out">
<div id="content">
fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 11111111 fsdfs 
</div>
<div id="scrollBar">
<div id="scrollBarTop" class="scroll_bar_top"></div>
<div id="scrollBarHandle"></div>
<div id="scrollBarBottom" class="scroll_bar_bottom"></div>
</div>
</div>
<script>
var ximen = {
$:function(o){ return document.getElementById(o); },
getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },
getOffset:function(o) {
var t = o.offsetTop,h = o.offsetHeight;
while(o = o.offsetParent) { t += o.offsetTop; }
return { top:t, height:h };
},
bind:function(o,eType,fn) {
if(o.addEventListener) { o.addEventListener(eType,fn,false); }
else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }
else { o["on" + eType] = fn; }
},
unbind:function(o,eType,fn) {
if(o.removeEventListener) { o.removeEventListener(eType,fn,false); }
else if(o.detachEvent) { o.detachEvent("on" + eType,fn); }
else { o["on" + eType] = fn; }
},
stopPropagate:function(e) {
if(e && e.stopPropagation) { e.stopPropagation(); }
else { window.event.cancelBubble = true; }
return false;
},
stopDefault:function(e) {
e = e || window.event;
e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);
}
};
(function(){
var myScrollDown,myScrollUp,scrollBarMouseDown,scrollBarMouseUp,relY,
out = ximen.$("out"),
content = ximen.$("content"),
scrollBar = ximen.$("scrollBar"),
scrollBarTop = ximen.$("scrollBarTop"),
scrollBarHandle = ximen.$("scrollBarHandle"),
scrollBarBottom = ximen.$("scrollBarBottom"),
scrollBarUpHeight = parseInt(ximen.getStyle(scrollBarTop).height),
scrollBarBottomHeight = parseInt(ximen.getStyle(scrollBarBottom).height),
contentScrollHeight = content.scrollHeight,//将content.scrollHeight赋一次值,解决IE6下scrollHeight需调用两次的bug
scrollBarHandleHeight = parseInt(content.offsetHeight/content.scrollHeight * (scrollBar.offsetHeight - scrollBarUpHeight - scrollBarBottomHeight)),
setScrollBarHandle = function() {//当内容超多时设置拖拽条子的最小高度
scrollBarHandle.style.top = scrollBarUpHeight + "px";
if(scrollBarHandleHeight > 15) { scrollBarHandle.style.height = scrollBarHandleHeight + "px"; }
else { scrollBarHandleHeight = 15; scrollBarHandle.style.height = "15px"; }
},
clearAllInterval = function() { clearInterval(myScrollDown); clearInterval(myScrollUp); clearInterval(scrollBarMouseDown); },
forMousemove = function(e) {
var e = e || window.event;
content.scrollTop = (e.clientY - relY - scrollBarUpHeight)/(scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight)*(content.scrollHeight - content.offsetHeight);
},
forMouseDown = function(event){
var et = event.target || event.srcElement;
relY = event.clientY - et.offsetTop;
ximen.bind(document,"mousemove",forMousemove);
},
scrollDir = function(e) {
var e = e || window.event,eDir; //设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C，根据返回值的正负来判断滚动方向
if(e.wheelDelta) { eDir = e.wheelDelta/120; }
else if(e.detail) { eDir = -e.detail/3; }
if(eDir > 0) { content.scrollTop -= 80; } //步长设80像素a比较接近window滚动条的滚动速度
else { content.scrollTop += 80; }
ximen.stopDefault(e);
},
scrollBarClick = function(e) {
var e = e || window.event,
mStep = scrollBar.offsetHeight,
documentScrollTop = document.documentElement.scrollTop,
hOffset = ximen.getOffset(scrollBarHandle);
if(documentScrollTop + e.clientY < hOffset.top) { scrollBarMouseDown = setInterval(function(){ content.scrollTop -= 15; },10); }
else if(documentScrollTop + e.clientY > hOffset.top + hOffset.height) { scrollBarMouseDown = setInterval(function(){ content.scrollTop += 15; },10); }
};
setScrollBarHandle();
ximen.bind(content,"scroll",function(){
scrollBarHandle.style.top = content.scrollTop/(content.scrollHeight - content.offsetHeight) * (scrollBar.offsetHeight - scrollBarHandleHeight - scrollBarUpHeight - scrollBarBottomHeight) + scrollBarUpHeight + "px";
});
ximen.bind(scrollBarBottom,"mousedown",function(){ myScrollDown = setInterval(function(){ content.scrollTop += 15; },10); });
ximen.bind(scrollBarTop,"mousedown",function(){ myScrollUp = setInterval(function(){ content.scrollTop -= 15; },10); });
ximen.bind(scrollBarBottom,"mouseup",clearAllInterval);
ximen.bind(scrollBarBottom,"mouseout",clearAllInterval);
ximen.bind(scrollBarTop,"mouseup",clearAllInterval);
ximen.bind(scrollBarTop,"mouseout",clearAllInterval);
ximen.bind(scrollBarHandle,"mousedown",forMouseDown);
ximen.bind(document,"mouseup",function(){
ximen.unbind(document,"mousemove",forMousemove);
ximen.unbind(scrollBarHandle,"mousemove",forMousemove);
});
ximen.bind(out,"selectstart",function(){ return false; });
ximen.bind(out,"select",function(){ document.selection.empty(); });
ximen.bind(out,"mousewheel",scrollDir);
ximen.bind(out,"DOMMouseScroll",scrollDir);
ximen.bind(scrollBar,"mousedown",scrollBarClick);
ximen.bind(scrollBar,"mouseup",clearAllInterval);
ximen.bind(scrollBarTop,"click",function(event){ ximen.stopPropagate(event); });
ximen.bind(scrollBarTop,"mousedown",function(){ scrollBarTop.className = "scroll_bar_top_a"; });
ximen.bind(scrollBarTop,"mouseup",function(){ scrollBarTop.className = "scroll_bar_top"; });
ximen.bind(scrollBarTop,"mouseout",function(){ scrollBarTop.className = "scroll_bar_top"; });
ximen.bind(scrollBarBottom,"click",function(event){ ximen.stopPropagate(event); });
ximen.bind(scrollBarBottom,"mousedown",function(){ scrollBarBottom.className = "scroll_bar_bottom_a"; });
ximen.bind(scrollBarBottom,"mouseup",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
ximen.bind(scrollBarBottom,"mouseout",function(){ scrollBarBottom.className = "scroll_bar_bottom"; });
})();
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

简单的加密css地址防止别人下载你的CSS文件的方法 JavaScript 复制功能代码兼容多浏览器

Javascript 中的 图片与JavaScript配合做出个性滚动条

评论 (0) All

Javascript 中的图片与JavaScript配合做出个性滚动条