JS实现动画方向切换效果(包括:撞墙反弹，暂停继续左右运动等)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动画方向切换</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} a {
text-decoration: none;
color: #000000;
} #demo {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 30px;
left: 600px;
border-radius: 50%;
} .btn {
width: 400px;
margin: 150px auto;
} .btn a {
display: inline-block;
width: 100px;
line-height: 50px;
background-color: greenyellow;
margin: 0 10px;
text-align: center;
border: 2px solid darkgoldenrod;
}
</style>
</head>
<body>
<div id="demo"></div>
<div class="btn">
<a href="javascript:;" id="btnLeft">向左</a>
<a href="javascript:;" id="btnStart">开始/暂停</a>
<a href="javascript:;" id="btnRight">向右</a>
</div>
<script src="utils.js"></script>
<script type="text/javascript">
var oDiv = document.getElementById('demo'), btnLeft = document.getElementById('btnLeft'), btnRight = document.getElementById('btnRight'), btnStart = document.getElementById('btnStart');
var maxLeft = (document.documentElement.clientWidth || document.body.clientWidth) - oDiv.offsetWidth, initPos = utils.css(oDiv, 'left');
btnStart.flag = 1;
btnStart.onclick = function () {
var target = null;
this.flag === 1 ? target = maxLeft : target = 0;
if (oDiv.run) {
clearInterval(oDiv.timer);
oDiv.run = false;
return;
}
move(target);
};
btnLeft.onclick = function () {
btnStart.flag === 1 ? btnStart.flag *= -1 : null;
move(0);
};
btnRight.onclick = function () {
btnStart.flag == -1 ? btnStart.flag *= -1 : null;
move(maxLeft);
};
function move(target) {
oDiv.run = true;
_move();
function _move() {
clearInterval(oDiv.timer);
var curPos = null;
if (target) {
curPos = utils.css(oDiv, 'left');
curPos += 5;
if (curPos >= target) {
utils.css(oDiv, 'left', maxLeft);
// clearInterval(oDiv.timer);
// oDiv.run = false;
// btnStart.flag *= -1;
target = 0;
btnStart.flag *= -1;
oDiv.timer = setTimeout(_move, 10);
return;
}
utils.css(oDiv, 'left', curPos);
} else {
curPos = utils.css(oDiv, 'left');
curPos -= 5;
if (curPos <= target) {
utils.css(oDiv, 'left', 0);
// clearInterval(oDiv.timer);
// oDiv.run = false;
// btnStart.flag *= -1;
target = maxLeft;
btnStart.flag *= -1;
oDiv.timer = setTimeout(_move, 10);
return;
}
utils.css(oDiv, 'left', curPos);
}
oDiv.timer = setTimeout(_move, 10);
}
}
</script>
</body>
</html>
附：utils.js代码文件
'use strict';
var utils = (function () {
var isSupport = 'getComputedStyle' in window; /*
* toArray：Converts an array of classes to an array
* @parameter：
* likeAry[object]：Class array to convert
* @return：
* ary[Array]：Convert completed array
* By Team on 2017-04-16 12:44
*/
function toArray(likeAry) {
var ary = [];
try {
ary = Array.prototype.slice.call(likeAry);
} catch (e) {
for (var i = 0, len = likeAry.length; i < len; i++) {
ary[ary.length] = likeAry[i];
}
}
return ary;
} /*
* toJSON：Convert JSON string to JSON object
* @parameter：
* str[String]：JSON string
* @return：
* obj[Object]：JSON object
* By Team on 2017-04-16 12:48
*/
function toJSON(str) {
return 'JSON' in window ? JSON.parse(str) : eval('(' + str + ')');
} /*
* win：Operating browser box model information
*/
function win(attr, value) {
if (typeof value === "undefined") {
return document.documentElement[attr] || document.body[attr];
}
document.documentElement[attr] = value;
document.body[attr] = value;
} /*
* getCss：Gets the value of the specific style property for the current element
* @parameter：
* curEle[object]：current element
* attr[string]：style properties of elements
* @return：
* Style attribute values for elements
* By Team on 2017-04-23 12:29
*/
function getCss(curEle, attr) {
var val = null,
reg = null;
if (isSupport) {
val = window.getComputedStyle(curEle, null)[attr];
} else {
//->IE6~8
switch (attr) {
case 'filter':
case 'opacity':
val = curEle.currentStyle['filter'];
reg = /alpha\(opacity=(.+)\)/i;
val = reg.test(val) ? RegExp.$1 / 100 : 1;
break;
default:
val = curEle.currentStyle[attr];
}
}
reg = /^-?\d+(\.\d+)?(px|rem|em|pt)?$/i;
val = reg.test(val) ? parseFloat(val) : val;
return val;
} /*
* getCss：Set the style property value for an element，Setting inline styles for elements
* @parameter：
* curEle[object]：current element
* attr[string]：style properties of elements
* value：set style property value
* By Team on 2017-04-23 15:36
*/
function setCss(curEle, attr, value) {
if (attr === 'float') {
curEle['style']['cssFloat'] = value;
curEle['style']['styleFloat'] = value;
return;
}
if (attr === 'opacity') {
curEle['style']['opacity'] = value;
curEle['style']['filter'] = 'alpha(opacity=' + value * 100 + ')';
return;
}
var reg = /^(?:width|height|(?:(?:margin|padding)?(?:top|left|right|bottom)))$/i;
if (reg.test(attr)) {
!isNaN(value) ? value += 'px' : null;
}
curEle['style'][attr] = value;
} /*
* setGroupCss：Set the style attribute value for the batch
* @parameter：
* curEle[object]：current element
* styleCollection[object]：style collection
* By Team on 2017-04-23 15:36
*/
function setGroupCss(curEle, styleCollection) {
for (var key in styleCollection) {
if (styleCollection.hasOwnProperty(key)) {
setCss(curEle, key, styleCollection[key]);
}
}
} /*
* css：The style properties of the operating element, including the capture style, the individual settings style, and the batch settings style
* @parameter：
* curEle[object]：current element
* By Team on 2017-04-23 15:36
*/
function css() {
var arg = arguments;
if (arg.length >= 3) {
//->SET CSS
setCss.apply(this, arg);
return;
}
if (arg.length === 2 && typeof arg[1] === 'object') {
//->SET GROUP CSS
setGroupCss.apply(this, arg);
return;
}
return getCss.apply(this, arg);
} /*
* offset：Gets the offset of the current element distance BODY
* @parameter：
* curEle[object]：current element
* @return：
* [object]：{top:xxx,left:xxx}
* By Team on 2017-04-23 16:43
*/
function offset(curEle) {
var l = curEle.offsetLeft,
t = curEle.offsetTop,
p = curEle.offsetParent;
while (p) {
if (navigator.userAgent.indexOf('MSIE 8') === -1) {
l += p.clientLeft;
t += p.clientTop;
}
l += p.offsetLeft;
t += p.offsetTop;
p = p.offsetParent;
}
return {top: t, left: l};
} /*
* hasClass：Verify that the current element contains a single style class name
* @parameter：
* curEle[object]：current element
* cName[string]：class name to validate
* @return：
* [boolean]：true/false
* By Team on 2017-04-29 11:16
*/
function hasClass(curEle, cName) {
return new RegExp('(^| +)' + cName + '( +|$)').test(curEle.className);
} /*
* hasClass：Adds a class name to the current element
* @parameter：
* curEle[object]：current element
* strClass[string]：Need to increase the style class name, can be more than, for example:'xxx','xxx xxx', ' xxx xxx '...
* By Team on 2017-04-29 11:28
*/
function addClass(curEle, strClass) {
strClass = strClass.replace(/(^ +| +$)/g, '').split(/ +/g);
for (var i = 0; i < strClass.length; i++) {
var curClass = strClass[i];
if (!hasClass(curEle, curClass)) {
curEle.className += ' ' + curClass;
}
}
} /*
* removeClass：Remove a class name to the current element
* @parameter：
* curEle[object]：current element
* strClass[string]：Need to deleted the style class name, can be more than, for example:'xxx','xxx xxx', ' xxx xxx '...
* By Team on 2017-04-29 11:44
*/
function removeClass(curEle, strClass) {
strClass = strClass.replace(/(^ +| +$)/g, '').split(/ +/g);
for (var i = 0; i < strClass.length; i++) {
var curClass = strClass[i],
reg = new RegExp('(^| )' + curClass + '( |$)', 'g');
hasClass(curEle, curClass) ? curEle.className = curEle.className.replace(/ /g, ' ').replace(reg, ' ') : null;
}
curEle.className = curEle.className.replace(/(^ +| +$)/g, '');
} /*
* toggleClass：If the passing style class name exists in the element, the delete operation is an operation
* @parameter：
* curEle[object]：current element
* strClass[string]：class name to be operated
* By Team on 2017-04-29 12:00
*/
function toggleClass(curEle, strClass) {
strClass = strClass.replace(/(^ +| +$)/g, '').split(/ +/g);
for (var i = 0; i < strClass.length; i++) {
var curClass = strClass[i];
hasClass(curEle, curClass) ? removeClass(curEle, curClass) : addClass(curEle, curClass);
}
} /*
* byClass：Gets a set of elements by the element's style class，Compatible IE low version browser
* @parameter：
* strClass[string]：class name to be operated
* context[HTMLElementObject]：get the range, the default is document
* @return：
* [Array]：All matching results
* By Team on 2017-04-29 12:56
*/
function byClass(strClass, context) {
context = context || document;
if (isSupport) {
return toArray(context.getElementsByClassName(strClass));
}
//->IE6~8
var allList = context.getElementsByTagName('*'),
ary = [],
reg = null;
strClass = strClass.replace(/(^ +| +$)/g, '')
.replace(/ +/g, '@@')
.replace(/(?:^|@)([\w-]+)(?:@|$)/g, '(?=.*(^| +)$1( +|$).*)');
reg = new RegExp(strClass);
for (i = 0; i < allList.length; i++) {
var cur = allList[i];
reg.test(cur.className) ? ary[ary.length] = cur : null;
}
return ary;
} /*
* children：Gets all the child nodes of the current container (element), which is filtered in all child elements, and specifies the name of the tag
* @parameter
* curEle[HTMLElement]：current element
* tagName[string]：tag name
* @return
* [array]：Collection of elements
*/
function children(curEle, tagName) {
var allNodes = curEle.childNodes,
elementAry = [];
for (var i = 0; i < allNodes.length; i++) {
var curNode = allNodes[i];
if (curNode.nodeType === 1) {
var curNodeTag = curNode.tagName.toUpperCase();
if (typeof tagName !== 'undefined') {
tagName = tagName.toUpperCase();
curNodeTag === tagName ? elementAry[elementAry.length] = curNode : null;
continue;
}
elementAry[elementAry.length] = curNode;
}
}
return elementAry;
} /*
* prev：Get older brother element node
*/
function prev(curEle) {
if (isSupport) {
return curEle.previousElementSibling;
}
var p = curEle.previousSibling;
while (p && p.nodeType !== 1) {
p = p.previousSibling;
}
return p;
} /*
* prevAll：Get all brother element node
*/
function prevAll(curEle) {
var ary = [],
p = prev(curEle);
while (p) {
ary.unshift(p);
p = prev(p);
}
return ary;
} /*
* next：Get next brother element node
*/
function next(curEle) {
if (isSupport) {
return curEle.nextElementSibling;
}
var n = curEle.nextSibling;
while (n && n.nodeType !== 1) {
n = n.nextSibling;
}
return n;
} /*
* nextAll：Get all brother element node
*/
function nextAll(curEle) {
var ary = [],
n = next(curEle);
while (n) {
ary.push(n);
n = next(n);
}
return ary;
} /*
* siblings：Get all sibling element nodes
*/
function siblings(curEle) {
return prevAll(curEle).concat(nextAll(curEle));
} /*
* index：Gets the index of the current element
*/
function index(curEle) {
return prevAll(curEle).length;
} /*
* firstChild：Gets the first child element in the container
*/
function firstChild(curEle) {
if (isSupport) {
return curEle.firstElementChild;
}
var first = curEle.firstChild;
while (first && first.nodeType !== 1) {
first = first.nextSibling;
}
return first;
} /*
* lastChild：Gets the last child element in the container
*/
function lastChild(curEle) {
if (isSupport) {
return curEle.lastElementChild;
}
var last = curEle.lastChild;
while (last && last.nodeType !== 1) {
last = last.previousSibling;
}
return last;
} /*
* prepend：Add a new element to the location of the specified container
* @parameter
* newEle：Newly added elements
* container：Specified container
*/
function prepend(newEle, container) {
var first = firstChild(container);
if (first) {
container.insertBefore(newEle, first);
return;
}
container.appendChild(newEle);
} /*
* insertAfter：Add a new element to the old element
* @parameter
* newEle：New elements
* oldEle：Original element
*/
function insertAfter(newEle, oldEle) {
var n = next(oldEle),
p = oldEle.parentNode;
if (n) {
p.insertBefore(newEle, n);
return;
}
p.appendChild(newEle);
} return {
/*--TOOL--*/
toArray: toArray,
toJSON: toJSON,
win: win, /*--CSS OR STYLE--*/
offset: offset,
css: css,
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass, /*--GET ELEMENTS--*/
byClass: byClass,
children: children,
prev: prev,
next: next,
prevAll: prevAll,
nextAll: nextAll,
siblings: siblings,
index: index,
firstChild: firstChild,
lastChild: lastChild, /*--OPERATING ELEMENT--*/
insertAfter: insertAfter,
prepend: prepend
}
})();
JS实现动画方向切换效果(包括:撞墙反弹，暂停继续左右运动等)的更多相关文章
- js实现图片自动切换效果。
js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...
- iOS 视图控制器转场动画/页面切换效果/跳转动画 学习
一 学习 在 UINavigationController 中 push 和 pop 的转场效果 (基于iOS7 以上的转场方式) 经过学习了解到,重点分三块: (1)pushAnimation: ...
- JS框架_(JQuery.js)图片相册掀开切换效果
百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- JS实现标签页切换效果
本文实例为大家分享了JS标签页切换的具体代码,供大家参考,具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...
- 如何用js代码实现图片切换效果
通过点击按钮,实现图片的隐藏与显现,切换. 实现代码:<style> .a{ width: 300px; height: 300px; border: 1px solid black; } ...
- Lightbox JS v2.0图片切换效果
代码下载
- js 实现tab栏切换效果
效果图: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 又一Tab切换效果（js实现）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
随机推荐
- 【Uva 1336】Fixing the Great Wall
[Link]: [Description] 给你长城上的n个修补点,然后你的位置为x; 你需要依次去这n个点,然后把它们全部修好. 但是修的前后顺序不一样的话,花费不一样. 如果立即把第i个点修好的话 ...
- PS实现分幅扫描图片的批量自己主动拼接
非常easy,仅仅需两步搞定: 一.打开工具.如图所看到的: 二.选择图片,进行拼接: 静待结果!
- Unity中uGUI的控件事件穿透逻辑
1.正常来说Image和Text是会拦截点击事件的,假设加入EventTrigger的话,就能够响应相应的交互事件. 2.假设Image和Text是一个Button的子控件.那么尽管其会显示在Butt ...
- 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结
页面响应加载的顺序: 1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...
- #学习笔记#——JavaScript 数组部分编程（四）
7.合并数组 arr1 和数组 arr2.不要直接修改数组 arr,结果返回新的数组 function concat(arr1, arr2) { return arr1.concat(arr2); } ...
- Netty系列之Netty编解码框架分析
1. 背景 1.1. 编解码技术 通常我们也习惯将编码(Encode)称为序列化(serialization),它将对象序列化为字节数组,用于网络传输.数据持久化或者其它用途. 反之,解码(Decod ...
- C_数组详解
数组: 一 一维数组 1.1 一维数组的定义: 类型符 数组名[常量表达式]; int a[10]; 说明: 1.数组的命名规则遵循标识符命名规则. 2.定义时需要指定元素的个数.方括号里的常量表达式 ...
- 【DRF版本】
目录 使用内置的URLPathVersioning类 使用自定义的版本控制类 首先,我们开发的项目会有多个版本. 其次,我们的项目版本会随着更新越来越多,我们不可能因出了新版本就不维护旧版本了. 那么 ...
- Windows学习总结（3）——成为电脑高手必备的cmd命令大全
曾经看电影和电视里面电脑黑客快速敲击电脑键盘,一行行命令在电脑屏幕闪过,一个回车过后,一排排英文象走马灯一样在屏幕上转瞬即逝,那才是我们梦寐以求的高手,有木有!实际上,不光是黑客和系统维护人员,一般的 ...
- Sublime10个经常使用插件
10. Package control Package control是必装插件,全部其它的插件和主题都能够通过它来安装. 希望它能出如今正式版默认包中. 首先參照以下的教程来安装Package Co ...