这篇文章主要介绍JS运动特效之任意值添加运动的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体如下:
回顾一下上个例子JS实现多物体运动的方法:
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
function getStyle(obj,attr){
return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}
function startMove(obj,iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var objWidth = parseInt(getStyle(obj,'width'));//因为是通过[]调用属性,所以width必须加单引号
// var iSpeed = (iTarget -obj.offsetWidth)/10;
// 因为objWidth存放的就是当前对象的宽,所以直接写objWidth而不是obj.objWidth
var iSpeed = (iTarget -objWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(objWidth == iTarget){
clearInterval(obj.timer);
}else{
obj.style.width = objWidth+iSpeed+'px';
}
},30);
}
</script>
如果此时需求有变化,让第2个li鼠标移入,高度变化,第三个li鼠标依然边框,第四个li鼠标移入背景变化。一种办法就是复制几分startMove函数,分别把之前width变化改成height,borderWidht,和opacity透明度变化;但是这样显然浪费,可以把他们合并成一个函数,把变化的属性作为参数传进去就好了.
1. function startMove(obj,attr,iTarget) 函数里新增attr参数
2. 调用参数的方式:由obj.style.属性名 变成 obj.style[属性名]
3. 需要分别为每个li添加事件
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[0].onmouseover = function () {
startMove(this,'width',400);
}
liTags[0].onmouseout = function () {
startMove(this,'width',200);
}
liTags[1].onmouseover = function () {
startMove(this,'height',100);
}
liTags[1].onmouseout = function () {
startMove(this,'height',50);
}
liTags[2].onmouseover = function () {
startMove(this,'borderWidth',10);
}
liTags[2].onmouseout = function () {
startMove(this,'borderWidth',2);
}
liTags[3].onmouseover = function () {
startMove(this,'padding',10);
}
liTags[3].onmouseout = function () {
startMove(this,'padding',0);
}
}
}
function getStyle(obj,attr){
return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}
function startMove(obj,attr,iTarget) {//attr:把变化的属性最为参数传入
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var objAttr = parseInt(getStyle(obj,attr));
var iSpeed = (iTarget -objAttr)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(objAttr == iTarget){
clearInterval(obj.timer);
}else{
//obj.style.width = objWidth+iSpeed+'px';
obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
}
},30);
}
</script>
运行一下发现,改变宽,高,border都妥妥的,但是最后一个改变“透明度”没反应,是什么问题那??
首先opacity的值0.3一个小数,parseInt(getStyle(obj,attr)
之后便变成0,还有最大的一个问题就是最后属性值设置的时候:obj.style[attr] = objAttr+iSpeed+'px';
显然opacity并没有px这个单位,所以需要对运动框架做进一步处理
需要判断一下,当接受的参数是“透明度”的时候,需要单独处理一下,把上面出问题的两个地方做一下处理
var objAttr = 0;
if(attr == "opacity"){
// 由于计算机对 小数的处理有问题,这里用Math.round处理一下
// objAttr = parseFloat(getStyle(obj,attr)*100);
//objAttr = parseInt(parseFloat(getStyle(obj,attr))*100);
objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
objAttr = parseInt(getStyle(obj,attr));
}
如果不做处理直接 objAttr = parseFloat(getStyle(obj,attr)*100);
由于计算机不能很精确的处理小数,会导致一些问题
用parseInt这种方法:objAttr = parseInt(parseFloat(getStyle(obj,attr))*100);
也可以处理小数,但是经过测试在鼠标移出的时候,与原来状态有一点偏差
可以看出,当鼠标移出去的时候,opacity应该回到1,可结果却是0.94 ;所以个人推荐用Math.round
四舍五入函数来处理这里的小数问题
做一下判断,下面也同样做判断
if(attr == "opacity"){
obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
obj.style.opacity = (objAttr+iSpeed)/100;
}else{
//obj.style.width = objWidth+iSpeed+'px';
obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
}
完整代码:
HTML部分
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
css部分:
<style>
ul{list-style: none;}
ul li{
margin: 10px;
width: 200px;height: 50px;
border: 2px solid #c00;
background: lightblue;
}
</style>
js部分
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[0].onmouseover = function () {
startMove(this,'width',400);
}
liTags[0].onmouseout = function () {
startMove(this,'width',200);
}
liTags[1].onmouseover = function () {
startMove(this,'height',100);
}
liTags[1].onmouseout = function () {
startMove(this,'height',50);
}
liTags[2].onmouseover = function () {
startMove(this,'borderWidth',10);
}
liTags[2].onmouseout = function () {
startMove(this,'borderWidth',2);
}
liTags[3].onmouseover = function () {
startMove(this,'opacity',30);
}
liTags[3].onmouseout = function () {
startMove(this,'opacity',100);
}
}
}
function getStyle(obj,attr){
return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
}
function startMove(obj,attr,iTarget) {//attr:把变化的属性最为参数传入
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var objAttr = 0;
if(attr == "opacity"){
// 由于计算机对 小数的处理有问题,这里用parseFloat转一下
objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
objAttr = parseInt(getStyle(obj,attr));
}
var iSpeed = (iTarget -objAttr)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(objAttr == iTarget){
clearInterval(obj.timer);
}else{
if(attr == "opacity"){
obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
obj.style.opacity = (objAttr+iSpeed)/100;
}else{
//obj.style.width = objWidth+iSpeed+'px';
obj.style[attr] = objAttr+iSpeed+'px';
}
}
},30);
}
</script>
最后结果演示:
以上是“JS运动特效之任意值添加运动的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!