masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > teks badan

图片与JavaScript配合做出个性滚动条_页面背景

WBOY

Lepaskan： 2016-05-16 18:44:18

asal

893 orang telah melayarinya

<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.jb51.net/demoimg/200910/un_bg_scrollBar.gif); 
} 
#scrollBar { 
position:absolute; 
top:0; 
right:0; 
z-index:9; 
width:14px; 
height:100%; 
background-repeat:repeat-y; 
background-position:-42px 0; 
float:left; 
} 
#scrollBarTop,#scrollBarHandle,#scrollBarBottom { 
position:absolute; 
left:0; 
cursor:default; 
} 
#scrollBarTop,#scrollBarBottom { 
width:100%; 
height:14px; 
color:#fff; 
text-align:center; 
} 
#scrollBarTop { top:0; } 
#scrollBarBottom { bottom:0; } 
#scrollBarHandle { width:100%; background-repeat:repeat-y; background-position:-28px 0; } 
.scroll_bar_top { background-position:0 0; } 
.scroll_bar_top_a { background-position:-14px 0; } 
.scroll_bar_bottom { background-position:-56px 0; } 
.scroll_bar_bottom_a { background-position:-70px 0; } 
</style> 
 
 
<div id="out"> 
<div id="content"> 
fsdfs<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br> 
</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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Label berkaitan：

滚动条

sumber：php.cn

Artikel sebelumnya：JavaScript 函数式编程的原理_javascript技巧 Artikel seterusnya：JS CSS制作饱含热情的镶边文字闪烁特效_文字特效

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

Tatasusunan PHP yang diperoleh daripada parameter URL tidak berkelakuan seperti yang diharapkan Saya mempunyai parameter URL yang mengandungi id kategori dan saya mahu menganggapnya seba...

daripada 2024-04-06 22:09:02

0

1

1428

Gerakkan kandungan ke kiri dengan menambahkan sifat Width Saya telah memberikan margin kepada badan. utama {margin kiri: 200px; jidar kanan: 200px p...

daripada 2024-04-06 22:01:35

0

3

816

Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...

daripada 2024-04-06 21:58:04

0

1

800

Ungkapan biasa untuk memadankan perkataan Saya mempunyai skrip di mana saya cuba memadankan nama kerja baharu dengan nama kerja sedi...

daripada 2024-04-06 21:24:04

0

1

606

Pertanyaan dan formula membentuk keseluruhan jadual, dengan lajur baharu, dengan lajur baharu ialah formula yang melibatkan nilai lajur bersyarat lain EDIT: Formula mestilah lajur "nilai" - lajur "nilai" dengan user_id te...

daripada 2024-04-06 21:23:40

0

2

530

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan