非常基础的JS动画演示

简介: 这个例子使用setTimeout实现非常简单的动画效果。 div{    height:200px;    width:600px;    background-color:#CCCCCC;}#test1{    background:#99CC00;    position:fixed;   ...

这个例子使用setTimeout实现非常简单的动画效果。

<style type="text/css">
div
{
    height
: 200px ;
    width
: 600px ;
    background-color
: #CCCCCC ;
}
#test1
{
    background
: #99CC00 ;
    position
: fixed ;
    left
: 300px ;
    filter
: alpha(opacity=0) ;
}
</style>

 

< div  id ="test1" ></ div >
< button  onclick ="doSome()" > 测试 </ button >

 

Code
<script language="javascript">
function $(id)
{
    
return document.getElementById(id);
}
function doSome()
{
    
this.fadeIn($("test1"));
}

function setOpacity(obj,value)
{
    
//debugger;
    if(obj.filters)    
    {
        obj.style.filter
='alpha(opacity='+value+')';
    }
    
else
        obj.style.opacity
=value/100;
    
}

function fadeIn(obj)
{
    
for(var i=0;i<=100;i+=5)
    {
        (
function(){
            
var pos=i;
            setTimeout(
function(){setOpacity(obj,pos);},(pos+1)*10);
        }
        )();
    }
}
</script>

 

 

相关文章
|
7天前
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
|
2月前
|
JavaScript 前端开发
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
|
2月前
|
JavaScript 前端开发
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
|
2月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
2月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
27 1
|
2月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
33 2
|
4月前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
|
4月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
65 0
|
3月前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
|
5月前
|
JavaScript 前端开发 UED
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
【8月更文挑战第30天】在Vue.js中,动画与过渡效果不仅是视觉点缀,更是提升用户体验的关键。通过流畅的动态效果,应用的互动性和吸引力得以增强,从而提高用户满意度和参与度。`&lt;transition&gt;`和`&lt;transition-group&gt;`组件结合CSS过渡,可轻松实现元素的进入、离开及列表变化动画。合理的性能优化,如使用硬件加速,能避免页面卡顿,确保动画既美观又高效。下面是一个简单的淡入淡出效果示例,展示了如何利用Vue.js实现平滑的动画过渡。总之,恰当的动画设计能显著提升应用的用户体验。
66 0
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!