简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jquery实现商品点击效果的实现与获得滚动值案例的练习——2019年1月22日
Blogger Information
Blog 40
fans 1
comment 0
visits 32449
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月22日
李明伟的博客
Original
566 people have browsed it

jquery实现商品点击效果的实现与获得滚动值案例的练习

滚动值案例——


实例

<!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(){
      //  scrollTop用于获取滚动条到顶部的垂直高度（即网页被卷上去的高度）
        if($(window).scrollTop()>60)
        $(".content").hide();
        else
        $('.content').show();
        if($(window).scrollTop()>580){
          $('.content').addClass('content_2').show();
        }else{
          $('.content').removeClass('content_2');
        }
     })
   })
 </script>
</body>
</html>

运行实例 »

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

知识要点：1. scroll()——当用户滚动指定的元素时，会发生 scroll 事件。
                     scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

                 2. scrollTop()——scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置（即：滚动条最上方与该元素顶部                                                 的距离）。
                                             输入参数比如： $(window).scrollTop(100)，将垂直位置设置为100px;
                                             不输入参数比如： $(window).scrollTop(100)，返回匹配元素的滚动条的垂直位置。

                 3. addClass——添加类

                 4.removeClass——删除类

                 5.window——用户所看到的浏览器窗口（document是HTML文档本身，两者有区别）

用jquery实现商城点击效果

实例

<!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 red;
			width: 88px;
			line-height: 24px;
			color: red;
			height: 24px;
		}
	</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为selected
					$(this).removeClass('select'); //含有就清除
				} else {
					$(this).addClass('select').siblings('span').removeClass('select');
				}
			})
			let i, n;
			$('.bu1').click(function () {
				//alert('1');
				n = 0;
				for (i = 0; i < $(".item").length; i++) {
					// console.log(i);
					// console.log($(".item:eq(" + i + ") span").length);
					for (var j = 0; j < $(".item:eq(" + i + ") span").length; j++) {
						// console.log($(".item:eq("+i+") span").length);
						if ($(".item:eq(" + i + ")" + " span:eq(" + j + ")").hasClass('select')) {
							n++;
						}
					}
				}
				console.log(n);
				if (n === $(".item").length)
					alert('加入购物单');
			})
		})
	</script>
</body>

</html>

运行实例 »

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

难点：sibling——获取同级元素

            eq不能识别变量——使用字符串拼接的方法解决。



Correction status：Uncorrected

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！