使用jquery实现上下左右移动效果
2015-05-29 12:13
831 查看
<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>
</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
效果如下:
<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
效果如下:
相关文章推荐
- jQuery 动画 - animate() 方法
- jQuery serializeArray() 方法的一些注意事项
- 9.使用原生js实现类似于jquery的动画
- 不定义JQuery插件,不要说会JQuery
- JQuery+CSS实现图片上放置按钮的方法
- springMVC,jQuery ajax传值的中文乱码处理
- 编写jQuery插件
- Jquery解析json字符串及json数组的方法
- jQuery实现返回顶部效果的方法
- jQuery $(#) id 中带符号怎么处理?jQuery $()中带特殊符号
- jquery读取xml文件实现省市县三级联动的方法
- Jquery动态添加输入框的方法
- jquery倒计时插件用法
- jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框
- 【Jquery】each中跳出函数
- js和jquery验证密码必须为字母加数字
- Jquery里面三个文档操作方法比较-empty(),detach()和remove
- Jquery之Bind方法参数传递与接收的三种方法
- Jquery之Bind方法参数传递与接收的三种方法
- jquery任意位置浮动固定层插件用法实例