简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery获取滚动值案例与点击商品选中效果(控制台输出商品详情)的实现-2019/1/23 14:15
Blogger Information
Blog 5
fans 0
comment 0
visits 3201
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery获取滚动值案例与点击商品选中效果(控制台输出商品详情)的实现-2019/1/23 14:15
王jc的博客
Original
577 people have browsed it

一、获取滚动值案例

实例

<!DOCTYPE html>
<html>
<head>
  <title>获取滚动值案例</title>
  <link rel="icon" type="image/x-icon" href="images/2.png"> 
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <style type="text/css">
      *{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;order:none; 
            border-top-right-radius: 20px;border-bottom-right-radius: 20px;border: none;
            color: #fff;position: absolute;right:0;top:14px;
            outline: none;font-weight: bold;
            background: rgba(160,3,162,0.4);
          }
      [placeholder]{color:rgba(160,3,162,0.6)}
      .pic{width: 70%;height: 580px;background: url(images/3.jpg);margin: 0 auto;}
      .box{width: 70%;height:1200px;background:rgba(108,108,106,0.1);margin: 0 auto; }
   </style>

</head>
<body> 
<!-- 顶部导航 -->
 <div class="content">
   <form>
    <input type="text" placeholder="# 请输入关键词 #">
    <button>全网搜</button>
  </form>
 </div>
 <!-- 轮播图 -->
 <div class="pic"></div>
 <!-- 页面详情 -->
 <div class="box"></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>
<head>
<title>点击商品选中效果</title>
<meta charset="utf-8"/>
 <link rel="icon" type="image/x-icon" href="images/2.png"> 
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <style type="text/css">
	* {margin: 0px 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: 0px;}
	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')){
				  $(this).removeClass('select');//点击选中的span变为不选中
			  }else {
				$(this).addClass('select').siblings('span').removeClass('select');//将点击的span添加select，它的所有兄弟删除select
			  }
		  })

		  //实现控制台输出商品详情
		  $('#sub').click(function(){
			  var product = {};
			  var i = 0;
			  $('.item').each(function (){
				if ($(this).children('.select')[0]){
					product[$(this).attr('name')] = $(this).children('.select')[0].innerText;//获得商品的***信息
					i++;
				}
			  })
			  
			  if (i == $('.item').length){//说明所有购物信息都选择了
				  if ($('.item1').children('input')[0].value > 0){//说明***数量大于0
					product[$('.item1').attr('name')] = $('.item1').children('input')[0].value;//获得商品的***数量
					alert('加入购物车成功');
					console.log(product);
				  }else{
					// alert('***数量必须大于0');
				  }
			  }else{
				//   alert('只有所有购物信息都选择才能加入购物车');
			  }
		  })
	  })
  </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！