jq左右按钮控制内容左右移动

html内容

</div>
</div>
<button id="rightMove">》</button>
</div>

css设置

.cWrap ,.cWrap div {
   display: inline-block;
   margin: 0;
   padding: 0;

}
.cWrap{

width: 500px;
   height: 30px;
   overflow: hidden;
}
.cWrap>div{
   width:1200px;

transition: 0.5s all ease;

}
.cWrap>div>div{
   width: 200px;
   height: 30px;
   border: 1px solid black;
}
#leftMove,#rightMove{
   margin: 0;
   padding: 0;

}

js内容

//橱窗左右移动按钮

//x从0开始，++和--的位置可以规避可能出现在终点值附近的点击不动情况

var x=0;
$("#leftMove").click(function(){
   x++;
   console.log(x);
   var p=-200;
   var xp=x*p+"px";
   $(".cWrap").children("div").css("margin-left",xp);

x=x>3?3:x;
})

$("#rightMove").click(function(){
   console.log(x);
   var p=-200;
   var xp=x*p+"px";
   $(".cWrap").children("div").css("margin-left",xp);
   x--;
   x=x<0?0:x;
})

用jq 动画写

//用jq动画animate设置无法限制终止点，还需要加判定才能设置终点
$("#leftMove").click(function(){
console.log("x");
$(".cWrap").children("div").animate({marginLeft:'-=200px'},500);
});
$("#rightMove").click(function(){
console.log("x");
$(".cWrap").children("div").animate({marginLeft:'+=200px'},500);
});

jq左右按钮控制内容左右移动相关推荐

用按钮控制歌单的上一曲和下一曲 0130 winform
用按钮控制歌单的上一曲和下一曲 0130 winform 思路定义一个歌曲类来一个歌曲对象数组(动态数组) 来一个下标记录当前歌曲索引值如上一曲被点击,下标- 如果下一曲被点击,下标+ 关键代码 ...
html 5音乐界面控制,使用按钮控制HTML5背景音乐开关
演示:使用按钮控制HTML5背景音乐开关你的浏览器不支持audio标签. $("#audio_btn").click(function() { var music = docum ...
使用按钮控制HTML5背景音乐开关
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
php点击复制按钮到我的粘贴板,JS 实现点击按钮复制内容到粘贴板 clipboard
具体实现如下: 点击按钮复制内容到粘贴板 body { text-align: center; } #p1 { line-height: 150px; font-size: 40px; } #sour ...
11种控制内容展示的JavaScript特效和技巧
交付信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容. 不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它.本文里面,我们为你收 ...
flash一个按钮控制动画_flutter闪屏过渡动画，闪光占位动画
在程序设计的理念中,讲究一切都来源于物理世界,在现实世界中,人们在每接触到一个新的事物或者说在手指触碰到一个事物时,总是心里默许期望有一个反馈效果,这就是来源于心底深处常常被人忽略的一个潜在期望. 在 ...
flash一个按钮控制动画_PLC三组灯用一个按钮控制
今天作一个PLC小练习用一个按钮控制三组或三个灯,以达到控制灯的亮度,由PLC组成一个控制器,每按一次按钮增加一组灯亮,三组灯全亮后,每按一次按钮,灭一组灯(为了使每组灯亮的时间尽量相等,要求先亮的 ...
基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
swiper切换按钮位置改变_2019-01-18左右按钮控制swiper轮播图切换
今天需要实现一个左右按钮控制轮播图滚动的效果! image.png 思路:我们可以尝试获取并改变current的值: 这是swiper滑动视图容器的说明 image.png image.png 这是w ...

jq左右按钮控制内容左右移动

jq左右按钮控制内容左右移动相关推荐

最新文章

热门文章