日期:2014-05-16  浏览次数:20650 次

请问这种效果是怎么实现的?
当浏览器收缩的时候它会出现左右滚动 可以滚动里面元素 或者里面元素的总长度大于大于外层div总长度就出现这个左右滚动的元素里


请问这种效果怎么写?希望斑竹回复下代码
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul{margin:0;padding:0;}
.box{height:30px; margin:100px auto;}
li{width:100px;height:28px;line-height:28px;text-align:center;font-size:14px; float:left;border:solid 1px #ccc; list-style:none;}
.menu{position:absolute;}
.box .pb{float:left;position:relative; overflow:hidden;height:100%;}
.box span{float:left;width:40px;height:30px; background:#FF9;line-height:30px;text-align:center;font-size:24px; cursor:pointer;}
.box .pre{left:0;top:0;}
.box .next{right:0;top:0;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){

adjustSize();
window.onresize=adjustSize;
$("#pre").click(function(){
$('ul').animate({left:0},100);
});
$("#next").click(function(){
var iLeft=$('ul').position().left;
var iUlW=$('ul').width();
var iDivW=$('ul').parent().width();
$('ul').animate({left:iDivW-iUlW},100);
});
})
function adjustSize()
{
var iWidth=0,iSpanW=0;
$('ul li').each(function(index, element) {
        iWidth+=$(this).outerWidth();
    });
$('ul').width(iWidth).css({left:0});
iSpanW=$('.pre').outerWidth();
if(iWidth+2*iSpanW>$(window).width())
{

$('.box span').show();
$('.box').width($(window).width());
$('.pb').width($(window).width()-2*iSpanW);

}
else
{
$('.pb').width(iWidth);
$('.box span').hide();
}
}
</script>

</head>

<body>
<div class="box">
<span class="pre" id="pre"><</span>
    <div class="pb">
        <ul class="menu">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <span class="next" id="next">></span>
</div>
</body>
</html>