建站
咨詢
售后
建站咨詢
新聞中心
如何使用jquery實現(xiàn)文字上下滾動效果
div內(nèi)嵌套個div父div溢出隱藏子div設(shè)置相對定位然后用jquery控制子div的top值（animate()）讓他移出去。
成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計制作、成都網(wǎng)站制作與策劃設(shè)計,內(nèi)丘網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:內(nèi)丘等地區(qū)。內(nèi)丘做網(wǎng)站價格咨詢:18982081108
jquery控制上下滾動
已經(jīng)測試過沒有問題,我用的是JQ1.7版本,直接代碼COPY過去就行.
html
head
style type="text/css"
#parent{
height:100px;width:200px;overflow: hidden;border:1px solid #000;
}
#parent div input{
position: absolute;z-index:1;height:20px;width:200px;
}
#inner{
margin: 20px 0px;
}
/style
script type="text/javascript" src="js/jquery-1.7.js"/script
script type="text/javascript"
$(function(){
var up=$("#parent input").eq(0);
var down=$("#parent input").eq(1);
var inner=$("#inner");
up.click(function(){
if(parseInt(inner.css("marginTop"))parseInt($("#parent").css("height"))-parseInt(inner.css("height"))+20){
up.attr("disabled","disabled").css("color","red");;
}else{
down.removeAttr("disabled").css("color","#000");
inner.css("marginTop","-=12px");
}
});
down.css("top","90px").click(function(){
if(parseInt(inner.css("marginTop"))=20){
down.attr("disabled","disabled").css("color","red");;
}else{
up.removeAttr("disabled").css("color","#000");;
inner.css("marginTop","+=12px");
}
});
});
/script
/head
body
div id=parent
divinput type=button value="up" /div
div id="inner"12334534554br/
645567567567568br/
6786789789gfhdfbr/
ghdfghdfghdfghdfgbr/
12334534554br/
645567567567568br/
6786789789gfhdfbr/
ghdfghdfghdfghdfgbr/
12334534554br/
645567567567568br/
6786789789gfhdfbr/
ghdfghdfghdfghdfgbr/
12334534554br/
645567567567568br/
6786789789gfhdfbr/
ghdfghdfghdfghdfgbr/
12334534554br/
645567567567568br/
/div
divinput type=button value="down"/div
/div
/body
/html
jquery效果:DIV隨瀏覽器滾動條上下移動
這個不難弄···
事先獲取div的offset和它的高度··然后加起來··然后你在$(window).scroll(function(){});中判斷當(dāng)前滾動的高度是否等于高度+offset.top·如果等于的話·你就把div設(shè)置為position:fixed;
然后再給它一個top就可以了
jquery點擊按鈕圖片上下滾動怎么做？
!DOCTYPE html
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ù)當(dāng)前點擊的元素獲取到父元素
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ù)當(dāng)前點擊的元素獲取到父元素
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
網(wǎng)頁標題：上下滾動jquery,上下滾動怎么做
標題路徑：http://www.ef60e0e.cn/article/dscdscj.html
