简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 春 节 20
2021年 情人节 22
2021年 元宵节 34
2022年 元 旦 343
全部 综合数码金融娱乐服务报刊政府机构 推荐 申请 友情  
  • 您现在的位置:首页 >> JS >> 内容

    js实现缓动动画

    内容摘要: !DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'titleTitle/titlestyle* { margin: 0; padding: 0; border: none; list-style: none;}body { background-color: pink;}#nav { width: 900p......

      <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Title</title>


    <style>

    * {

    margin: 0;

    padding: 0;

    border: none;

    list-style: none;

    }


    body {

    background-color: pink;

    }


    #nav {

    width: 900px;

    height: 63px;

    background: url("images/doubleOne.png") no-repeat right center #fff;

    margin: 0 auto;

    margin-top: 50px;

    border-radius: 5px;

    position: relative;

    }


    #nav ul {

    line-height: 70px;

    }


    #nav ul li {

    float: left;

    height: 63px;

    width: 88px;

    text-align: center;

    cursor: pointer;

    position: relative;

    }


    #t_mail {

    width: 88px;

    height: 63px;

    background: url("images/tMall.png") no-repeat;

    position: absolute;

    }

    </style>

    </head>

    <body>

    <nav id="nav">

    <span id="t_mail"></span>

    <ul>

    <li>双11狂欢</li>

    <li>服装会场</li>

    <li>数码家电</li>

    <li>母婴童装</li>

    <li>手机会场</li>

    <li>美妆会场</li>

    <li>家居建材</li>

    <li>进口会场</li>

    <li>飞猪旅行</li>

    </ul>

    </nav>


    <script>

    window.onload = function () {

    var nav = $('nav');

    var t_mall = nav.children[0];

    var ul = nav.children[1];

    var allLis = ul.children;

    var beginX = 0;


    for (var i = 0; i < allLis.length; i++) {

    var li = allLis[i];

    li.onmouseover = function () {

    end = this.offsetLeft;

    }


    li.onmousedown = function () {

    beginX = this.offsetLeft;

    }


    li.onmouseout = function () {

    end = beginX;

    }

    }


    var begin = 0, end = 0;

    setInterval(function () {

    begin = begin + (end - begin) / 10;

    t_mall.style.left = begin + 'px';

    }, 10)


    function $(id) {

    return typeof id ? document.getElementById(id) : null;

    }

    }

    </script>

    </body>

    </html>

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/11/25 发布时间:16:38:26 点击:409 录入:齐天大圣
  • 上一篇:js代码下按指定格式显示日期时间样式特效
  • 下一篇:老y程序在新版chrome中顶部日期部分显示unde
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V3.88 Build 20.12.22(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021