彈幕和回到頂部前端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.回到頂部
top.gif
<!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>