JS_鼠标移入移出渐变效果（类似css3中的transition或animation和@keyframes）

分享一下之前做的渐变效果（由于最近正好处于温故而知新状态，所以整理以前的po上来的随笔会比较多。

通过js实现的。

传递给函数的内容主要有，需要改变的对象、改变的属性、目标值、以及是否有回调函数。

可以实现物体的不同样式的链式变化，和不同样式的同时变化。

废话不多说，贴上Js代码（附上注释）：

<script>
//获取obj样式为attrs的值
function getStyle(obj,attrs){//IEif(obj.currentStyle){return obj.currentStyle[attrs];}//其他else{return getComputedStyle(obj,false)[attrs];}
}
//obj:对象，iTarget:变化目标,attrs:变化的属性
function startMove(obj,json,fn){var flag = true;//停止计时器
    clearInterval(obj.timer);//开始计时器
    obj.timer = setInterval(function(){for(var attrs in json){//获取到的对应的属性的值var Styles = getStyle(obj,attrs);//如果属性为透明度，取浮点数if(attrs == "opacity"){//Math.round四舍五入
                cur = Math.round(parseFloat(Styles)*100);}else{cur = parseInt(Styles);}//速度变量,缓冲变化var speed = (json[attrs] - cur)/8;//让speed为整数
            speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);//判断停止运动的位置if(cur != json[attrs]){flag = false;}//如果属性是透明度if(attrs == "opacity"){obj.style.filter = "alpha(opacity:"+(cur+speed)+")";obj.style.opacity = (cur+speed)/100;
            }else{obj.style[attrs] = cur+speed+"px";}}if(flag){clearInterval(obj.timer);//判断是否为链式运动，如果传了函数进来，则先执行函数if(fn){fn();}}}, 30)
}
</script>

效果图：

以上内容，如有错误请指出，不甚感激。

转载于:https://www.cnblogs.com/adelina-blog/p/5716794.html

JS_鼠标移入移出渐变效果（类似css3中的transition或animation和@keyframes）相关推荐

JS_鼠标移入移出触发事件
js鼠标移入移出-触发事件 $(".dom").onmouseover=function(){console.log("鼠标移入"); } $(".d ...
html鼠标移入显示图片动画,HTML5+CSS3鼠标移入移出图片生成随机动画_html/css_WEB-ITnose...
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代 ...
vue中鼠标移入移出事件种类以及区别
1.@mouseover与@mouseout 鼠标经过时自身触发事件,其子元素同时也触发该事件. 父亲有的东西,儿子也有 ,支持冒泡. 适用于鼠标移入移出时子元素也会执行事件的场景,或者单一标签. 2 ...
php鼠标已入移除,angularjs鼠标移入移出实现显示隐藏
操作主要是ng-mouseenter和ng-mouseleave配合使用,同时注意$parent实现动态拼接变量截图如下: CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部 ...
Vue实现集成使用第三方Animate.css动画库详细教程（解决鼠标移入移出闪烁问题）
vue通过第三方集成Animate.css简单快速的实现动画,通过类名引用,可以轻松实现Animate的所有动画,Animate.css是一款强大的预设css3动画库,Animate.css内置了很多 ...
jq鼠标移入移出显示和隐藏_jQuery实现鼠标移入移出事件切换功能示例
这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下. jQuery实现鼠标移入移出事件切换功能 ...
axure 鼠标变成手,Axure教程｜鼠标移入移出自动显示与隐藏三级菜单
前几天因工作需要做一个鼠标移入显示隐藏菜单,鼠标移出自动隐藏菜单, 做的时候觉得没有什么问题,做完后预览就发现一个很严重的问题,就是鼠标移出一级菜单向二级菜单时二级菜单不显示,或者二级菜单显示三级菜单 ...
js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){$(".weixinTop").show();},function( ...
html设置鼠标移入移出样式,鼠标移入移出_CSS3实现鼠标移入移出时改变样式的效果...
摘要腾兴网为您分享:CSS3实现鼠标移入移出时改变样式的效果,壹学车,小猿口算,网易uu,万步有约等软件知识,以及山西个税,自动伴奏软件,成都农商银行app,儿歌千千,抖音群控系统,qq领赞,201 ...

JS_鼠标移入移出渐变效果（类似css3中的transition或animation和@keyframes）

JS_鼠标移入移出渐变效果（类似css3中的transition或animation和@keyframes）相关推荐

最新文章

热门文章