建站
咨詢
售后
建站咨詢
新聞中心
jquery點擊按鈕圖片上下滾動怎么做？
!DOCTYPE html
站在用戶的角度思考問題，與客戶深入溝通，找到合江網(wǎng)站設計與合江網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務覆蓋合江地區(qū)。
html lange="en"
head
title點擊左右按鈕圖片橫向滾動/title
meta charset=utf-8" /
style type="text/css"
* { margin:0; padding:0;}
body { font-size:12px;}
.box {height:66px; float:left; width:440px; overflow: hidden; position:relative; }
.box
li { display:block; float:left; margin-left:5px; margin-right:5px;
width:100px;
height:70px;background:#BBB;font-size:50px;color:#ccc;line-height:66px;text-decoration:none;text-align:center;
cursor:pointer;}
.box li:hover { color:#999; }
.box li.active { background-position:-174px 0; color:#555;cursor:default;}
a.prev,
a.next {background:url()
no-repeat 0 0; display:block;width:23px;height:43px; float:left;
margin:15px 0 0 0; cursor:pointer;}
a.next { background-image:url()}
.scroll_list{ width:10000em; position:absolute; }
/style
!-- 引入jQuery --
script src="" type="text/javascript"/script
script type="text/javascript"
$(function(){
var page= 1;
var i = 4;//每版四個圖片
//向右滾動
$(".next").click(function(){ //點擊事件
var v_wrap = $(this).parents(".scroll"); // 根據(jù)當前點擊的元素獲取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區(qū)域
var v_cont = v_wrap.find(".box"); //找到視頻展示區(qū)域的外圍區(qū)域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的視頻圖片個數(shù)
var page_count = Math.ceil(len/i); //只要不是整數(shù)，就往大的方向取最小的整數(shù)
if(!v_show.is(":animated")){
if(page == page_count){
v_show.animate({left:'0px'},"slow");
page =1;
}else{
v_show.animate({left:'-='+v_width},"slow");
page++;
}
}
});
//向左滾動
$(".prev").click(function(){ //點擊事件
var v_wrap = $(this).parents(".scroll"); // 根據(jù)當前點擊的元素獲取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到視頻展示的區(qū)域
var v_cont = v_wrap.find(".box"); //找到視頻展示區(qū)域的外圍區(qū)域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的視頻圖片個數(shù)
var page_count = Math.ceil(len/i); //只要不是整數(shù)，就往大的方向取最小的整數(shù)
if(!v_show.is(":animated")){
if(page == 1){
v_show.animate({left:'-='+ v_width*(page_count-1)},"slow");
page =page_count;
}else{
v_show.animate({left:'+='+ v_width},"slow");
page--;
}
}
});
});
/script
/head
body
!-- 例子 --
div class="scroll" style="margin:0 auto;width:550px;"
!-- "prev page" link --
a class="prev" href="#"/a
div class="box"
div class="scroll_list"
ul
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
li8/li
li9/li
li10/li
li11/li
li12/li
li13/li
li14/li
li15/li
li16/li
/ul
/div
/div
!-- "next page" link --
a class="next" href="#"/a
/div
/body
/html
jquery.nicescroll.min.js滾動條使用方法
(摘自博客園，原網(wǎng)址)
jquery.nicescroll.min.js滾動條使用方法,Nicescroll是制作自定義滾動條的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit內核瀏覽器(chrome,safari)以及智能終端設備瀏覽器的滾動條。
頁面使用：
$("html").niceScroll({
cursorcolor:"#E62020",
cursoropacitymax:1,
touchbehavior:false,
cursorwidth:"10px",
cursorborder:"0",
cursorborderradius:"5px"
})
nicescroll詳細參數(shù)配置：
cursorcolor - 設置滾動條顏色，默認值是“＃000000”
cursoropacitymin - 滾動條透明度最小值
cursoropacitymax - 滾動條透明度最大值
cursorwidth - 滾動條的寬度像素，默認為5（你可以寫“5PX”）
cursorborder - CSS定義邊框，默認為“1px solid #FFF”
cursorborderradius - 滾動條的邊框圓角
ZIndex的 - 改變滾動條的DIV的z-index值，默認值是9999
scrollspeed - 滾動速度，默認值是60
mousescrollstep - 滾動鼠標滾輪的速度，默認值是40（像素）
touchbehavior - 讓滾動條能拖動滾動觸摸設備默認為false
hwacceleration - 使用硬件加速滾動支持時，默認為true
boxzoom - 使變焦框的內容，默認為false
dblclickzoom - （僅當boxzoom = TRUE）變焦啟動時，雙點擊框，默認為true
gesturezoom - boxzoom = true并使用觸摸設備）變焦（僅當激活時，間距/盒，默認為true
grabcursorenabled“搶”圖標，顯示div的touchbehavior = true時，默認值是true
autohidemode，如何隱藏滾動條的作品，真正的默認/“光標”=只光標隱藏/ FALSE =不隱藏
的背景下，改變鐵路背景的CSS，默認值為“”
iframeautoresize中，AUTORESIZE iframe上的load事件（默認：true）
cursorminheight，設置最低滾動條高度（默認值：20）
preservenativescrolling，您可以用鼠標滾動本地滾動的區(qū)域，鼓泡鼠標滾輪事件（默認：true）
railoffset，您可以添加抵消頂部/左軌位置（默認：false）
bouncescroll，使?jié)L動反彈結束時的內容移動（僅硬件ACCELL）（默認：FALSE）
spacebarenabled，允許使用空格鍵滾動（默認：true）
railpadding，設置間距（默認：頂：0，右：0，左：0，底部：0}）
disableoutline，Chrome瀏覽器，禁用綱要（橙色hightlight）時，選擇一個div nicescroll（默認：true）
如何讓jquery動畫效果在屏幕滾動到指定位置才執(zhí)行
1、新建一個html文件，命名為test.html。
2、在test.html文件內，使用div標簽創(chuàng)建一個模塊，并設置其id為mycss。
3、在css標簽內，定義div的樣式，設置其寬度為100px，高度為2000px，背景顏色為粉紅色。
4、在js標簽內，使用scroll()方法監(jiān)聽頁面的滾動條，并執(zhí)行function方法。
5、在function方法內，使用if語句判斷，當前滾動的位置（scrollTop()）是否到達頁面的底部（$(document).height()-$(window).height()），如果到達頁面底部，提示“已經(jīng)到底部了”。
求助 jquery點擊只能滾動一次？？
你好，你需要先明確一個問題，當執(zhí)行jQuery的animate方法的時候，是指從元素當前狀態(tài)平滑過渡到指定狀態(tài)。
當你第一次點擊的時候，當前狀態(tài)是 ?top = 0 ?所以，.page元素的 top 會從 0 變化為 -200px
而當你再次點擊時，當前狀態(tài)的 ?top = -200px ?了，.page元素的 top 從 -200px 變化為 -200px 自然是沒反應的。
如果你是想實現(xiàn)每點一次，.page 元素的 top 值都減小 200px，那么可以這么寫：
$(".down").click(function()?{
var?page?=?$('.page'),
top?=?parseInt(page.css('top'));
top?=?isNaN(top)???-200?:?top?-?200;??????????????
$(".page").stop().animate({top:?top?+?'px'},?800,?'easeInOutExpo');
});
希望能幫你解決問題，如有疑問歡迎追問，望采納~~
分享題目：jquery點擊滾動,jquery上下滾動
鏈接URL：http://www.dlmjj.cn/article/dsigecj.html
