html js 下拉刷新

最新推荐文章于 2025-07-04 10:34:25 发布

原创最新推荐文章于 2025-07-04 10:34:25 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #css

引入文件 scroll.refresh.css

        .scroll_refresh_grid{
            margin-left: 0;
            padding: 0;
            text-align: center;
            margin-top:-90px;
        }

        .scroll_refresh_grid li{
            width: 50px;
            height: 50px;
            display: inline-block;
			
			animation-duration: 1s; 
			animation-fill-mode: both; 
			animation-iteration-count: infinite; 
			transform-origin: center bottom 0px; 
			cursor: pointer;
        }

        .scroll_refresh_item{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            -webkit-box-shadow: inset 0 0 0 12px rgba(200,200,200,0.6),
            0 1px 2px rgba(0,0,0,0.1);
            -moz-box-shadow: inset 0 0 0 12px rgba(200,200,200,0.6),
            0 1px 2px rgba(0,0,0,0.1);
            box-shadow: inset 0 0 0 12px rgba(200,200,200,0.6),
            0 1px 2px rgba(0,0,0,0.1);
            transform-origin:50% 50%; /*设置旋转中心为元素中心。*/
            transform: rotate(180deg);
			
            background-image:url('templates/mmfuploadimg/images/efb73e.png');
            background-size:100% auto;

            -webkit-transition: all 0.4s ease-in-out;
            -moz-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
            -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
        }

        .scroll_refresh_item:hover{
            -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5),
            0 1px 2px rgba(0,0,0,0.5);
            -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5),
            0 1px 2px rgba(0,0,0,0.5);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5),
            0 1px 2px rgba(0,0,0,0.5);
        }

        .scroll_refresh_item:hover .scroll_refresh_info{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        .scroll_refresh_info{
            background: rgba(250,84,46, 0.8);
            width: inherit;
            height: inherit;
            border-radius: 50%;
			transform: scale(0); 
			opacity: 1;

            -webkit-transition: all 0.4s ease-in-out;
            -moz-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
            -o-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;

            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -ms-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0);
            opacity: 0;
        }

        /* 美化一下文字 */
        .scroll_refresh_info h6 {
            color: #fff;
            /*font-size: 32px;
            margin: 0 50px;*/
            padding: 16px 0 0 0;
            font-family: 'microsoft yahei';
            font-weight:normal;
        }

		
        @-webkit-keyframes buzz-out {
            0%,
            100%,
            20%,
            50%,
            80% {
                transition-timing-function: cubic-bezier(0.215,0.61,0.355,1); /*贝塞尔曲线 ： X1 Y1 X2 Y2*/
                transform: translate3d(0,0,0); /*设置只在Z轴上移动*/
            }
            40%,
            43%{
                transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
                transform: translate3d(0,-30px,0);
            }
            70%{
                transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
                transform: translate3d(0,-15px,0);
            }
            90%{
                transform: translate3d(0,-4px,0);
            }
        }

scroll.refresh.js

