s[0].style.width = 100 - r / i * 100 + quot;%quot;;该代码不就是设置进度条的么
如果你能更改页面 你在标签中这样写:lt;h5gt;(资料完整度lt;span id=quot;wz_jdquot;gt;lt;/spangt;)lt;/h5gt;然后在你的JS中 s[0].style.width = 100 - r / i * 100 + quot;%quot;;的下面 写上:
document.getElementById(quot;wz_jdquot;).innerHTML = 100 - r / i * 100 + quot;%quot;;不就OK了么
注意:你的JS中哪儿有那行代码 就在那行下面 追加
如果不能更改页面就在那行代码下面 这样写:document.getElementsByTagName(quot;h5quot;)[0].innerHTML = quot;(资料完整度quot;+ (100 - r / i * 100) + quot;%)quot;;里面的0 表示是第1个h5标签 如果你有多个 自己进行更改
对于淡入淡出式
1.首先是个外围部分(其实也就是最外边的整体wrapper)
2.接着就是你设置图片轮播的地方(也就是一个banner吧)
3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式)
4.然后是一个透明背景层,放在图片底部
5.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li)
6.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div 或 ul-->li)
7.当然了,有些时候还在图片两
用css3实现循环滚动效果: css: #wrap{ width: 200px; height: 150px; border: 1px solid #000; position: relative; margin: 100px auto; overflow: hidden; } #list{ position: absolute; left: 0; top: 0; margin: 0; padding: 0; animation: move 12s infinite linear; -webkit-animation: move 12s infinite linear; width: 500%; } #list li { list-style: none; width: 200px; height: 150px; border: 0; float: left; } @-webkit-keyframes move{ 0% { left: 0; } 100% { left: -800px; } } @keyframes move { 0% { left: 0; } 100% { left: -800px; } } #wrap:hover #list { -webkit-animation-play-state: paused; /*动画暂停播放*/ } html: 扩展资料: animation(动画) 属性: 语法: animation: name duration timing-function delay iteration-count direction fill-mode play-state; 参数: 1、animation-name:指定要绑定到选择器的关键帧的名称。 2、animation-duration:动画指定需要多少秒或毫秒完成。 3、animation-timing-function:设置动画将如何完成一个周期。 值: linear:动画从头到尾的速度是相同的。 ease:默认。动画以低速开始,然后加快,在结束前变慢。 ease-in:动画以低速开始。 ease-out:动画以低速结束。 ease-in-out:动画以低速开始和结束。 cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 4、animation-delay:设置动画在启动前的延迟间隔。 5、animation-iteration-count :定义动画的播放次数。 值: n:一个数字,定义应该播放多少次动画。 infinite:指定动画应该播放无限次(永远) 。
。 。 。 您的浏览器不支持 audio 元素。 。 。 var audio=document.getElementById("audio")。 audio.duration//播放时间。 audio.currentTime//播放进度。 。 udio是英文单词,有多种含义:Audio是AU格式一种经过压缩的数字声音格式的详写;Audio是音频的单词;Audio是听觉的单词。听觉声波作用于听觉器官,使其感受细胞兴奋并引起听神经的冲动发放传入信息,经各级听觉中枢分析后引起的感觉。
使用audio的buffered属性,该属性返回表示音频已缓冲部分的 TimeRanges 对象。 这里假定_audio为所获取的audio标签,实现代码如下: // 获取已缓冲部分的 TimeRanges 对象var timeRanges = _audio.buffered; // 获取以缓存的时间var timeBuffered = timeRages.end(timeRages.length - 1); // 获取缓存进度,值为0到1var bufferPercent = timeBuffered / _audio.duration; // ...... // 之后将bufferPercent按照自己需要的方式进行处理即可// 处理的时候要注意浮点数精度造成的误差。
代码: body{ margin:0; padding:0; background-color:transparent; } div{ width:350px; overflow:hidden; } table img{ width:100px; height:100px; } var target = $('#picScroll'); var left = 0; var speed = 30; function Marqeen() { if (target[0].offsetWidth
这个很难实现的,因为要想实现准确的进度条,就必须知道要下载的总字节数和当前已下载的字节数,总字节数除了html文件本身,还有里面的各种对象如图片、动画、css文件、js文件等的字节数,还要区分哪些是从电脑的cache取出的,哪些是从服务器下载的,有些数据要等到页面完全下载完毕才能得到,这马后炮有什么用呢。IE浏览器本身的进度条都无法做到准确呢,何况用JS?
一般都是用个动态GIF图片或Falsh循环滚动一下糊弄糊弄用户就行了。我还没见过能精确计算出加载进度的网站,如果有,那我只能说他们糊弄的技术很牛B
var speed = 20;//滚动速度
var maq;
var m1;//第一份滚动的内容
var m2;//第二份滚动的内容
var timer;//定时器
function run(){
if(m1.offsetWidth<=maq.scrollLeft){
maq.scrollLeft-=m1.offsetWidth;
}else{
maq.scrollLeft+=6;
}
}
window.onload=function(){
maq=document.getElementById("maq");
m1=document.getElementById("m1");
m2=document.getElementById("m2");
m2.innerHTML=m1.innerHTML;
if(timer==null){
timer=window.setInterval(run,speed);
}
maq.onmouseover=function(){
window.clearInterval(timer);
}
maq.onmouseout=function(){
timer=window.setInterval(run,speed);
}
}
楼主详细代码在这里这已经是相当的简介版了你只要把图片路径改一下就能用了,~要呦~你懂得~~
常规的解决办法还是用ajax比较好。大概是这样的。 需要两个页面。 1.一个是实际页面本身 2.另一个是一个空白页面放一张loading图片 先请求第2个页面,在这个页面中放一段ajax请求第1个页面,在success函数里将页面内容输出,并将loading图片隐藏掉。 代码是这样的:loading page: 电脑黑屏解决方法:1、检查显示器与电脑的连接线是否安装紧密;2、取下电脑内存条,用橡皮擦拭金手指后放回(接触不良会造成电脑开机黑屏);3、更换内存、显卡、显示器、连接线诊断故障所在。4、系统文件损坏,重装系统。这是一种解决方法~1、制作启动盘。(W7系统4G U盘,XP系统2G U盘)下载大番薯u盘启动制作工具,安装软件,启动,按提示制作好启动盘2、下载一个你要安装的系统,压缩型系统文件解压(ISO型系统文件直接转到U盘)到你制作好的U盘,启动盘就做好了3、用U盘安装系统。插入U盘开机,按DEL或其它键进入BIOS,设置从USB启动-F10-Y-回车。按提示安装系统4、安装完成后,拔出U盘,电脑自动重启,点击:从本地硬盘启动电脑,继续安装5、安装完成后,重启。开机-进入BIOS-设置电脑从硬盘启动-F10-Y-回车。
类似这个效果的网上很多的啦,弄个改改就行了。
JS平滑图片滚动
var sh;
var marquees;
marqueesWidth=610;
var speed=20,preLeft=0,stopscroll=false,flag=true;
function scrollLeft(){
preLeft=marquees.scrollLeft;
marquees.scrollLeft+=3;
if(preLeft>=marquees.scrollLeft){
Right();
}
}
function scrollRight(){
preLeft=marquees.scrollLeft;
marquees.scrollLeft-=3;
if(preLeft<=marquees.scrollLeft){
Left();
}
}
function Left(){
flag=true;
clearInterval( sh );
sh = setInterval("scrollLeft()",speed);
}
function Right(){
flag=false;
clearInterval( sh );
sh = setInterval("scrollRight()",speed);
}
function normal(){
clearInterval( sh );
speed=20;
if(flag)Left();
else Right();
}
function plusSpeed(){
clearInterval( sh );
speed=10;
if(flag)Left();
else Right();
}
function init(){
marquees=document.getElementById("marquees1");
with(marquees){
style.width=marqueesWidth+"px";
style.overflowX="hidden";
style.overflowY="visible";
}
Left();
}
<img
src="http://www.codefans.net/jscss/demoimg/200905/left.gif" border=0 onmouseout=normal() onmouseover=plusSpeed() style="CURSOR: pointer" />
第1期
<img
class=imgframe src='http://www.codefans.net/jscss/demoimg/wall_s1.jpg' border=0 />
第2期
<img
class=imgframe src='http://www.codefans.net/jscss/demoimg/wall_s2.jpg' border=0 />
第3期
<img
class=imgframe src='http://www.codefans.net/jscss/demoimg/wall_s3.jpg' border=0 />
第4期
<img
class=imgframe src='http://www.codefans.net/jscss/demoimg/wall_s4.jpg' border=0 />
第5期
<img
class=imgframe src='http://www.codefans.net/jscss/demoimg/wall_s5.jpg' border=0 />
第6期
<img
class=imgframe src='http://www.codefans.net/jscss/demoimg/wall_s6.jpg' border=0 />
第7期
<img
class=imgframe src='http://www.codefans.net/jscss/demoimg/wall_s7.jpg' border=0 />
第8期
<img
src="http://www.codefans.net/jscss/demoimg/200905/right.gif" border=0 onmouseout=normal() onmouseover=plusSpeed() />
var jsload = {
img: [ 'about.png', 'applyBtn.png', 'background2.png', 'bgImg.png', 'bird.cman.png', 'borad2.png',
'choujiang.png','entry.png','f_0.png','f_1.png','f_2.png','f_3.png',
'f_4.png','f_5.png','f_6.png','f_7.png','f_8.png','f_9.png',
'fxFBfont.png','ground.2.png','logo.png','pgBar.png','pgBg.png','pipe2.png',
'raffle.png','rank.png','rankBtn.png','ruleBtn.png','shareButton.png',
'shareImg.png','sureBtn.png','tap.png','titleImg.png','trymore.png'
],
count: 1,
go: 1,
init: function () {
var _this = this;
$.get('dom.txt', function (response) {
$('#gameDiv').append(response);
_this.move();
});
this.count += this.img.length;
this.go = this.count;
this.loadImg();
},
loadImg: function () {
for (var i = 0; i < this.img.length; i++) {
var img = new Image();
var _this = this;
img.onload = function () {
_this.move();
};
img.src = 'resource/assets/' + this.img[i];
};
return this;
},
move: function () {
--this.go;
var press = Math.round((this.count - this.go) / this.count * 100);
console.log('游戏加载进度', press);
// if(press === 100){
// start.init();
// }
}
};
jsload.init();
图片 和txt加载 可以参考下
个主题化的进度条插件库的一切。
ProgressJs是一个JavaScript和CSS3库,帮助开发人员创建和管理页面上的任何对象的进度条。你可以自己设计模板的进度条或简单的定制。
你可以使用ProgressJs显示加载内容的进步(图像,视频,等等)到用户的网页。它可以用在所有的元素包括文本框,文本区,甚至整个身体。
它的重量轻,易于使用的,可定制的,自由和开放源码。
基本使用方法
//to set progress-bar for whole page
progressJs().start();
//or for specific element
progressJs("#targetElement").start();
这是ProgressJs的第一个测试版,这当然会更强大的很快。我们将发布一个稳定的变化版本,下载最新版本或其他。作为一个开发者,你可以帮助我们找到错误或解决他们自己的,开源的美。
加载图片动画
<img class="span4 img-rounded
进度条 body{ text-align:center; } .graph{ width:450px; border:1px solid #F8B3D0; height:25px; } #bar{ display:block; background:#FFE7F4; float:left; height:100%; text-align:center; } #barNum{ position:absolute; } function $(obj){ //封装方法,相当于jQuery return document.getElementById(obj); } function go(){ $("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; $("bar").innerHTML = $("bar").style.width; if($("bar").style.width == "100%"){ window.clearInterval(bar); //进度为100时清除定时器 } } var bar = window.setInterval("go()",50); //设置定时器window.onload = function(){ bar; }
1,首先需要div布局一个HTML框架出来: 2.在HTML里面的布局的截图如下: 2.添加CSS样式代码: css代码:.jd_banner {width: 100%;position: relative;overflow: hidden;}.jd_banner ul:nth-child(1) {width: 1000%;-webkit-transform: translateX(-10%);transform: translateX(-10%);}.jd_banner ul:nth-child(1) li {width: 10%;float: left;}.jd_banner ul:nth-child(1) li a {display: block;width: 100%;}.jd_banner ul:nth-child(1) li a img {width: 100%;display: block;/* 清除img之间的间距 */}.jd_banner ul:nth-child(2) {position: absolute;width: 118px;height: 6px;left: 50%;margin-left: -59px;bottom: 5px;}.jd_banner ul:nth-child(2) li {float: left;width: 6px;height: 6px;border: 1px solid #fff;border-radius: 50%;margin-left: 10px;}.jd_banner ul:nth-child(2) li.now {background: #fff;}.jd_banner ul:nth-child(2) li:first-child {margin-left: 0;} 3.CSS样式的代码截图如下: 3.主要是要写好javascript代码: function banner () { var banner = document.querySelector('.jd_banner'); var width = banner.offsetWidth; var imgBox = banner.querySelector('ul:first-child'); var pointBox = banner.querySelector('ul:last-child'); var points = pointBox.querySelectorAll('li'); var addTransition = function () { imgBox.style.webkitTransition = 'all .2s'; imgBox.style.transition = 'all .2s'; } var removeTransition = function () { imgBox.style.webkitTransition = 'none'; imgBox.style.transition = 'none'; } var setTranslateX = function (x) { imgBox.style.webkitTransform = 'translateX('+x+'px)'; imgBox.style.transform = 'translateX('+x+'px)'; } var index = 1; var timer = setInterval(function () { index++; addTransition(); setTranslateX(-index*width); },3000); var setPoint = function () { for(var i = 0; i < points.length; i++) { points[i].className = ''; points[index - 1].className = 'now'; } }; transition.transitionEnd(imgBox, function () { if(index >= 9) { index = 1; removeTransition(); setTranslateX(-index*width); } else if(index <= 0) { index = 8; removeTransition(); setTranslateX(-index*width); } setPoint(); }); var startX = 0; var moveX = 0; var distanceX = 0; var isMove = false; imgBox.addEventListener('touchstart', function (e) { clearInterval(timer); startX = e.touches[0].clientX; }); imgBox.addEventListener('touchmove', function (e) { isMove = true; moveX = e.touches[0].clientX; distanceX = moveX - startX; removeTransition(); setTranslateX(-index*width+distanceX); }); window.addEventListener('touchend', function (e) { if(Math.abs(distanceX) > (width/3) && isMove) { if(distanceX > 0) { index--; } else { index++; } addTransition(); setTranslateX(-index*width); } else { addTransition(); setTranslateX(-index*width); } startX = 0; moveX = 0; distanceX = 0; isMove = false; clearInterval(timer); timer = setInterval(function () { index++; addTransition(); setTranslateX(-index*width); },3000); }); } javascript代码截图如下: 6.最终在页面的效果如下: 图片不重要,你可以换一下你需要的图片进去
javascript 轮播 缩略图 实现
window.onload = function () {
var bottom = $('bottom'),title = $('title'),
img = $('img'),left = $('left'),right = $('right');
var aSpan = bottom.getElementsByTagName('span');
var aDiv = bottom.getElementsByTagName('div');
var arr = ['图片一','图片二','图片三', '图片四'];
var num = 0;
// 初始化
picTab();
// 点击下一张
right.onclick = function () {
if (num === aDiv.length - 1) num = -1;
num++;
picTab();
}
// 点击上一张
left.onclick = function () {
if (num === 0) num = aDiv.length;
num--;
picTab();
}
function picTab() {
title.innerHTML = arr[num];
img.src = 'img/' + (num + 1) + '.png';
for ( var i = 0; i < aSpan.length; i++ ) {
aSpan[i].className = '';
}
aSpan[num].className = 'active';
}
// 鼠标移入移出显示缩略图
for ( var i = 0; i < aSpan.length; i++ ) {
aSpan[i].index = i;
aSpan[i].onmouseover = function () {
aDiv[this.index].style.display = 'block';
}
aSpan[i].onmouseout = function () {
aDiv[this.index].style.display = 'none';
}
aSpan[i].onclick = function () {
num = this.index;
picTab();
}
}
function $(id) { return document.getElementById(id);}
}
RunJS #progress{ border:1px solid black; width:500px; height:20px; text-align:center; } #progress>div{ width:0px; height:20px; position:absolute; background-color:yellow; } #progress>span{ color:red; position:absolute; } onload = function(){ var div = progress.querySelector("div"); var span = progress.querySelector("span"); var pw = parseFloat(progress.style.width) || parseFloat(getComputedStyle(progress).width) || progress.offsetWidth; var interval = setInterval(function(){ var w = parseFloat(div.style.width) || parseFloat(getComputedStyle(div).width) || div.offsetWidth; w+=10; if(w>=pw){ w = pw; clearInterval(interval); } div.style.width = w + "px"; span.innerHTML = w*100/pw + "%"; },60); };
#box {float:left;width:200px;height:18px;border:1px solid;}
#bar {float:left;width:0px;height:18px;border:0px;background:#00f;}
var total = 100; //总数
var curN = 30; //当前值
function show()
{
var o = document.getElementById("bar");
o.style.width = ((curN / total) * 200) + 'px'; //200是外框的宽度
}
show();
显示百分比需要自己计算加载的内容,以下以webView示例,webView加载网页的时候可以增加进度条: 1.从webView中获取设置 WebSettings sws = webView.getSettings(); sws.setSupportZoom(true); sws.setBuiltInZoomControls(true); webView.setInitialScale(25); webView.getSettings().setUseWideViewPort(true); 2.注册setWebChromeClient事件 webView.setWebChromeClient(new WebChromeClient() { public void onProgressChanged(WebView view, int progress) { // Activity和Webview根据加载程度决定进度条的进度大小 // 当加载到100%的时候 进度条自动消失 //WebViewProgressActivity.this.setTitle("Loading..."); //WebViewProgressActivity.this.setProgress(progress * 100); if (progress == 100) { progressBar.setVisibility(View.GONE); //WebViewProgressActivity.this.setTitle("完成"); } } }); 3.注意在onProgressChanged中处理进度,progress就是进度值。