滾動條例子
❶ 如何獲得瀏覽器滾動條變化事件
在做js返回頂部的效果時，要監聽網頁滾動條滾動事件，這個事件就是：window.onscroll。當onscroll事件發生時，用js獲得頁面的scrollTop值，判斷scrollTop為一個設定值時，顯示「返回面部」
js網頁滾動條滾動事件
<style type="text/css">
#top_div{
position:fixed;
bottom:80px;
right:0;
display:none;
}
</style>
<script type="text/javascript">
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
var top_div = document.getElementById( "top_div" );
if( t >= 300 ) {
top_div.style.display = "inline";
} else {
top_div.style.display = "none";
}
}
</script>
<a name="top">頂部<a>
<div id="top_div"><a href="#top">返回頂部</a></div>
<br />
<br />
<div>
這里盡量多些<br />以便頁面出現滾動條，限於篇幅本文此處略去
</div>
例子語法解釋
在 style 標簽中首先定義 top_div css 屬性：position:fixed;display:none; 是關鍵
javascript 語句中，t 得到滾動條向下滾動的位置，|| 是為了更好兼容性考慮
當滾動超過 300 （像素）時，將 top_div css
display 屬性設置為顯示(inline)，反之則隱藏(none)
必須設定 DOCTYPE 類型，在 IE 中才能利用 document.documentElement 來取得窗口的寬度及高度
❷ 誰有c#滾動條的常式
VScrollBar的Scroll事件處理函數
private void vScrollBar1_Scroll(object sender, System.Windows.Forms.ScrollEventArgs e)
ScrollEventArgs.ThumbTrack處理滾動條正在被移動的消息。
如何區分是在向上滾動還是向下滾動？？
在c#中控制滾動條
// First import the SendMessage function from user32.dll:
[DllImport("user32.dll", EntryPoint = "SendMessageA")]
internal static extern int SendMessage(int hwnd, int wMsg, int wParam, int lParam);
// Then add this constants to your codes
private const int WM_VSCROLL = 0x115;
private const int WM_HSCROLL = 0x114;
private const int SB_LINEDOWN = 1;
private const int SB_LINEUP = 0;
private const int SB_TOP = 6;
private const int SB_BOTTOM = 7;
private const int SB_PAGEUP = 2;
private const int SB_PAGEDOWN = 3;
then:
SendMessage(rbox.Handle.ToInt32(), WM_VSCROLL, SB_LINEUP, 0);
❸ 如何獲取網頁滾動條滾動事件
1、首先新建一個html文件，在文件內引入script標簽備用：
❹ HTML 滾動條背景可以加圖片嗎 舉個例子謝謝
可以的
頁面代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>-->
</head>
<style>
.box {
height: 150px;
width: 300px;
overflow: auto;
}
.box p {
height: 300px;
}
.box::-webkit-scrollbar {
width: 10px;
height: 1px;
}
.box::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: url(img/banner01.jpg);
}
.box::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 5px;
background: url(img/123.jpg);
}
.box .srcoll::-webkit-scrollbar {
width: 10px;
height: 1px;
}
.box .srcoll::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #ccc;
}
.box .srcoll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 5px;
background: #EDEDED;
}
/*滾動條樣式 end*/
</style>
<body>
<div class="box">
<p>11111</p>
</div>
</body>
</html>
//記得改一下css的圖片路徑
❺ 如何實現jquery滾動條間隔滾動 文字間隔向上滾動效果示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>checkbox</title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/1.js" type="text/javascript"></script>
</head>
<body>
<table id="table1">
<tr>
<td><input type="checkbox" value="1"/>1</td>
<td id="k_1"><input type="text" name="student" id="s_1" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="2"/>2</td>
<td id="k_2"><input type="text" name="student" id="s_2" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="3"/>3</td>
<td id="k_3"><input type="text" name="student" id="s_3" readonly="true"/></td>
</tr>
<tr>
<td><input type="checkbox" value="4"/>4</td>
<td id="k_4"><input type="text" name="student" id="s_4" readonly="true"/></td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------
$(document).ready(function() {
$("td[id^='k_']").hide();
var check = $(":checkbox"); //得到所有被選中的checkbox
var actor_config; //定義變數
check.each(function(i){
actor_config = $(this);
actor_config.click(
function(){
if($(this).attr("checked")==true){
$("#k_"+$(this).val()).show();
}else{
$("#k_"+$(this).val()).hide();
}
}
);
});
});
❻ 怎麼用js為div做滾動條實例
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js滾動條特效</title>
<style type="text/css">
*{ margin:0; padding:0;}
p{ height:1000px;}
#mainBox{ width:400px; height:500px; border:1px #bbb solid; position:relative; overflow:hidden; margin:50px auto;}
#content{ height:2500px; position:absolute; left:0; top:0; background:url(/jscss/demoimg/logo_demo1.gif) }
.scrollDiv{ width:18px; position:absolute; top:0; background:#666; border-radius:10px;}
</style>
</head>
<body>
<div id="mainBox">
<div id="content"></div>
</div>
<p></p>
<script type="text/javascript">
var doc=document;
var _wheelData=-1;
var mainBox=doc.getElementById('mainBox');
function bind(obj,type,handler){
var node=typeof obj=="string"?$(obj):obj;
if(node.addEventListener){
node.addEventListener(type,handler,false);
}else if(node.attachEvent){
node.attachEvent('on'+type,handler);
}else{
node['on'+type]=handler;
}
}
function mouseWheel(obj,handler){
var node=typeof obj=="string"?$(obj):obj;
bind(node,'mousewheel',function(event){
var data=-getWheelData(event);
handler(data);
if(document.all){
window.event.returnValue=false;
}else{
event.preventDefault();
}
});
//火狐
bind(node,'DOMMouseScroll',function(event){
var data=getWheelData(event);
handler(data);
event.preventDefault();
});
function getWheelData(event){
var e=event||window.event;
return e.wheelDelta?e.wheelDelta:e.detail*40;
}
}
function addScroll(){
this.init.apply(this,arguments);
}
addScroll.prototype={
init:function(mainBox,contentBox,className){
var mainBox=doc.getElementById(mainBox);
var contentBox=doc.getElementById(contentBox);
var scrollDiv=this._createScroll(mainBox,className);
this._resizeScorll(scrollDiv,mainBox,contentBox);
this._tragScroll(scrollDiv,mainBox,contentBox);
this._wheelChange(scrollDiv,mainBox,contentBox);
this._clickScroll(scrollDiv,mainBox,contentBox);
},
//創建滾動條
_createScroll:function(mainBox,className){
var _scrollBox=doc.createElement('div')
var _scroll=doc.createElement('div');
var span=doc.createElement('span');
_scrollBox.appendChild(_scroll);
_scroll.appendChild(span);
_scroll.className=className;
mainBox.appendChild(_scrollBox);
return _scroll;
},
//調整滾動條
_resizeScorll:function(element,mainBox,contentBox){
var p=element.parentNode;
var conHeight=contentBox.offsetHeight;
var _width=mainBox.clientWidth;
var _height=mainBox.clientHeight;
var _scrollWidth=element.offsetWidth;
var _left=_width-_scrollWidth;
p.style.width=_scrollWidth+"px";
p.style.height=_height+"px";
p.style.left=_left+"px";
p.style.position="absolute";
p.style.background="#ccc";
contentBox.style.width=(mainBox.offsetWidth-_scrollWidth)+"px";
var _scrollHeight=parseInt(_height*(_height/conHeight));
if(_scrollHeight>=mainBox.clientHeight){
element.parentNode.style.display="none";
}
element.style.height=_scrollHeight+"px";
},
//拖動滾動條
_tragScroll:function(element,mainBox,contentBox){
var mainHeight=mainBox.clientHeight;
element.onmousedown=function(event){
var _this=this;
var _scrollTop=element.offsetTop;
var e=event||window.event;
var top=e.clientY;
//this.onmousemove=scrollGo;
document.onmousemove=scrollGo;
document.onmouseup=function(event){
this.onmousemove=null;
}
function scrollGo(event){
var e=event||window.event;
var _top=e.clientY;
var _t=_top-top+_scrollTop;
if(_t>(mainHeight-element.offsetHeight)){
_t=mainHeight-element.offsetHeight;
}
if(_t<=0){
_t=0;
}
element.style.top=_t+"px";
contentBox.style.top=-_t*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
_wheelData=_t;
}
}
element.onmouseover=function(){
this.style.background="#444";
}
element.onmouseout=function(){
this.style.background="#666";
}
},
//滑鼠滾輪滾動，滾動條滾動
_wheelChange:function(element,mainBox,contentBox){
var node=typeof mainBox=="string"?$(mainBox):mainBox;
var flag=0,rate=0,wheelFlag=0;
if(node){
mouseWheel(node,function(data){
wheelFlag+=data;
if(_wheelData>=0){
flag=_wheelData;
element.style.top=flag+"px";
wheelFlag=_wheelData*12;
_wheelData=-1;
}else{
flag=wheelFlag/12;
}
if(flag<=0){
flag=0;
wheelFlag=0;
}
if(flag>=(mainBox.offsetHeight-element.offsetHeight)){
flag=(mainBox.clientHeight-element.offsetHeight);
wheelFlag=(mainBox.clientHeight-element.offsetHeight)*12;
}
element.style.top=flag+"px";
contentBox.style.top=-flag*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
});
}
},
_clickScroll:function(element,mainBox,contentBox){
var p=element.parentNode;
p.onclick=function(event){
var e=event||window.event;
var t=e.target||e.srcElement;
var sTop=document.documentElement.scrollTop>0?document.documentElement.scrollTop:document.body.scrollTop;
var top=mainBox.offsetTop;
var _top=e.clientY+sTop-top-element.offsetHeight/2;
if(_top<=0){
_top=0;
}
if(_top>=(mainBox.clientHeight-element.offsetHeight)){
_top=mainBox.clientHeight-element.offsetHeight;
}
if(t!=element){
element.style.top=_top+"px";
contentBox.style.top=-_top*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
_wheelData=_top;
}
}
}
}
new addScroll('mainBox','content','scrollDiv');
</script>
</body>
</html>
❼ VB題目 滾動條控制項的實例
你昨晚問的我已經回答你了，怎麼又來提問了啊？
第一個：(這個你要用do while...loop的，其實這個更適合用do...loop until語句）
Private Sub Command1_Click()
Dim N As Integer, SUM As Integer, I As Integer
Me.Cls
N = InputBox("請輸入一個整數：", "輸入")
Do While N <> 0
I = I + 1
SUM = SUM + N
Me.Print "第" & I & "個數：" & N
N = InputBox("請輸入一個整數：", "輸入")
Loop
Me.Print "共" & I & "個數"
Me.Print "和：" & SUM
Me.Print "平均值："; SUM / I
End Sub
第二個：
Private Sub HScroll1_Change()
Text1.Text = HScroll1.Value
End Sub
Private Sub HScroll1_Scroll()
Label1.Caption = "Moving to " & HScroll1.Value
End Sub
❽ 誰知道以下圖片中excel插入滾動條例子怎麼實現的
開發者工具里，插入控制項。如果沒開發者工具的話，去excel選項里設置下即可。
三級下拉菜單。
❾ 求大神給一個 VB.NET 窗體帶滾動條的例子源碼
思路：
利用幾個可以作為容器的控制項，添加滾動條就可以了：
我舉個例子：（這個問題我記得回答過的！）
添加1個PicTureBox1，作為容器
在PicTureBox1里添加PicTureBox2，在窗體上添加一個垂直滾動條。
把你所謂的許多控制項放到PicTureBox2里，滾動條改變的是PicTureBox2在PicTureBox1里的Top屬性，我想你通過一定的空間想像力，可以想到效果了吧？
注意：默認狀態設置PicTureBox2的Top屬性為0，當該屬性為負值的時候，PicTureBox2顯示的效果是向上移動，即下面原來隱藏的內容為可見了。
要設置PicTureBox2的AutoRedraw 屬性為True。
若要左右移動效果，那麼改變其 Left 屬性，原理不再贅述了。