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 ...
随机推荐
- Redis学习笔记~Twenproxy所起到的作用
回到目录 Twenproxy除了可以作为redis的代理,它同样支持memerycached.我这里主要了解Twemproxy在redis集群上的解决方案.Twemproxy除了完美的解决了分片,路由 ...
- python默认编码设置
打开python 的gui,输入 1 2 import sys sys.getdefaultencoding() 查询系统当前默认编码 默认情况下显示编码方式为ASCII 在python安装目录下 ...
- MySQL优化小建议
背景 "那啥,你过来一下!" "怎么了?我代码都单元测试了的,没出问题啊!"我一脸懵逼跑到运维大佬旁边. "你看看!你看看!多少条报警,赶快优化一下! ...
- [转]Blue Prism VBO Cheat Sheet
本文转自:https://www.cheatography.com/ethanium/cheat-sheets/blue-prism-vbo/ Blue Prism MAPIEx Configure ...
- java_方法引用
什么是方法引用? 个人简述方法引用: 方法引用主要是针对已经有的方法来让目前的编程更加简洁 当我们想要使用一个接口的子类的时候,子类需要重写这个接口中的抽象方法, 被重写的这个方法参数列表固定,返回值 ...
- Bootstrap实现注册界面
样式一 例图 代码 <head> <meta charset="UTF-8"> <title>用户注册</title> <li ...
- Ajax的面试题
一.什么事Ajax?为什么要用Ajax?(谈谈对Ajax的认识) 什么是Ajax: Ajax是“Asynchronous JavaScript and XML”的缩写.他是指一种创建交互式网页应用的网 ...
- fullpage 全屏插件
fullpage 全屏插件 全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可.但是,虽然效果简单, ...
- Android Studio打包SDK后，为什么没有bundles文件夹？
在Android Studio中,将项目打包成jar包,按照网上说的方法打包完成后,在intermediates文件夹下没有bundles,AS版本3.1.2,后来发现,原来是intermediate ...
- MyDAL - .QueryListAsync() 使用
索引: 目录索引 一.API 列表 .QueryListAsync() .QueryListAsync<M>() 如: .QueryListAsync<AgentInventoryR ...