導航:首頁 > 編程語言 > js上下按鈕代替滾動條

js上下按鈕代替滾動條

發布時間:2024-03-01 23:29:19

㈠ 求一段js按鈕控制圖片上下滾動的代碼

代碼:
var arrowImageHeight = 35; // Height of arrow image in pixels;
var displayWaitMessage=true; // Display a please wait message while images are loading?

var previewImage = false;
var previewImageParent = false;
var slideSpeed = 0;
var previewImagePane = false;
var slideEndMarker = false;
var galleryContainer = false;
var imageGalleryCaptions = new Array();
function getTopPos(inputObj)
{

var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
return returnValue;
}

function getLeftPos(inputObj)
{

var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
return returnValue;
}

function showPreview(newSrc,imageIndex)
{
if(!previewImage){
var images = document.getElementById('previewPane').getElementsByTagName('IMG');
if(images.length>0){
previewImage = images[0];
}else{
previewImage = document.createElement('IMG');
document.getElementById('previewPane').appendChild(previewImage);
}

}
if(displayWaitMessage){
document.getElementById('waitMessage').style.display='inline';
}
document.getElementById('largeImageCaption').style.display='none';
previewImage.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
previewImage.src = newSrc;

}
function hideWaitMessageAndShowCaption(imageIndex)
{
document.getElementById('waitMessage').style.display='none';
document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
document.getElementById('largeImageCaption').style.display='block';

}
function initSlide(e)
{
if(document.all)e = event;

if(this.src.indexOf('over')<0)this.src = this.src.replace('.gif','-over.gif');

slideSpeed = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop) - getTopPos(this);
if(this.src.indexOf('down')>=0){
slideSpeed = (slideSpeed)*-1;
}else{
slideSpeed = arrowImageHeight - slideSpeed;
}
slideSpeed = Math.round(slideSpeed * 10 / arrowImageHeight);
}

function stopSlide()
{
slideSpeed = 0;
this.src = this.src.replace('-over','');
}

function slidePreviewPane()
{
if(slideSpeed!=0){
var topPos = previewImagePane.style.top.replace(/[^\-0-9]/g,'')/1;

if(slideSpeed<0 && slideEndMarker.offsetTop<(previewImageParent.offsetHeight - topPos)){
slideSpeed=0;

}
topPos = topPos + slideSpeed;
if(topPos>0)topPos=0;

previewImagePane.style.top = topPos + 'px';

}
setTimeout('slidePreviewPane()',30);
}

function revealThumbnail()
{
this.style.filter = 'alpha(opacity=100)';
this.style.opacity = 1;
}

function hideThumbnail()
{
this.style.filter = 'alpha(opacity=50)';
this.style.opacity = 0.5;
}

function initGalleryScript()
{
previewImageParent = document.getElementById('theImages');
previewImagePane = document.getElementById('theImages').getElementsByTagName('DIV')[0];
previewImagePane.style.top = '0px';
galleryContainer = document.getElementById('galleryContainer');
var images = previewImagePane.getElementsByTagName('IMG');
for(var no=0;no<images.length;no++){
images[no].onmouseover = revealThumbnail;
images[no].onmouseout = hideThumbnail;
}
slideEndMarker = document.getElementById('slideEnd');

document.getElementById('arrow_up_image').onmousemove = initSlide;
document.getElementById('arrow_up_image').onmouseout = stopSlide;

document.getElementById('arrow_down_image').onmousemove = initSlide;
document.getElementById('arrow_down_image').onmouseout = stopSlide;
var divs = previewImageParent.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
}
slidePreviewPane();

}

window.onload = initGalleryScript;

javascript 實現點擊鍵盤上下鍵,頁面右側滾動條不隨之上下滾動

onkeypress = garbEvent;

function grabEvent(){
var key_code = event.keyCode || event.which;

switch(key_code){
case 38: //up
return 0;

break;

case 40: //down
return 0;

break;

}

}

通過onkeypress事件監聽按鍵, 如果按鍵為38(小鍵盤上), 40(小鍵盤下)時, 不進行任何操專作.
跳出程序屬.

㈢ 如何使用JS控制DIV內容的滾動條

1、首先需要抄新建一個HTML文檔,這里設立一下基本的架構。

㈣ js,滑鼠上下滑輪或者拉動滾動條觸發事件

window.onmousewheel=function(){//觸發滾輪事件

}
window.onscroll=function(){//滾動條事件

}
//其實你的問題直接使用判斷滾動條應該就可以了,但是版如果一定要拖動滾動條才執行權事件,我們可以通過獲取滑鼠位置來模擬
vara=document.getElementsByTagName("html")[0];
window.onmousemove=function(){
//一般默認滾動條12px寬,當滑鼠位於瀏覽器窗口右邊12px內按下滑鼠可以視為拖動滾動條
if(innerWidth-event.clientX<12){
a.onmousedown=function(){
console.log(1);
}
}else{
a.onmousedown=null;
}
}

㈤ js點擊按鈕控制滾動條緩慢移動到底部

修改完成了 你把 你的js全部替換下即可

<scripttype="text/javascript">
varcurrentPosition,timer;
functionGoTop(){
currentPosition=document.documentElement.scrollTop;
currentPosition-=50;
if(currentPosition>0){
window.scrollTo(0,currentPosition);
timer=setInterval("GoTop()",10);
}else{
currentPosition=0;
window.scrollTo(0);

window.clearInterval(timer);
}

}
varcurrentPosition2,timer2;
functionGoBottom(){
currentPosition2=document.documentElement.scrollTop;

currentPosition2+=50;
if(currentPosition2<=1000){

window.scrollTo(0,currentPosition2);
timer2=setInterval("GoBottom()",100);
}else{
currentPosition=1000;
window.scrollTo(0,1000);
window.clearInterval(timer2);
}
}

</script>

㈥ javascript如何去掉瀏覽器的滾動條垂直的

這個可以用CSS實現 你可以用JS操作CSS
方法一:設置CSS屬性overflow為hidden。內
<body style="overflow:hidden">容
方法二:設置body元素的scroll屬性為no。
<body scroll="no">
如果只想隱藏橫向或縱向上的滾動條,可以用overflow-x或overflow-y來設置。

閱讀全文

與js上下按鈕代替滾動條相關的資料

熱點內容
lg編程軟體哪個好用 瀏覽:765
面板數據檢驗結果看哪些指標 瀏覽:83
許昌淘客app有哪些 瀏覽:860
子宮壁血管擴數據多少是正常 瀏覽:957
用什麼app可以生成三歲照片 瀏覽:198
excel中如何添加文件助手 瀏覽:92
蘋果1平板電腦多少錢 瀏覽:818
如何比對出該數據對應的數字 瀏覽:423
excelvba保護代碼 瀏覽:492
win764位旗艦版系統文件修復 瀏覽:942
玫琳凱訂貨網站叫什麼 瀏覽:935
javaservlet調用服務 瀏覽:210
java實時刷新 瀏覽:258
iphone4開機顯示數據線 瀏覽:867
串口工具使用方法 瀏覽:437
手機微信傳送文件到電腦 瀏覽:387
如何將文件夾中圖片導入表格中 瀏覽:171
日本appleid共享2016 瀏覽:806
台州海博網路技術有限公司 瀏覽:909
好學邦app在哪裡 瀏覽:162

友情鏈接