使用jquery實現上下左右移動效果
阿新 • • 發佈：2019-01-04
<body>
<div style="margin:0 auto;width:500px;">
<div id="scrollable">
<a class="prev" href="#"></a>
<!-- 外部div使用相對定位，裡面的div使用絕對定位 -->
<div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;">
<div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
<a>9</a>
<a>10</a>
<a>11</a>
<a>12</a>
<a>13</a>
<a>14</a>
<a>15</a>
</div>
<br clear="all"/>
</div>
<!-- "prev page" link -->
<a class="next" href="#"></a>
</div>
</div>
<div style="margin:0 auto;width:500px;">
<div id="scrollable">
<a class="prev" href="#"></a>
<!-- 外部div使用相對定位，裡面的div使用絕對定位 -->
<div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 478px;">
<div style="position: absolute; width: 200000em; left: 0px;" class="scrollable_demo">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
<a>9</a>
<a>10</a>
<a>11</a>
<a>12</a>
<a>13</a>
<a>14</a>
<a>15</a>
</div>
<br clear="all"/>
</div>
<!-- "prev page" link -->
<a class="next" href="#"></a>
</div>
</div>
</body>
js:
$(function(){
var $content = $(".scrollable_demo");
var i = 5; //已知顯示的<a>元素的個數
var m = 5; //用於計算的變數
var count = $content.find("a").length;//總共的<a>元素的個數
$(".next").click(function(){
if( !$content.is(":animated")){ //判斷元素是否正處於動畫，如果不處於動畫狀態，則追加動畫。
if(m<count){ //判斷 i 是否小於總的個數
m++;
$content.animate({left: "-=96px"}, 600);
}
}
});
$(".prev").click(function(){
if( !$content.is(":animated")){
if(m>i){ //判斷 i 是否小於總的個數
m--;
$content.animate({left: "+=96px"}, 600);
}
}
});
})
需引入：jquery.js
效果如下:
