level 1
vida就这样了
楼主
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="phpadmin">
<script type="text/javascript" src="jquery.js"></script>
<title>无标题 2</title></head>
<style>
.gran{width:400px;height:70px;border:1px solid aqua;/*overflow:hidden;*/position:absolute;left:200px;}
ul{list-style-type: none;width:1000px;margin:0;padding:0}
li{list-style-type: none;display:inline-block;border:1px solid red;}
img{width:70px;height:70px;position: relative;top:0}
</style>
<script>
$(document).ready(function(){
$("#de").click(function(){
var lil=$("li").offset().left;
var imgl=$("img").offset().left;
if(imgl==202){
return false;
}
$("img").each(function(){
var l=$(this).offset().left+80;
$(this).offset({left:l});
})
})
$("#iz").click(function(){
var lil=$("li").offset().left;
var imgl=$("img").offset().left;
if(imgl==-278){
return false;
}
$("img").each(function(){
var l=$(this).offset().left-80;
$(this).offset({left:l});
})
})
})
</script>
<body>
<span id="iz">左边</span>
<span id="de">右边</span>
<div class="gran">
<ul>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
</ul>
</div>
</body></html>
2012年12月02日 19点12分
1
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="phpadmin">
<script type="text/javascript" src="jquery.js"></script>
<title>无标题 2</title></head>
<style>
.gran{width:400px;height:70px;border:1px solid aqua;/*overflow:hidden;*/position:absolute;left:200px;}
ul{list-style-type: none;width:1000px;margin:0;padding:0}
li{list-style-type: none;display:inline-block;border:1px solid red;}
img{width:70px;height:70px;position: relative;top:0}
</style>
<script>
$(document).ready(function(){
$("#de").click(function(){
var lil=$("li").offset().left;
var imgl=$("img").offset().left;
if(imgl==202){
return false;
}
$("img").each(function(){
var l=$(this).offset().left+80;
$(this).offset({left:l});
})
})
$("#iz").click(function(){
var lil=$("li").offset().left;
var imgl=$("img").offset().left;
if(imgl==-278){
return false;
}
$("img").each(function(){
var l=$(this).offset().left-80;
$(this).offset({left:l});
})
})
})
</script>
<body>
<span id="iz">左边</span>
<span id="de">右边</span>
<div class="gran">
<ul>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
<li><img src="ok.png"></li>
</ul>
</div>
</body></html>