弹幕和回到顶部前端web

弹幕

1.效果演示

2.相关代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹幕</title>
  6.     <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  13.         img {
  15.             width: 50px;
  16.             height: 50px;
  18.         }
  20.         .bottom {
  21.             width: 100%;
  22.             height: 80px;
  23.             position: fixed;
  24.             bottom: 0px;
  25.             border: 1px solid black;
  26.             z-index: 99;
  28.         }
  30.         .inner {
  32.             position: absolute;
  33.             margin-top: 15px;
  34.             margin-left: 625px;
  35.         }
  37.         .in {
  38.             width: 300px;
  39.             height: 30px;
  40.         }
  42.         .te {
  43.             margin-top: -45px;
  44.             margin-left: 68px;
  45.         }
  47.         .box {
  48.             width: 100%;
  49.             height: 100%;
  50.             border: 1px solid red;
  51.             position: absolute;
  52.             overflow: hidden;
  53.         }
  55.         .test{
  56.             font-size: 20px;
  57.             position: relative;
  58.             /*left: 1000px;*/
  59.             /*top: 300px;*/
  61.         }
  63.     </style>
  64. </head>
  65. <body>
  67. <div class="box"><span class="test">文字啊</span> </div>
  68. <!--弹幕-->
  69. <div class="bottom">
  70.     <div class="inner">
  71.         <img src="images/弹幕.jpg">
  72.         <div class="te">
  73.             <input id="txt" class="in" type="text" placeholder="请输入弹幕">
  74.             <input type="button" value="发出">
  75.         </div>
  76.     </div>
  77. </div>
  78. <script>
  79.     $(function () {
  81.         $("input[type='button']").click(function () {
  82.             var colors = ["red","yellow","blue","black","orange","pink"];
  83.             var co = parseInt(Math.random()*colors.length);
  85.             console.log($(".in").val());
  86.             var hi = parseInt((Math.random()*400)+20);
  87.             console.log(hi);
  88.             var inVal = $(".in").val();
  89.             $("<span></span>").text(inVal)
  90.                 .addClass("test")
  91.                 .css("color",colors[co])
  92.                 .css("left","1000")
  93.                 .css("top",hi)
  94.                 .animate({left:-100},10000,"linear",function () {
  95.                     $(this).remove();
  96.                 })
  97.                 .appendTo($(".box"))
  98.             ;
  99.            $("#txt").val("");
  100.         });
  102.         $(window).keyup(function (e) {
  103.             if (e.keyCode == 13){
  104.                 $("input[type='button']").click();
  105.             }
  107.         });
  109.     })
  111. </script>
  113. </body>
  114. </html>

2.回到顶部

1.效果演示

2.相关代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
  8.     <style>
  9.         div{
  10.             width: 100%;
  11.             height: 3000px;
  13.         }
  14.         a{
  15.             top: 500px ;
  16.             left: 1400px;
  17.             position: fixed;
  18.             display: block;
  19.             width: 51px;
  20.             height: 103px;
  21.             background: url("images/top.jpg") no-repeat -149px -96px ;
  22.             /*border: 1px solid red;*/
  23.             overflow: hidden;
  24.             cursor: pointer;
  25.         }
  26.         a:hover{
  27.             background: url("images/top.jpg") no-repeat -236px -96px ;
  29.         }
  31.     </style>
  32. </head>
  33. <body>
  34. <!--返回top的图片-->
  35. <a id="top"></a>
  36. <div></div>
  38. <script>
  40.     $(window).scroll(function () {
  42.         console.log($(window).scrollTop());
  43.        var to =  $(window).scrollTop();
  44.       if(to>=1500){
  45.           $("#top").fadeIn(200);
  46.       }else {
  47.           $("#top").fadeOut(200);
  48.       }
  49.     });
  51.     $("#top").click(function () {
  52.         $("html,body").animate({scrollTop:0},1000);
  53.     });
  55. </script>
  57. </body>
  58. </html>

弹幕和回到顶部前端web的更多相关文章

  1. web页面浮动回到顶部功能和浮动广告

    实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...

  2. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  3. js——页面回到顶部

    很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...

  4. 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  5. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  6. iOS点击状态栏回到顶部底层实现原理

    在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...

  7. 【JavaScript Demo】回到顶部功能实现

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

  8. 浮动【电梯】或【回到顶部】小插件：iElevator.js

    iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...

  9. iOS tableView 滚动后回到顶部

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint contentOffsetPoint = self.tableView ...

随机推荐

  1. cmake-add_definitions

    add_definitions: Adds -D define flags to the compilation of source files. add_definitions(-DFOO -DBA ...

  2. VHDL的库

    STD_LOGIC_ARITH 扩展了UNSIGNED.SIGNED.SMALL_INT(短整型)三个数据类型,并定义了相关的算术运算和转换函数. --======================== ...

  3. U盘单个文件最大4G限制问题

    1.不同文件系统的最大分区以及单个文件最大限制 FAT32单个文件最大不能超过4G,超过4G就不能读取了. NTFS(Windows):支持最大分区2TB,最大文件2TB FAT16(Windows) ...

  4. RabbitMQ 初探

    有哪些优点 可靠性:RabbitMQ 提供了多种技术可以让你在性能和可靠性之间进行权衡.这些技术包括持久性.投递确认.发布者证实和高可用性. 灵活的路由:提供了多种内置交换机类型.如果你有更复杂的路由 ...

  5. Eclipse技巧

    1 alt + / 提示 2 ctrl + shift + g 查找方法被谁调用 3 ctrl + t 查看某个类的继承关系 4 alt + 上/下 移动当前行上或者下 5 ctrl + / 行注释 ...

  6. svn服务器快速搭建及简单配置

    http://www.360doc.com/content/11/0711/19/5131531_132950891.shtml 简介Svn已经不容质疑的成为了一款流行的代码控制工具,但是你是否还在为 ...

  7. delphi TStringList 用法详解

    转自: http://blog.163.com/you888@188/blog/static/67239619201472365642633/ delphi TStringList 用法详解 2014 ...

  8. Android Sqlite 增删改查

    模拟 查询所有数据,增加一条数据,修改某一条数据,删除某一条数据: SQLiteOpenHelper 帮助类的介绍: import android.content.Context; import an ...

  9. Spring Boot 2 实践记录之 组合注解原理

    Spring 的组合注解功能,网上有很多文章介绍,不过都是介绍其使用方法,鲜有其原理解析. 组合注解并非 Java 的原生能力.就是说,想通过用「注解A」来注解「注解B」,再用「注解B」 来注解 C( ...

  10. SQL SERVER 2014--内存表实现秒杀场景

    ===================================== 网上针对“秒杀”的解决方案很多,数据拆分化解热点,READPAST解决锁问题,应用程序排队限制并发等等很多方式,各有优缺点, ...