js实现全屏滚动进度条

jQuery.fn.extend({
ShowProgress: function (msg, top, proffset, widthX, heightX) {
if (msg == null)
msg = "Loading Data......";
if (top == null)
top = 0;
if (proffset == null)
proffset = 0;

var height = 0;
var width = 0;
if (heightX != undefined && heightX != null)
height = heightX;
else
height = parseFloat($(this).css("height"));

if (widthX != undefined && widthX != null)
width = widthX;
else
width = parseFloat($(this).css("width"));
var innerHtml = ‘<div id="‘ + $(this).attr("id") + ‘-cover" class="my-poor-ms-element" style="width:‘ + width.toString() + ‘px;height:‘ + height.toString() + ‘px;border-radius: 0px;left: 0px;top:‘ + top + ‘px;position: absolute;z-index: 999;"></div>‘;
innerHtml += ‘<div id="‘ + $(this).attr("id") + ‘-progress" style="height: 70px;width: 250px;position: absolute;left:‘ + (width / 2 - 125) + ‘px;top:‘ + ((height / 2 - 35) + top + proffset) + ‘px;z-index: 99999;">‘;
innerHtml += ‘ <span style="color: White;margin-left: auto;margin-right: auto;font-size: 14px;left: 50px;">‘ + msg + ‘</span>‘;
innerHtml += (‘ <img src="../..‘ + $RawUrl + ‘/Content/Image/loading.gif" />‘);
innerHtml += ‘</div>‘;
var cover = $(innerHtml);
cover.appendTo(this);
},
CloseProgress: function () {
$("#" + $(this).attr("id") + "-cover").remove();
$("#" + $(this).attr("id") + "-progress").remove();
},
//重新写的Show方法,进度条随着proffset var proffset = document.documentElement.scrollTop;进行变化
ShowProgress_New: function (msg, top, proffset, widthX, heightX) {
if (msg == null)
msg = "Loading Data......";
if (top == null)
top = 0;
if (proffset == null)
proffset = 0;

var height = 0;
var width = 0;
if (heightX != undefined && heightX != null)
height = heightX;
else
height = parseFloat($(this).css("height"));

if (widthX != undefined && widthX != null)
width = widthX;
else
width = parseFloat($(this).css("width"));
var innerHtml = ‘<div id="‘ + $(this).attr("id") + ‘-cover" class="my-poor-ms-element" style="width:‘ + width.toString() + ‘px;height:‘ + height.toString() + ‘px;border-radius: 0px;left: 0px;top:‘ + top + ‘px;position: absolute;z-index: 999;"></div>‘;
innerHtml += ‘<div id="‘ + $(this).attr("id") + ‘-progress" style="height: 70px;width: 250px;position: absolute;left:‘ + (width / 2 - 125) + ‘px;top:‘ + (top + proffset) + ‘px;z-index: 99999;">‘;
innerHtml += ‘ <span style="color: White;margin-left: auto;margin-right: auto;font-size: 14px;left: 50px;">‘ + msg + ‘</span>‘;
innerHtml += (‘ <img src="../..‘ + $RawUrl + ‘/Content/Images/loading.gif" />‘);
innerHtml += ‘</div>‘;
var cover = $(innerHtml);
cover.appendTo(this);
}
}
);

------------------------------------

调用:

var virtualPath = "@(Request.ApplicationPath)"; // ‘/EI‘
$RawUrl = "";
if (virtualPath != "/") {
$RawUrl = virtualPath;
}

var proffset = document.documentElement.scrollTop;
var winwidth = document.documentElement.offsetWidth;
var winHeight = document.documentElement.scrollHeight;
$("#form").ShowProgress_New(null, null, proffset + 300, winwidth, winHeight);

时间: 2024-11-05 14:59:01

js实现全屏滚动进度条的相关文章

原生js实现全屏滚动

原生js实现全屏滚动(firefox兼容性问题还没解决) 最近发现刷前端在线简历,发现许多人都使用了全屏滚动特效 所以今天特意来实现一下 css样式:* { margin: 0; padding: 0;}h1 { width: 200px; height: 200px; margin: 0 auto;}div{ overflow: hidden; position: absolute;}.show { display: block;} /*第一页*/#one { background: red;

[分享]数字插件countUp.js和全屏滚动插件fullPage.js

分享两款js插件 1:数字插件countUp.js 项目github地址:http://inorganik.github.io/countUp.js/ 2:全屏滚动插件:fullPage.js 项目github地址:https://github.com/alvarotrigo/fullPage.js 示例地址:https://alvarotrigo.com/fullPage/ 原文地址:https://www.cnblogs.com/many-object/p/8405935.html

自己用js实现全屏滚动

参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改成react组件 2.实现更多的效果 注释写的很清楚,基本上知道函数怎么用就可以了.有想法这东西就很简单. 这里偷懒使用了我之前写过的一个运动框架(其实就是一个函数),稍加修改就可以在这上面使用.框架相关:点击这里 注释非常详细了,就不说其他的了.直接上代码: 1 <!DOCTYPE html>

fullpage.js jq全屏滚动插件

fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下载查看http://www.dowebok.com/77.html) 一.fullPage.js实现全屏 fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js 1.基本演示 1.1 引入文件 <!-

全屏滚动效果H5FullscreenPage.js

前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto.js 功能清单: 1 快速实现页面全屏滚动效果.并提供多种翻页效果,兼容大部分ios和android系统. 2 支持在页面中添加多种动画元素效果 来实现淡入,滑入等效果. 3 支持配置音乐功能. 4 支持摇一摇接口功能. 组件核心代码原理: 1 页面滚动 在移动页面上如果想使用滚动,如过没有任何动画

js全屏滚动效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>全屏滚动代码测试</title> 6 <style type="text/css"> 7 body,ul,li{ margin: 0; padding: 0;} 8 #tbody{ overflow: hidden; clear: both;

jquery.fullPage.js全屏滚动插件

效果演示 网站   http://www.51xuediannao.com/demo.php 插件下载  http://www.51xuediannao.com/js/jquery/jquery.fullPage.html jquery.fullPage.js是一个全屏滚动插件,本文提供jquery.fullPage实例教程演示 看啥都不如看演示来的直观,走起! 基本滚动 http://www.51xuediannao.com/js/jquery/jquery.fullPage/index2.h

全屏滚动实现:fullPage.js和fullPage

fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. 一.fullPage.js实现全屏 fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js 1.基本演示 1.1  引入文件 <!-- 引入css --> <link rel="stylesheet&quo

pagePiling.js - 创建美丽的全屏滚动效果

在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主流浏览器,包含IE8+.支持移动设备.