html和js实现滚动条效果
HTML部分
<!-- 遮罩层 -->
<div id="zzc" style="z-index:-1;height:100%;width: 100%; position:absolute;left:0px;top:0px;bottom:0px; background-color:#000;opacity:0.8;"></div>
<!-- 进度条 -->
<div id="jdt" style="z-index:-1;height:25px;width: 500px;border: 1px solid rgb(204,204,204); position:absolute;left:30%;top:47%; border-radius:5px;">
<div id="prompt" style="width:200px; height:0px; color:rgb(255,255,255); position:relative;left:40%;top:0px; border-radius:5px;"></div>
<div style="height:23px;width:0px;background-color: rgb(0,192,239); top="0px" id="progressBar">
</div>
</div>
<input type="button" value="开始" onclick="doStart()" />
<input type="button" value="暂停" onclick="doStop()" />
<input type="button" value="停止" onclick="doCleaner()" />
JS部分
var width = 0;
var number = 0;
var timer = null;
//进度条
function doStart() {
timer = window.setTimeout("onChange()", 10);
} function doStop() {
window.clearTimeout(timer);
} function onChange() {
$('#zzc').css('z-index','101');
$('#jdt').css('z-index','102');
if(width == 500) {
window.clearTimeout(timer);
}else {
number += 1;
if(number<500){
$("#prompt").text((number/5)+'%');
}
width += 1;
$("#progressBar").css('width',width+'px');
timer = window.setTimeout("onChange()", 10);
}
}
function doCleaner(){
$('#zzc').css('z-index','-2');
$('#jdt').css('z-index','-1');
window.clearTimeout(timer);
width = 0;
number = 0;
$("#prompt").text('');
$("#progressBar").css('width',width+'px');
}
html和js实现滚动条效果的更多相关文章
- JS之滚动条效果2
在前面一篇说的是滚动条效果,本篇继续在前面的基础上面针对滚动条进行操作.本次要实现的效果如下:拖动滚动条左右移动时,上面的图片内容也相对外层盒子做相对移动. 下面针对要实现的效果进行分析:首先是页面基 ...
- JS之滚动条效果
滚动条在前端页面中是进行见到的,但是在不同的浏览器中,默认的滚动条样式不同,有些浏览器的默认样式也不好更改,因此,我们可以自定义滚动条,接下来就从一个实例开始进入滚动条. 简易进度条 首先要实现的是上 ...
- jQuery实现模拟滚动条效果;
滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
- JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)
由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...
- js判断滚动条是否已到页面最底部或顶部实例
原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...
- CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
随机推荐
- Python开发【Django】:模板语言
排序 1.forloop.counter 表示循环的次数,它从1开始计数,第一次循环设为1 {% for item in todo_list %} <p>{{ forloop.counte ...
- 优云老王的心路历程(二):下一站Web体验监控产品
在上一篇文章中,和大家聊到了建立Web应用体验监控体系,经过了概念阶段,也完成了技术选型,就进入了把实质性的产品研发阶段.作为产品经理,时刻不敢忘记我们的产品目标:无限感知你的用户,建立完备的体验监控 ...
- nodejs Async详解之二:工具类
Async中提供了几个工具类,给我们提供一些小便利: memoize unmemoize log dir noConflict 1. memoize(fn, [hasher]) 有一些方法比较耗时,且 ...
- python拼接字符串
python拼接字符串一般有以下几种方法: 1.直接通过(+)操作符拼接 s = 'Hello' + ' ' + 'World' + '!' print(s) 输出结果:Hello World! 使用 ...
- c/c++ json使用
比如出名的有CJson,c++一般用jsoncpp http://sourceforge.net/projects/jsoncpp/ jsoncpp:http://www.cnblogs.com/fe ...
- Bootstrap单按钮的下拉菜单
简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootst ...
- PHP error_reporting() 错误控制函数功能详解
定义和用法:error_reporting() 设置 PHP 的报错级别并返回当前级别. 函数语法:error_reporting(report_level) 如果参数 level 未指定,当前报错级 ...
- CSS样式有哪些常用的属性?
一般的一个DIV的CSS设置属性有:margin,padding,width,height,font-size,text-align,background,float,border CSS样式有哪些常 ...
- 对Man-In-The-Middle攻击的一点理解
1) 中间人攻击最容易理解的可能就是fiddler吧,他可以截获request重新组织request的数据,有个专业的攻击工具叫burp. 2) 数据存在immutable,mutable ...
- Java 异步处理 三种实现
new Thread((new Runnable() { @Override public void run() { // 批量同步数据 try { logger.info("^^^^^^^ ...