html中滚动小球的demo
类似于下图的效果：
代码：
<!DOCTYPE html> <html>
<head>
<title>Promise animation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.ball{
width: 40px;
height: 40px;
border-radius: 20px;
} .ball1{
background: red;
}
.ball2{
background: yellow;
}
.ball3{
background: orange;
}
.ball4{
background: orange;
}
.ball5{
background: yellow;
}
.ball6{
background: red;
}
</style>
</head>
<body>
<div class="ball ball1" style="margin-left: 100px;"></div>
<div class="ball ball2" style="margin-left: 120px;"></div>
<div class="ball ball3" style="margin-left: 140px;"></div>
<div class="ball ball4" style="margin-left: 100px;"></div>
<div class="ball ball5" style="margin-left: 120px;"></div>
<div class="ball ball6" style="margin-left: 140px;"></div> <br>
<input id="id_txt" value="" />
<br>
<input id="id_button" value="点我 window.location='新url'" type="button" onclick="newUrl();"/>
<script type="text/javascript">
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
var ball4 = document.querySelector('.ball4');
var ball5 = document.querySelector('.ball5');
var ball6 = document.querySelector('.ball6'); // alert(ball1);
function newUrl(){
var obj = {};
obj.target = document.getElementById('id_button');
var tmp_localhost = window.location.origin;// "http://localhost:8080"
var pathName = window.location.pathname;// "/Mytag/locationtest.html"
var index_ = pathName.indexOf("/", "1");//
var projectName = pathName.substring(0, index_);//获取到 当前的项目名 类似于 /Mytag
if(obj.target){
//跳转到另一个页面，就有点和点超链接类似
// 主机名(包含端口号) 项目名 资源路径
window.location = tmp_localhost+projectName+'/declaration.jsp';
}
}
function recyle(obj) {
// 用来保存所有的属性名称和值
var props = "";
// 开始遍历
for ( var p in obj) { // 方法
if (typeof (obj[p]) == "function") {
if(p=="querySelector"){
console.log('--------------asfawa');
}
props += "function:"+p+"\n";
} else { // p 为属性名称，obj[p]为对应属性的值
props += p + " = " + obj[p] + " \n ";
}
} // 最后显示所有的属性
console.log(props+"\n");
// document.getElementById('id_txt').value = props;
} function animate(ball,distance,callback){
var margin_left =parseInt(ball.style.marginLeft,10);
setTimeout(function(){
if(margin_left===distance){
callback&&callback();
}else{
if(margin_left<distance){
margin_left++;
}else{
margin_left--;
}
ball.style.marginLeft = margin_left+'px';
animate(ball,distance,callback);
}
},12); }
function re(){
animate(ball1,170,function(){
animate(ball2,170,function(){
animate(ball3,170,function(){
animate(ball3,90,function(){
animate(ball2,90,function(){
animate(ball1,90,function(){
re();
});
});
});
});
});
});
} function re2(){
animate(ball4,170,function(){
animate(ball5,170,function(){
animate(ball6,170,function(){
animate(ball6,90,function(){
animate(ball5,90,function(){
animate(ball4,90,function(){
re2();
});
});
});
});
});
});
} re();
re2(); // animate(ball1,600,animate); </script>
</body>
</html>
html中滚动小球的demo的更多相关文章
- C# 在RichTextBox中滚动鼠标时滚动的是父窗口的滚动条
1. RichTextBox u2 = new RichTextBox(); 2. 先记住日RichTextBox没有显示滚动条时的总宽度和显示宽度 u2.Width - u2.ClientSize. ...
- universal image loader在listview/gridview中滚动时重复加载图片的问题及解决方法
在listview/gridview中使用UIL来display每个item的图片,当图片数量较多需要滑动滚动时会出现卡顿,而且加载过的图片再次上翻后依然会重复加载(显示设置好的加载中图片) 最近在使 ...
- html中滚动栏的样式
DIV滚动栏设置 (CSS)2008/09/26 03:07div 中滚动栏的控制2008年01月06日 星期日 01:181)隐藏滚动栏<body style="overflow-x ...
- vue中滚动页面，改变样式&&导航栏滚动时，样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- Android中Service的一个Demo例子
Android中Service的一个Demo例子 Service组件是Android系统重要的一部分,网上看了代码,很简单,但要想熟练使用还是需要Coding. 本文,主要贴代码,不对Servic ...
- 炼金术(1): 识别项目开发中的ProtoType、Demo、MVP
软件开发是很分裂的,只有不断使用原则和规律,才能带来质量. 只要不是玩具性质的项目,项目应该可以大概划分为0-1,1-10,10-100,100-1000四个种重要阶段.其中,0-1是原型验证性的:1 ...
- iphone对fixed模态框支持不太好，弹出窗口中滚动点击穿透的bug
iphone对fixed展现层中存在滚动内容支持非常不好, 尤其是背景页面产生滚动以后,输入控件就找不到了, 取消冒泡也不行,最后是这么解决的,可以参考 <style> .modeldiv ...
- 记录WEUI中滚动加载的一个BUG
最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...
- java web中验证码生成的demo
首先创建一个CaptailCode类 package com.xiaoqiang.code; import java.awt.*; import java.awt.font.FontRenderCon ...
随机推荐
- .netcore 模块积累
最全的 demo https://github.com/XiaoFaye/netcore-samples http://files.cnblogs.com/files/kellynic/practic ...
- 学习ASP.NET Core Razor 编程系列十七——分组
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- JavaScript夯实基础系列（五）：类
JavaScript中没有类,是通过使用构造函数和原型模式的组合来实现类似其它面向对象编程语言中"类"的功能.ES6引入的关键字class,形式上向其它面向对象编程语言靠拢,其 ...
- 强化学习(十一) Prioritized Replay DQN
在强化学习(十)Double DQN (DDQN)中,我们讲到了DDQN使用两个Q网络,用当前Q网络计算最大Q值对应的动作,用目标Q网络计算这个最大动作对应的目标Q值,进而消除贪婪法带来的偏差.今天我 ...
- 教你编写百度搜索广告过滤的chrome插件
1 前言 目前百度搜索列表首页里,广告5条正常内容是10条,而且广告都是前1到5条的位置,与正常内容的显示样式无异.对于我们这样有能力的开发者,其实可以简单的实现一个chrome插件,在百度搜索页面里 ...
- C#代码安装Windows服务（控制台应用集成Windows服务）
最近在为一款C/S架构的科研软件开发云计算版,需要用到WCF,考虑到不需要什么界面以及稳定性,无人值守性,准备用Windows Service作为宿主,无奈Windows Service的安装太为繁复 ...
- SLAM+语音机器人DIY系列：（三）感知与大脑——5.机器人大脑嵌入式主板性能对比
摘要 在我的想象中机器人首先应该能自由的走来走去,然后应该能流利的与主人对话.朝着这个理想,我准备设计一个能自由行走,并且可以与人语音对话的机器人.实现的关键是让机器人能通过传感器感知周围环境,并通过 ...
- C#工具:Ado.Net SqlServer数据库 MySql数据库
数据库连接字符串(web.config来配置),可以动态更改connectionString支持多数据库. SqlServer调用数据库 using System; using System.Coll ...
- 20190404-transition、transform转换、animation、媒体查询
目录 1.transition过渡 1.1简写:transiton:transition-property | transition-duration | transition-timing-func ...
- 线上centos6出现软死锁 kernel:BUG: soft lockup
线上centos6出现软死锁 kernel:BUG: soft lockup 今天线上一台centos6机器用xshell一直连接不上,然后在xshell上显示 Message from syslog ...