zoukankan      html  css  js  c++  java
  • 用简单的代码让一组静态图片变成gif动画

    比如这组图片:
     
     
    变成这样的gif动画:
     
    是不是很神奇。。。。
     
    先看html 、样式。很简单,一个div,然后引入图片。
     
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>动态效果</title>
            <style type="text/css">
                .anim{
                    width :200px;
                    height : 300px;
                    background:url(animl1.jpg) ;
                    background-position : 0px 0px;
                }
        
            </style>
        </head>
        <body>
            <div class="wrapper">            
                <div class="anim"></div>            
            </div>
            
         </body>
    </html>

    再看js:
    var anim = document.querySelector(".anim");
    
    var left = 0;
    
    setInterval(function(){
        left +=200;
        if(left==1600){
            left = 0;
        }
    anim.style.backgroundPosition = -left+"px 0px";
    },100);
    
    
    这就OK了! 
     
    原理在于background-position(背景图像的起始位置)设置200px的宽度主要是因为这组每一部分宽度为200px,根据background-position的作用,在定义left的偏移量。为什么最后left前面要加上-呢?这组图片是递进关系,随着往右的偏移,背景图片在向左递减。比如background-position:200px 0px;它是以容器的左上角为参考,向左偏移200px,也就成为这样:
     
    第一幅图就向左偏移200px,消失在显示范围内了。
    然后当它为-1600px时,到达最后一幅图,把left设置0,又重新开始。再根据setInterval()方法,无限循环,就得到了gif动态效果。
     
  • 相关阅读:
    字符集转换
    基础语法
    python print格式化输出。
    错误:SyntaxError: Missing parentheses in call to 'print'
    delphi 线程教学第一节:初识多线程
    delphi 7 信息对话框的按钮屏蔽键盘操作,只允许鼠标点击
    delphi 7 下安装 indy 10.5.8 教程
    delphi 实现vip126发邮件
    delphi 基础书籍推荐
    delphi 编码速度提升技能
  • 原文地址:https://www.cnblogs.com/wlpower/p/6378779.html
Copyright © 2011-2022 走看看