var callbakFun;
var scrollRefresh = {
	init:function(callbak){
		callbakFun = callbak;
		this.load();
	},
	load:function(){
		var outerScroller = document.querySelector('html');
		var touchStart = 0;
		var scroll_refresh_grid;
		var mar_top = -90;
		var touchPageY = 0;
		var deg = 180;//旋转度数
		var scale = 0;//放大beis
		var opacity = 0;//透明度
		outerScroller.addEventListener('touchstart', function(event) {
			var touch = event.targetTouches[0];
			// 把元素放在手指所在的位置
			touchStart = touch.clientY;
			touchPageY = touchStart;
		}, false);
		outerScroller.addEventListener('touchmove', function(event) {
			var touch = event.targetTouches[0];
			touchStart = touch.clientY;

			scroll_refresh_grid = $(".scroll_refresh_grid");
			mar_top = parseInt(scroll_refresh_grid.css("margin-top"));
			if(touchStart > touchPageY){
				if(mar_top <= -30){
					mar_top = parseInt(mar_top) + parseInt(touchStart) - parseInt(touchPageY);
					if(mar_top > -30){
						mar_top = -30;
						$(".scroll_refresh_grid li").css("animation-duration","1s");
						$(".scroll_refresh_grid li").css("animation-fill-mode","both");
						$(".scroll_refresh_grid li").css("animation-name","buzz-out");
						$(".scroll_refresh_grid li").css("animation-iteration-count","infinite");
						$(".scroll_refresh_grid li").css("transform-origin","center bottom");
						$(".scroll_refresh_grid li").css("cursor","pointer");
						
						$(".scroll_refresh_item").css("-webkit-box-shadow","inset 0 0 0 1px rgba(255,255,255,0.5)");
						$(".scroll_refresh_item").css("-moz-box-shadow","inset 0 0 0 1px rgba(255,255,255,0.5)");
						$(".scroll_refresh_item").css("-box-shadow","inset 0 0 0 1px rgba(255,255,255,0.5)");

						$(".scroll_refresh_info h6").html("刷新");
					}
					scroll_refresh_grid.css("margin-top",mar_top);
					deg += 3 * (parseInt(touchStart) - parseInt(touchPageY));
					scale += 0.017 *(parseInt(touchStart) - parseInt(touchPageY));
					if(deg > 360) deg = 360;
					if(scale > 1) scale = 1;
					opacity = scale;
					$(".scroll_refresh_item").css("transform","rotate("+deg+"deg)");
					$(".scroll_refresh_info").css("-webkit-transform","scale("+scale+")");
					$(".scroll_refresh_info").css("-moz-transform","scale("+scale+")");
					$(".scroll_refresh_info").css("-ms-transform","scale("+scale+")");
					$(".scroll_refresh_info").css("-o-transform","scale("+scale+")");
					$(".scroll_refresh_info").css("transform","scale("+scale+")");
					$(".scroll_refresh_info").css("opacity",opacity);
				}
			}else{
				if(mar_top > -90){
					scroll_refresh_grid.css("margin-top",parseInt(mar_top) - parseInt(touchPageY) + parseInt(touchStart));
					deg -= 3 * (parseInt(touchPageY) - parseInt(touchStart));
					scale -= 0.017 * (parseInt(touchPageY) - parseInt(touchStart));
					if(deg < 180) deg = 180;
					if(scale < 0) scale = 0;
					opacity = scale;
					if(mar_top <= -33){
						$(".scroll_refresh_item").css("transform","rotate("+deg+"deg)");
						$(".scroll_refresh_info").css("-webkit-transform","scale("+scale+")");
						$(".scroll_refresh_info").css("-moz-transform","scale("+scale+")");
						$(".scroll_refresh_info").css("-ms-transform","scale("+scale+")");
						$(".scroll_refresh_info").css("-o-transform","scale("+scale+")");
						$(".scroll_refresh_info").css("transform","scale("+scale+")");
						$(".scroll_refresh_item").css("-webkit-box-shadow","inset 0 0 0 12px rgba(200,200,200,0.6), 0 1px 2px rgba(0,0,0,0.1)");
						$(".scroll_refresh_item").css("-moz-box-shadow","inset 0 0 0 12px rgba(200,200,200,0.6), 0 1px 2px rgba(0,0,0,0.1)");
						$(".scroll_refresh_item").css("-box-shadow","inset 0 0 0 12px rgba(200,200,200,0.6), 0 1px 2px rgba(0,0,0,0.1)");
						$(".scroll_refresh_info").css("opacity",opacity);
						$(".scroll_refresh_grid li").css("animation-name","");
						$(".scroll_refresh_info h6").html("下拉");
					}
					$('body').scrollTop(0);
				}
			}
			touchPageY = touch.clientY;
		}, false);
		outerScroller.addEventListener('touchend', function(event) {
			mar_top = parseInt(scroll_refresh_grid.css("margin-top"));
			if(mar_top > -31){
				callbakFun();
			}
			deg = 180;
			scale = 0;
			opacity = 0;
			$(".scroll_refresh_grid").animate({
				"margin-top":"-90px"
			},200);
			$(".scroll_refresh_item").css("transform","rotate(180deg)");
			$(".scroll_refresh_info").css("-webkit-transform","scale(0)");
			$(".scroll_refresh_info").css("-moz-transform","scale(0)");
			$(".scroll_refresh_info").css("-ms-transform","scale(0)");
			$(".scroll_refresh_info").css("-o-transform","scale(0)");
			$(".scroll_refresh_info").css("transform","scale(0)");
			$(".scroll_refresh_item").css("-webkit-box-shadow","inset 0 0 0 12px rgba(200,200,200,0.6), 0 1px 2px rgba(0,0,0,0.1)");
			$(".scroll_refresh_item").css("-moz-box-shadow","inset 0 0 0 12px rgba(200,200,200,0.6), 0 1px 2px rgba(0,0,0,0.1)");
			$(".scroll_refresh_item").css("-box-shadow","inset 0 0 0 12px rgba(200,200,200,0.6), 0 1px 2px rgba(0,0,0,0.1)");

			$(".scroll_refresh_grid li").css("animation-name","");
		}, false);
	}
}

html 页面加入

<body>
    <ul class="scroll_refresh_grid">
        <li>
            <div class="scroll_refresh_item">
                <div class="scroll_refresh_info">
                    <h6>刷新</h6>
                </div>
            </div>
        </li>
    </ul>
</body>

使用方式：

	//下拉刷新
	scrollRefresh.init(callcab);
	
	function callcab(){
		console.log("Refresh function");
	}