窗口提示向下滚动（滑动）消失向上滚动出现代码,JS代码库,德仔网

代码语言

代码分类

【JS】窗口提示向下滚动（滑动）消失向上滚动出现

作者:王小慧 / 发布于2014/11/7/ 535

开发中的项目需要的一个小功能，整理了网上的代码，可以用作广告提示等，当页面向下滚动时提示隐藏，当页面向上滚动时提示出现，pc端和手机端都可以使用哦~因为自己的js不太好，所以里面用了jquery的淡入淡出效果，嘿嘿。


	/***********************
	* 函数：判断滚轮滚动方向
	* 参数：event
	* 返回：滚轮方向 1：向上 -1：向下
	*************************/
	var scrollFunc = function (e) {
	 var direct = 0;
	 e = e || window.event;
	 if (e.wheelDelta) {
	 direct = e.wheelDelta > 0 ? 1 : -1;
	 } else if (e.detail) {
	 direct = e.detail < 0 ? 1 : -1;
	 }
	 isShow(direct);
	}
	
	function isShow(direct) {
	 if (direct == 1) {
	 //向上显示
	 $(".guanzhuweixin-s").fadeIn();
	 var winH = $(document).height();
	 } else {
	 //向下隐藏
	 $(".guanzhuweixin-s").fadeOut();
	 }
	}
	
	//全局变量，触摸开始位置
	var startX = 0, startY = 0;
	
	//touchstart事件
	function touchSatrtFunc(evt) {
	 try {
	 var touch = evt.touches[0]; //获取第一个触点
	 var x = Number(touch.pageX); //页面触点X坐标
	 var y = Number(touch.pageY); //页面触点Y坐标
	 //记录触点初始位置
	 startX = x;
	 startY = y;
	 }
	 catch (e) {
	 alert('touchSatrtFunc：' + e.message);
	 }
	}
	
	//touchmove事件，这个事件无法获取坐标
	function touchMoveFunc(evt) {
	 try {
	 //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
	 var touch = evt.touches[0]; //获取第一个触点
	 var x = Number(touch.pageX); //页面触点X坐标
	 var y = Number(touch.pageY); //页面触点Y坐标
	 if (y - startY > 0) {
	 //向下滑
	 $(".guanzhuweixin-s").fadeIn();
	
	 } else {
	 //向上滑
	 $(".guanzhuweixin-s").fadeOut();
	 }
	 }
	 catch (e) {
	 alert('touchMoveFunc：' + e.message);
	 }
	}
	
	//touchend事件
	function touchEndFunc(evt) {
	 try {
	 //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
	
	 //var text = 'TouchEnd事件触发';
	 //document.getElementById("result").innerHTML = text;
	 }
	 catch (e) {
	 alert('touchEndFunc：' + e.message);
	 }
	}
	
	//绑定事件
	function bindEvent() {
	 document.addEventListener('touchstart', touchSatrtFunc, false);
	 document.addEventListener('touchmove', touchMoveFunc, false);
	 document.addEventListener('touchend', touchEndFunc, false);
	}
	
	//判断是否支持触摸事件
	function isTouchDevice() {
	 try {
	 document.createEvent("TouchEvent");
	 bindEvent(); //绑定事件
	 }
	 catch (e) {
	 //不支持TouchEvent事件！
	 /*注册事件*/
	 if (document.addEventListener) {
	 document.addEventListener('DOMMouseScroll', scrollFunc, false);
	 }//W3C
	 window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome
	 }
	}

	

	

	<!DOCTYPE html>
	<html>
	<head>
	 <meta charset="utf-8">
	 <script src="demo/js/jquery.js"></script>
	 <script src="showDiv.js"></script>
	 <title>显示隐藏模块</title>
	 <style>
	 #guanzhuweixin-s {
	 position: fixed;
	 bottom: 10px;
	 margin: 0 auto;
	 width: 95%;
	 height: 55px;
	 padding: 10px 0;
	 background-color: rgba(255,255,255,0.5);
	 }
	
	
	 #guanzhuweixin-s .gzbtn-s {
	 display: block;
	 width: 100%;
	 height: 35px;
	 line-height: 35px;
	 text-align: center;
	 background-color: #00a9eb;
	 color: #fff;
	 border-radius: 5px;
	 text-decoration: none;
	 }
	 </style>
	</head>
	
	<body>
	 <div>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 <h3>这是内容</h3>
	 </div>
	 <div id="guanzhuweixin-s">
	 <a class="gzbtn-s" href="html/guanzhu.html">关注无线微信号，申请免费名额</a>
	 </div>
	 <script>
	 isTouchDevice();
	 </script>
	</body>
	
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　向下滚动　　向上滚动　　窗口提示　

同语言下

可能有用的

王小慧贡献的其它代码(1)

.窗口提示向下滚动（滑动）消失向上滚动出现