获取滚动值实现简单的布局：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取滚动值案例</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.content{
width: 100%;
height: 60px;
background: rgba(160,3,162,0.1);
box-shadow: 1px 3px 7px #ccc;
line-height: 60px;
position: fixed;
}
.content_2{background: rgba(160,3,162,0.4)}
form {
width: 500px;height: 35px;
position: relative;
margin: 0 auto;
}
input{
width:480px;height: 35px;
border-radius: 20px;
border:none;
outline: none;
padding-left:20px;
}
button{
width: 70px;height:35px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border: none;
color: #fff;
position: absolute;right:0;top:12px;
outline: none;
font-weight: bold;
background: rgba(160,3,162,0.4);
}
.pic{
width: 70%;height: 580px;
background: url(static/images/1.jpg);
margin: 0 auto;
}
.details{
width: 70%;height:1200px;
background:rgba(108,108,106,0.1);
margin: 0 auto;
}
</style>
</head>
<body>
<!--导航栏-->
<div class="content">
<form action="">
<input type="text" placeholder="请输入关键字~">
<button>搜素</button>
</form>
</div>
<!--轮播图-->
<div class="pic"></div>
<!--页面详情-->
<div class="details"></div>
<script>
$(function () {
// scroll 事件 当用户滚动指定的元素时触发
$(window).scroll(function () {
// 获取浏览器滚动条到顶部的垂直高度
if($(window).scrollTop()>60){
$('.content').css('display','none')
}else{
$('.content').css('display','block')
}
if($(window).scrollTop()>580){
$('.content').addClass('content_2').css('display','block')
}else{
$('.content').removeClass('content_2')
}
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
加入购物车案例：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击商品选中效果</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--<script src = "static/js/jquery-3.3.1.min.js"></script>-->
<style>
* {margin: 0 auto;padding: 0px;}
.top {
width: 402px;height: 35px;
line-height: 35px;
text-align:center;
margin-top: 50px;
background: #C40000;
color:#fff;
}
.main {
width: 400px;height: 400px;
border: 1px solid #C40000;
}
p {
width: 400px;height: 26px;
margin-top:10px;
}
b {
width: 90px;height: 26px;
line-height: 26px;
text-align: center;
font-size: 12px;color:#838383;
border: 1px solid #ccc;
float: left;
margin-left: 5px;
}
span {
width: 90px;height: 26px;
line-height: 26px;
text-align: center;
font-size: 12px;color:#838383;
border: 1px solid #ccc;
display: block;
float: left;
margin-left: 5px;
}
span:hover {cursor: pointer;}
button {
width: 120px;height: 35px;
background: #C40000;
color: white;
border: 0;
}
button:hover {cursor: pointer;}
.notice{
border:0px;
}
.select{
border:2px solid #C40000;
width: 88px;
height: 24px;
line-height: 24px;
color: red;
}
</style>
</head>
<body>
<div class="top">请选择信息后加入购物车</div>
<div class="main">
<p class="item" name="version">
<b class="notice">版本</b>
<span>ONE A2001</span>
<span>ONE A0001</span>
<span>ONE A1001</span>
</p>
<p class="item" name="color">
<b class="notice">机身颜色</b>
<span>白色</span>
<span>黑色</span>
<span>金色</span>
</p>
<p class="item" name="type">
<b class="notice">套餐类型</b>
<span>标配</span>
<span>套餐一</span>
<span>套餐二</span>
</p>
<p class="item" name="ram">
<b class="notice">运行内存</b>
<span>2GB</span>
<span>3GB</span>
<span>4GB</span>
</p>
<p class="item" name="rom">
<b class="notice">机身内存</b>
<span>16GB</span>
<span>32GB</span>
<span>64GB</span>
</p>
<p class="item" name="location">
<b class="notice">产地</b>
<span>中国大陆</span>
<span>港澳台</span>
</p>
<p class="item" name="price">
<b class="notice">价格</b>
<span>999元抢购</span>
</p>
<p class="item1" name="num">
<b class="notice">数量</b>
<input type="number" value="1" style="width:40px;height:26px;">
</p>
<p style="margin-top:30px;margin-left:95px;">
<button class="bu1" id='sub'>加入购物车</button>
</p>
</div>
<script>
$(function() {
$('span').click(function(){
if($(this).hasClass('select')){// 匹配span中是否带有class为select
$(this).removeClass('select');//含有就清除
}else{
// 没有就添加上select的class名，同时匹配同级span，清除同级其他span中的选中样式
$(this).addClass('select').siblings('span').removeClass('select');
}
});
$('#sub').click(function () {
let form = {}; //创建空对象
let flag = true; //判断能否加入购物车
// 判断p标签里面的span是否被选择
$('.item').each(function () {
if ($(this).children('span.select').length != 1){
alert('请选择: ' + $(this).children('b').html());
flag = false;
return flag;
}else {
let key = $(this).attr('name');
let v = $(this).children('span.select').html();
form[key] = v;
}
});
if ($('.item1 input').val() <= 0){
alert('数量最少为1')
}else {
form['num'] = $('.item1 input').val();
console.log(form);
}
if (flag){
alert('加入购物车成功！');
}
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
