页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 图象特效 → 正文内容

仿Vista进程条效果

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<html xmlns="http://schemas.microsoft.com/intellisense/html-401">  
<head>  
    <title></title>  
</head>  
<body>  
    <div style="position:absolute;top:10%;width:100; left: 108px;">  
        <image src="/upload/2007322214542779.jpg" style="position: absolute;  
            left: 84px; top: 137px;" />  
        <div id="pb" style="position: absolute; left: 86px; top: 137px;z-index:5;overflow:hidden;width:130;" >  
            <img src="/upload/2007322214550990.jpg"/>  
            <div id="highlight" style="background:#ffffff;left: -500px; position: absolute; top: -1px;width:100;height:20;filter:Alpha(Opacity=75,FinishOpacity=0,Style=2)"></div>  
        </div>  
        <div style="position:absolute;top:83px;width:180px; left: 148px;">  
        加载中请稍候......  
        </div>  
    </div>  
</body>  
<script type="text/jscript">  
function DoubleAnimation(target,targetProperty,from,to,Duration)  
{  
    this.Begin=function anonymous()  
    {  
        target[targetProperty]=from;  
        var starttime=new Date();  
        setTimeout(StoryBoard(),1);  
        function StoryBoard()  
        {  
            return function()  
            {                   
                var now=new Date();  
                var d=now.getTime()-starttime.getTime();  
                target[targetProperty]=Math.round(from+(to-from)*d/Duration);  
                if(d<Duration)setTimeout(StoryBoard(),10);  
            }  
        }  
    }  
}  
var story=new DoubleAnimation(highlight.style,"left",-100,100,1300)  
setInterval("story.Begin()",1300);  
</script>  
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：仿Vista进程条效果

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
下一篇文章：js 新浪的一个图片播放图片轮换效果代码

·在百度中搜索关于“仿Vista进程条效果”相关内容
·在谷歌中搜索关于“仿Vista进程条效果”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

仿Vista进程条效果

文章评论

同类文章

最近更新

热点排行

仿Vista进程条效果

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行