zoukankan      html  css  js  c++  java

  • 横向移动-广告图（web）

    项目

    （移动的广告牌）

    要求：

    1，实现图片一次以移动的方式出现，到最后一张完全出现时，回弹到第一张

    2，鼠标放在图片上面图片移动，鼠标离开，图片停止移动
    HTML结构 <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>回弹效果</title>
            <link rel="stylesheet" href="css/index.css"/>
        </head>
        <body>
            
            <!--创建一个外盒子-->
            <div id="box">
                
                <!--外盒子里面在放一个盒子，用来存放图片-->
                <div id="imgs">
                    <img src="img/1.jpg" alt="" />
                    <img src="img/2.jpg" alt="" />
                    <img src="img/3.jpg" alt="" />
                    <img src="img/4.jpg" alt="" />
                    <img src="img/5.jpg" alt="" />
                    <img src="img/6.jpg" alt="" />
                </div>

            </div>
        </body>
    </html>

    <script type="text/javascript" src="js/index.js"></script>
    CSS布局


    *{
        padding: 0;
        margin: 0;
    }
    /*添加背景图片，个人爱好*/
    body{
        background: url(img/4.jpg);
    }

    /*注意给外盒子设置边款，并隐藏超出部分*/
    #box{
        position: relative;
        margin: 10px auto;
         500px;
        height: 250px;
        border: 5px solid red;
        overflow: hidden;
        /*background-color: chocolate;*/
    }

    /*放图片的盒子设为绝对定位；宽度为所有图片的宽度和，

    这样可以使得图片横向排列；隐藏超出部分*/
    #imgs{
        position: absolute;
        margin: 10px;
         2400px;
        height: 230px;
        overflow: hidden;
    }

    /*给所有图片设置统一的高度和宽度；向左浮动；相对定位*/
    #imgs img{
        position: relative;
        float: left;
         400px;
        height: 230px;
        
    }
    JS动画


    //使用$（）函数
    function $(id){
        return document.getElementById(id);
    }

    //当鼠标悬浮在大盒子内时（获取焦点），开起定时器
    $("box").onmouseover = function(){
        clearInterval(timer);
        timer = setInterval(runTimes,3);

    }

    //当鼠标离开在大盒子内时（失去焦点），停止定时器
    $("box").onmouseout = function(){
          clearInterval(timer);
    }

    var poit = 10;//创建一个变量来接收我们要改变的目标值
    var leader = 0;//创建一个变量，设置动画效果
    var timer = null;//定时器变量，开启和停止定时器需要


    //创建一个函数，实现目标值的改变
    function runTimes(){
        poit --;
        
        //设置动画的方式，使得leader的值为0
        leader = leader + (poit - leader)/10;
        
        $("imgs").style.marginLeft =  leader + "px";
       

       //实现回弹效果（所需要的值根据具体情况设置）

       //如果最后一张图片完全显示出来了，就重新给目标值赋予初始值
        if (poit < -1900) {
            poit = 10;
        }
    }
    思路

    1，一个大盒子里面放一个小盒子，小盒子里放图片

    2，大盒子与小盒子的高度相当，小盒子的宽度为所有图片的宽度之和

    3，图片的宽高相等，图片的高度与小盒子相同，并向左浮动

    4，设置小盒子的外边距的初始值为0，超出部分隐藏

    5，调用定时器改变小盒子的外边距，达到图片向左移的效果（达到一定值在重新赋予初始的值）
  • 相关阅读:
    Python 文件操作
    Python 操作 sqlite
    Python中的random模块
    Linux系统下的/etc/nsswitch.conf文件
    Python 列表/元组/字典总结
    快斗之翼：python2的print和python3的print()
    田小计划：图解Python深拷贝和浅拷贝
    Python 自省指南
    Python运算符优先级
    tc: 模拟网络异常的工具
  • 原文地址：https://www.cnblogs.com/bigerf/p/6013267.html
Copyright © 2011-2022 走看看