专栏首页Spring相关弹幕和回到顶部前端web

弹幕和回到顶部前端web

弹幕和回到顶部前端web

弹幕

1.效果演示

ceshi.gif

2.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹幕</title>
    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        img {

            width: 50px;
            height: 50px;

        }

        .bottom {
            width: 100%;
            height: 80px;
            position: fixed;
            bottom: 0px;
            border: 1px solid black;
            z-index: 99;

        }

        .inner {

            position: absolute;
            margin-top: 15px;
            margin-left: 625px;
        }

        .in {
            width: 300px;
            height: 30px;
        }

        .te {
            margin-top: -45px;
            margin-left: 68px;
        }

        .box {
            width: 100%;
            height: 100%;
            border: 1px solid red;
            position: absolute;
            overflow: hidden;
        }

        .test{
            font-size: 20px;
            position: relative;
            /*left: 1000px;*/
            /*top: 300px;*/

        }

    </style>
</head>
<body>

<div class="box"><span class="test">文字啊</span> </div>
<!--弹幕-->
<div class="bottom">
    <div class="inner">
        <img src="images/弹幕.jpg">
        <div class="te">
            <input id="txt" class="in" type="text" placeholder="请输入弹幕">
            <input type="button" value="发出">
        </div>
    </div>
</div>
<script>
    $(function () {

        $("input[type='button']").click(function () {
            var colors = ["red","yellow","blue","black","orange","pink"];
            var co = parseInt(Math.random()*colors.length);

            console.log($(".in").val());
            var hi = parseInt((Math.random()*400)+20);
            console.log(hi);
            var inVal = $(".in").val();
            $("<span></span>").text(inVal)
                .addClass("test")
                .css("color",colors[co])
                .css("left","1000")
                .css("top",hi)
                .animate({left:-100},10000,"linear",function () {
                    $(this).remove();
                })
                .appendTo($(".box"))
            ;
           $("#txt").val("");
        });


        $(window).keyup(function (e) {
            if (e.keyCode == 13){
                $("input[type='button']").click();
            }


        });


    })


</script>

</body>
</html>

2.回到顶部

1.效果演示

top.gif

2.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>

    <style>
        div{
            width: 100%;
            height: 3000px;

        }
        a{
            top: 500px ;
            left: 1400px;
            position: fixed;
            display: block;
            width: 51px;
            height: 103px;
            background: url("images/top.jpg") no-repeat -149px -96px ;
            /*border: 1px solid red;*/
            overflow: hidden;
            cursor: pointer;
        }
        a:hover{
            background: url("images/top.jpg") no-repeat -236px -96px ;


        }

    </style>
</head>
<body>
<!--返回top的图片-->
<a id="top"></a>
<div></div>



<script>


    $(window).scroll(function () {

        console.log($(window).scrollTop());
       var to =  $(window).scrollTop();
      if(to>=1500){
          $("#top").fadeIn(200);
      }else {
          $("#top").fadeOut(200);
      }
    });

    $("#top").click(function () {
        $("html,body").animate({scrollTop:0},1000);
    });


</script>

</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 手风琴图片和钢琴导航栏JQ滑动特效

    Dream城堡
  • BootStrap-table的使用实现排序功能

    Dream城堡
  • 下拉菜单;手风琴;九宫格的Jquery的使用实例

    Dream城堡
  • 【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮

    悟空聊架构
  • 用CSS实现当下最火的Neumorphism UI 风格

    最开始是一位来自乌克兰的设计师 Alexander Plyuto 在许多平台发布了自己设计的新作品。 接下来我们来看看这个作品是长什么样子的。

    学前端
  • 美化ThinkPHP

    然后我们修改这里面的代码就行的。下面的模板是我自己项目修改用的。大家也可以用AJAX加载的。

    似水的流年
  • 自定义按钮~自适应布局~常见bug

    超然
  • CSS Box Shadow 除了做阴影效果还能做啥

    有意思的是,Box Shadow支持多个值,值之间用,分隔。也就是说,一个元素上可以有任意多个阴影。如果我们只设置阴影的水平和垂直偏移量,不设置模糊距离(默认为...

    Joel
  • 美化ThinkPHP

    首先我们来看看Thinkphp的模板, 成功界面: ? 错误页面 ? 说到美化的话,我们需要先找到这个模板在那里 ThinkPHP/Tp...

    似水的流年
  • 来来来,手把手教你做大白!

    这个东西也是经常被拿来玩的一个小东西,就是通过border-radius 去自己切一个图形。

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券