弹幕和回到顶部前端web
弹幕和回到顶部前端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的更多相关文章
- web页面浮动回到顶部功能和浮动广告
实现测试浮动回到顶部 法一:用js实现<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=& ...
- 【JQ+锚标记实现点击页面回到顶部】
前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...
- 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以
唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- iOS点击状态栏回到顶部底层实现原理
在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...
- 【JavaScript Demo】回到顶部功能实现
随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...
- 浮动【电梯】或【回到顶部】小插件:iElevator.js
iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...
- iOS tableView 滚动后回到顶部
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint contentOffsetPoint = self.tableView ...
随机推荐
- HDU 2546 饭卡 (01背包问题)
题意:中文的吧,飘过~ 析:学过DP的都应该感觉到是动态规划吧,就是一个01背包问题,不同的是,这个题又加入一些新的条件,就是不满5元不能消费,过了5元即使超了也行(这个学校真不错,都可以预支),最后 ...
- TableView编辑状态下跳转页面的崩溃处理
29down votefavorite 12 I have a viewController with a UITableView, the rows of which I allow to edit ...
- Swift中的闭包(Closure)[转]
闭包在Swift中非常有用.通俗的解释就是一个Int类型里存储着一个整数,一个String类型包含着一串字符,同样,闭包是一个包含着函数的类型.有了闭包,你就可以处理很多在一些古老的语言中不能处理的事 ...
- 点云库PCL学习
1. 点云的提取 点云的获取:RGBD获取 点云的获取:图像匹配获取(通过摄影测量提取点云数据) 点云的获取:三维激光扫描仪 2. PCL简介 PCL是Point Cloud Library的简称,是 ...
- C++ 引用 指针 使用举例
1. 请看下程序 inline void CScanLineFill::removeOldNodeAET(AET* &aetList, const float yCurrent) { AET* ...
- 在EBS里新建一个OU的步骤
http://blog.csdn.net/kevingao/archive/2010/09/11/5877092.aspx 在EBS里新建一个OU的步骤1. 建立OU组织,关联SOB,LE2. 系统管 ...
- 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 ...
- cassandra集群缩容与剔除问题节点
今天在操作cassandra集群数据迁移时发生了一些意料之外的事情,服务器迁移前与迁移后同样为5台,但是不知道是什么原因导致的,迁移过后的节点居然多出了一台cassandra节点,个人瞬间感觉莫名其妙 ...
- Get User CustomNotificationAddresses
select pv.StringValue, * from tbl_Identity i left join tbl_PropertyValue pv on pv.ArtifactId=conv ...
- DBCC--LOG
DBCC LOGTo retrieve the transaction log for a given database.对应日志文件较大的数据库,慎用该命令Uasge:DBCC LOG(<db ...