弹幕和回到顶部前端web

弹幕

1.效果演示

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.效果演示

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>

弹幕和回到顶部前端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. HDU 2546 饭卡 (01背包问题)

    题意:中文的吧,飘过~ 析:学过DP的都应该感觉到是动态规划吧,就是一个01背包问题,不同的是,这个题又加入一些新的条件,就是不满5元不能消费,过了5元即使超了也行(这个学校真不错,都可以预支),最后 ...

  2. TableView编辑状态下跳转页面的崩溃处理

    29down votefavorite 12 I have a viewController with a UITableView, the rows of which I allow to edit ...

  3. Swift中的闭包(Closure)[转]

    闭包在Swift中非常有用.通俗的解释就是一个Int类型里存储着一个整数,一个String类型包含着一串字符,同样,闭包是一个包含着函数的类型.有了闭包,你就可以处理很多在一些古老的语言中不能处理的事 ...

  4. 点云库PCL学习

    1. 点云的提取 点云的获取:RGBD获取 点云的获取:图像匹配获取(通过摄影测量提取点云数据) 点云的获取:三维激光扫描仪 2. PCL简介 PCL是Point Cloud Library的简称,是 ...

  5. C++ 引用 指针 使用举例

    1. 请看下程序 inline void CScanLineFill::removeOldNodeAET(AET* &aetList, const float yCurrent) { AET* ...

  6. 在EBS里新建一个OU的步骤

    http://blog.csdn.net/kevingao/archive/2010/09/11/5877092.aspx 在EBS里新建一个OU的步骤1. 建立OU组织,关联SOB,LE2. 系统管 ...

  7. How To Use XDOLoader to Manage, Download and Upload Files? (文档 ID 469585.1)

    Applies to: BI Publisher (formerly XML Publisher) - Version 5.6.3 to 5.6.3 [Release 5] Information  ...

  8. cassandra集群缩容与剔除问题节点

    今天在操作cassandra集群数据迁移时发生了一些意料之外的事情,服务器迁移前与迁移后同样为5台,但是不知道是什么原因导致的,迁移过后的节点居然多出了一台cassandra节点,个人瞬间感觉莫名其妙 ...

  9. Get User CustomNotificationAddresses

    select pv.StringValue, * from tbl_Identity    i left join tbl_PropertyValue pv on pv.ArtifactId=conv ...

  10. DBCC--LOG

    DBCC LOGTo retrieve the transaction log for a given database.对应日志文件较大的数据库,慎用该命令Uasge:DBCC LOG(<db ...