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 ...
随机推荐
- 【Android Studio安装部署系列】三十六、Android studio3.2使用过程中注意事项
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android Studio升级到3.2之后,运行旧项目的时候出现了各种情况,特此记录下. 一.打包选项多了,一般情况下选择APK即 ...
- 【Vuex】vuex基本介绍与使用
Vuex是什么? 官方解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集 ...
- KVO讲解
最近一直在写swift项目,没有时间更新自己的技术博客,以前在博客里面写过KVO的底层原理,今天我们来看一下KVO的整个使用过程和使用场景(附有demo),大约花大家10-15分钟时间,希望大家看完博 ...
- Unity 3D游戏开发学习路线（方法篇）
Unity 3D本来是由德国的一些苹果粉丝开发的一款游戏引擎,一直只能用于Mac平台,所以一直不被业外人士所知晓.但是后来也推出了2.5版,同时发布了PC版本,并将其发布方向拓展到手持移动设备.Uni ...
- c# 图片加水印
/// <summary> /// 图片水印 /// </summary> /// <param name="imgPath">服务器图片相对路 ...
- 学习经验分享（最近听了一节Java公开课）
最近听了一节Java公开课,讲的Tomcat8.0的,老师分享的学习方法很好, 时间和精力要用对地方 1.学习一个知识的广度和深度,先学主要的主流的,不要学了很多不该学,没必要学的东西 2.要花时间总 ...
- ArcGIS API for JavaScript与 npm
在4.7版本中,不仅增加了WebGL的渲染支持(渲染前端速度加快,渲染量也加大).增强了ES6中的Promises语法支持,还支持了npm管理及webpack打包,实属喜讯. “意味着可以不经过esr ...
- 小程序使用之WXS
文章链接:https://mp.weixin.qq.com/s/F1zzS7mvMpFaplq4KINzQg 之前做过一段时间的小程序开发,自己也写过两个自己的小程序,了解些前端的知识,相对而言还是比 ...
- compaTtelrunner 和win7补丁的那些事
win7 KB2952664的补丁,卸载即可,无关大碍.该进程严重影响磁盘性能.
- cvc-elt.1: Cannot find the declaration of element 'beans'Failed to read schema document 'http://www.springframework.org/schema/beans/spring- beans-3.0.xsd'
Multiple annotations found at this line: - cvc-elt.1: Cannot find the declaration of element 'beans' ...