响应式jquery小效果实现思路
Posted 我分享我快乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应式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 ></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 >
<img >
</div>
</div>
</body>
</html>
以上是关于响应式jquery小效果实现思路的主要内容，如果未能解决你的问题，请参考以下文章