响应式jquery小效果实现思路
以下文章来源于我分享我快乐 ，作者段惠勇
分享健康分享快乐
有很多同学在实现jquery效果时，不知道怎样符合响应式布局。我写了个小案例，帮大家找找思路，希望能帮到你。
效果如下：
代码如下：
<!doctype html>
<html>
<head>
<style>
body{margin:0;}
.box{width:48%;/*图片原宽度为480像素*/overflow:hidden;background-color:black;}
.img_box{width:200%;/*两张图就是960像素*/overflow:hidden;}
.img_box img{width:50%;/*每张图占960像素的一半*/display:block;float:left;}
</style>
<script src="jquery.js"></script>
<script>
$(function(){
var n=0;
function run(){
if(n<1){
n=n+1;
}else{
n=0;
}
/*获得图片的宽度*/
var imgW = $(".img_box img:first").width();
/*将图片宽度作为动画补间距离*/
$(".img_box").animate({marginLeft:-imgW*n},1000);
}
setInterval(run,2000);
})
</script>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class="box">
<div class="img_box">
<img src="images/low_banner01.png">
<img src="images/low_banner02.png">
</div>
</div>
</body>
</html>