61,112
社区成员
发帖
与我相关
我的任务
分享请问这种效果是怎么实现的？
当浏览器收缩的时候它会出现左右滚动 可以滚动里面元素 或者里面元素的总长度大于大于外层div总长度就出现这个左右滚动的元素里
请问这种效果怎么写？希望斑竹回复下代码
请问这种效果怎么写？希望斑竹回复下代码
...全文
请发表友善的回复…
发表回复
人生难得一只鸡 2014-03-24
- 打赏
- 举报
<!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>
uixnh2 2014-03-24
- 打赏
- 举报
点>>或者点<<直接滚动到尽头怎么改呢？
uixnh2 2014-03-22
- 打赏
- 举报
不是这样的 简单的说就是内容区域大于浏览器可视区时本来会出现浏览器横向的滚动条 我让它不出现 直接出现在往左往右滚动的两个按钮达到滚动效果。 如果内容区域小于浏览器可视区域则什么都不发生
人生难得一只鸡 2014-03-22
- 打赏
- 举报
<!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(){
var iLeft=$('ul').position().left;
var iDir=50;
var iUlW=$('ul').width();
var iDivW=$('ul').parent().width();
iLeft+=iDir;
if(iLeft>=0)
iLeft=0;
$('ul').animate({left:iLeft},100);
});
$("#next").click(function(){
var iLeft=$('ul').position().left;
var iDir=50;
var iUlW=$('ul').width();
var iDivW=$('ul').parent().width();
iLeft-=iDir;
if(iLeft<=iDivW-iUlW)
iLeft=iDivW-iUlW;
$('ul').animate({left:iLeft},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>
人生难得一只鸡 2014-03-21
- 打赏
- 举报
改变窗口大小查看效果
<!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>
ul{margin:0;padding:0;}
.box{ width:900px;overflow:auto;}
li{width:200px;height:30px;line-height:30px;text-align:center;font-size:14px; float:left;border:solid 1px #ccc; list-style:none;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var iWidth=0;
$('ul li').each(function(index, element) {
iWidth+=$(this).outerWidth();
});
$('ul').width(iWidth);
$(window).resize(function(){
if($(this).width()<=$(".box").width())
$(".box").width($(this).width())
});
})
</script>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
uixnh2 2014-03-21
- 打赏
- 举报
这个意思我明白 我的意思是
当你把浏览器缩小的时候内容的区域因为收缩了而有一部分就看不见了 这个时候就会出现左右滚动的图标了
如图
因为我做的横向导航还未知一共有多少项 当用低分辨率的情况下有部分的项就显示不出来了 但是会显示滚动条出来 这样就不好看了 我希望的效果是当里面的内容宽度大于可视区域 就会出现左右滚动的图标进行滚动了是这个意思
Go 旅城通票 2014-03-21
- 打赏
- 举报
单独css做不出来，要结合js
<style>
#plugin{zoom:1;overflow:auto}
#left,#right{float:left;display:none;cursor:pointer}
#content{width:100px;height:22px;overflow:hidden;border:solid 1px #f00;zoom:1;float:left}
#content .w999{width:999999px;zoom:1;overflow:hidden}
#content .item{width:48px;border:solid 1px #000;height:20px;float:left}
</style>
<div id="plugin">
<div id="left"><</div>
<div id="content">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div id="right">></div></div>
<script>
function $(id) {return document.getElementById(id);}
var content = $('content'),left,right;
if (content.scrollHeight > 22) {//出现滚动，显示左右移动的导航，需要重新修改下容器里面的内容结构
left = $('left');
right = $('right')
left.style.display = right.style.display = 'block';
var scrollLeft = 0, step = 50, itemCount = content.getElementsByTagName('div').length, maxScrollLeft = (itemCount - 2) * step;
content.innerHTML = '<div class="w999">' + content.innerHTML + '</div>';
left.onclick = right.onclick = function () {
scrollLeft += this.id == 'left' ? -step : step;
if (scrollLeft < 0) scrollLeft = 0;
else if (scrollLeft > maxScrollLeft) scrollLeft = maxScrollLeft;
content.scrollLeft = scrollLeft;
}
}
</script>