User-Profile-Image
hankin
  • 5
  • 首页
  • 仓库
  • 留言
  • 免费下载v1.3.5
  • 分类
    • Yii2
    • wordpress
    • typeecho
    • server
    • qrcode
    • postgresql
    • php
    • jquery
    • javascript
    • html5
    • go
    • css3
    • coding
  • 页面
    • icon图标
    • 专题
    • 建站维护
    • 留言
    • 站点地图
  • 友链
    • 老赵茶馆
    • 淮城一只猫
    • 雨林寒舍
    • 饼子的博客
    • 轩枫阁
    • 广告联盟大事记
    • 主题笔记
    • 八方博客
    • 张维龙的个人博客
    • 瑞课学院
    • BBJ不败君
    • 悠悠吧
    • Heanny Blog
    • 资源谷
    • Yolen
Help?

Please contact us on our email for need any support

Support
    首页   ›   正文
css3

仿QQ空间分享—变速运动

2018-06-08 13:39:10
1399  0 9

废话不多说,直接上效果图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            height: 200px;
            width: 200px;
            position: relative;
            left: -200px;
            background-color: #6effcd;
            margin-top: 50px;
        }
        #btn{
            height: 90px;
            width: 30px;
            position: absolute;
            left: 200px;
            top: 65px;
            background-color: #73eeff;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
  <div id="container">
      <span id="btn">点击展开</span>
  </div>

    <script>
        window.onload = function(){
        var container=document.getElementById('container');
        var btn=document.getElementById('btn');
        btn.onclick = function(){
            if(container.offsetLeft==0)
            {
                moveStart(-200);
                btn.innerHTML='点击展开'
            }
            else{
                moveStart(0);
                btn.innerHTML='点击收缩'
            }
        };
        };
        var timer = null;
        function moveStart(Target)
        {
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=(Target-container.offsetLeft)/5;
               speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(container.offsetLeft==Target)
                {
                    clearInterval(timer);
                }
                else{
                    container.style.left=container.offsetLeft+speed+'px';
                }
            },30)
        }

    </script>
</body>
</html>

如本文“对您有用”,欢迎随意打赏作者,让我们坚持创作!

9 打赏
评论 (0)

点击这里取消回复。

欢迎您 游客  

hankin
smarty_hankin主题 持续为开发者免费开源!
143文章 287评论 722点赞 178308浏览

关注公众号 回复【下载主题】
加QQ群1018841266
最新评论
+204
随机文章
为什么说php是最适合新手的编程语言?
11个月前
分享几个Typecho中常用的调用函数
3年前
php中update是什么意思
11个月前
vscode和python是什么
11个月前
PHP即将引入Union Types,投票已通过!
11个月前
我的作品




tags
css3 html5 javascript php postgresql qrcode typeecho wordpress wordpress主题 Yii2
Copyright © 2021 网站备案号: 浙ICP备20002401号
smarty_hankin 主题. Designed by hankin
主页
页面
  • icon图标
  • 专题
  • 建站维护
  • 留言
  • 站点地图
博主
hankin
hankin 管理员
博客模板_网站模板_HTML模板_博客模板网站免费下载
143 文章 287 评论 178308 浏览
测试
测试
赞赏作者

请通过微信、支付宝 APP 扫一扫

感谢您对作者的支持!

 支付宝 微信支付