手机端左右滑动,不用写js(只有页面切换到移动端可以看)

最新推荐文章于 2023-03-30 21:51:23 发布

lowers_sunshine

最新推荐文章于 2023-03-30 21:51:23 发布

阅读量2.3k

点赞数

分类专栏：移动端左右滑动

移动端左右滑动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Css步骤进度条-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
 .progress-wrap {
	margin-top:50px;
	padding:0px;
	width:100%;
	height:100px;
}
.progress-wrap li {
	margin-top:30px;
	list-style:none;
	float:left;
	width:150px;
	height:30px;
	position:relative;
}
.progress-wrap .progress-line {
	background-color:#b9b9b9;
	position:absolute;
	height:8px;
	width:100%;
	top:13px;
	margin-left:2px;
	transition:background-color 2s linear;
	-moz-transition:background-color 2s linear;
	-webkit-transition:background-color 2s linear;
	-o-transition:background-color 2s linear;
}
.progress-wrap .progress-content {
	position:absolute;
	text-align:center;
}
.progress-wrap .progress-content .progress-number {
	display:inline-block;
	*zoom:1;
	position:absolute;
	width:30px;
	height:30px;
	line-height:30px;
	color:#fff;
	border-radius:50%;
	border:2px solid rgba(224,224,224,1);
	font-family:tahoma;
	font-weight:bold;
	font-size:16px;
	background-color:#b9b9b9;
	box-shadow:1px 1px 2px rgba(0,0,0,.2) inset;
	cursor:pointer;
}
.progress-wrap .progress-content .progress-text {
	position:absolute;
	font-size:12px;
	width:30px;
	top:42px;
	color:#b9b9b9;
}
</style>
</head>
<body>
<div style="width:80%; margin:0 auto;">
    <ol class="progress-wrap">
        <li class="progress-one">
            <div class="progress-line"></div>
            <div class="progress-content">
                <span class="progress-number" id="start">1</span>
                <span class="progress-text">步骤1</span>
            </div>
        </li>
        <li class="progress-two">
            <div class="progress-line"></div>
            <div class="progress-content">
                <span class="progress-number" id="second">2</span>
                <span class="progress-text">步骤2</span>
            </div>
        </li>
        <li class="progress-three">
            <div class="progress-line"></div>
            <div class="progress-content">
                <span class="progress-number" id="third">3</span>
                <span class="progress-text">步骤3</span>
            </div>
        </li>
        <li class="progress-four">
            <div class="progress-content">
                <span class="progress-number" id="end">4</span>
                <span class="progress-text">步骤4</span>
            </div>
        </li>
    </ol>
</div>

<script>
 $(function() {
     var currentColor = '#3c3';
     var unfinishedColor = '#b9b9b9';
     var finishedColor = '#85e085';

     $('#start').click(function() {
         $(this)
             .css('background-color', currentColor)
             .next('span').css('color', currentColor)
             .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

         $('#second')
             .css('background-color', unfinishedColor)
             .next('span').css('color', unfinishedColor)
             .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

         $('#third')
             .css('background-color', unfinishedColor)
             .next('span').css('color', unfinishedColor)
             .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

         $('#end')
             .css('background-color', unfinishedColor)
             .next('span').css('color', unfinishedColor)
     })

     $('#second').click(function() {
         $(this)
             .css('background-color', currentColor)
             .next('span').css('color', currentColor)
             .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

         $('#start')
             .css('background-color', finishedColor)
             .next('span').css('color', finishedColor)
             .parent('div').prev('div.progress-line').css('background-color', currentColor)

         $('#third')
             .css('background-color', unfinishedColor)
             .next('span').css('color', unfinishedColor)
             .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

         $('#end')
             .css('background-color', unfinishedColor)
             .next('span').css('color', unfinishedColor)
     })

     $('#third').click(function() {
         $(this)
             .css('background-color', currentColor)
             .next('span').css('color', currentColor)
             .parent('div').prev('div.progress-line').css('background-color', unfinishedColor)

         $('#start')
             .css('background-color', finishedColor)
             .next('span').css('color', finishedColor)
             .parent('div').prev('div.progress-line').css('background-color', finishedColor)

         $('#second')
             .css('background-color', finishedColor)
             .next('span').css('color', finishedColor)
             .parent('div').prev('div.progress-line').css('background-color', currentColor)

         $('#end')
             .css('background-color', unfinishedColor)
             .next('span').css('color', unfinishedColor)
     })

     $('#end').click(function() {
         $(this)
             .css('background-color', currentColor)
             .next('span').css('color', currentColor)

         $('#start')
             .css('background-color', finishedColor)
             .next('span').css('color', finishedColor)
             .parent('div').prev('div.progress-line').css('background-color', finishedColor)

         $('#second')
             .css('background-color', finishedColor)
             .next('span').css('color', finishedColor)
             .parent('div').prev('div.progress-line').css('background-color', finishedColor)

         $('#third')
             .css('background-color', finishedColor)
             .next('span').css('color', finishedColor)
             .parent('div').prev('div.progress-line').css('background-color', currentColor)
     })
 })
</script>

</body>
</html>

这个是我写的一个小demo,页面处于移动端的时候,可以左右滑动.滚动条是一个伪元素,滚动条整体部分webkit-scrollbar 都设置为0,就看不到它的样式了, 在父级盒子设置 overflow: hidden; 子级盒子设置 overflow-x:auto;
white-space: nowrap;这两个属性实现了滚动效果. 当然li标签得设置的行内块级元素display:inline-block;

lowers_sunshine

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手机端左右滑动,不用写js(只有页面切换到移动端可以看)

Document * { margin:0 auto; padding:0;}::-webkit-scrollbar { width:0; height:0;}.div_div { width:100%;
复制链接

扫一扫

专栏目录