1 弹幕效果案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 62.5%;
}
.boxDom {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom {
position: fixed;
bottom: 0px;
width: 100%;
height: 100px;
background-color: #666;
}
.content {
display: inline-block;
width: 430px;
height: 40px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.txt {
border: none;
width: 300px;
height: 30px;
border-radius: 6px;
}
.btn {
width: 60px;
height: 30px;
background-color: #f90000;
color: #fff;
border: none;
}
span {
width: 300px;
height: 40px;
position: absolute;
color: #000;
white-space: nowrap;
font-size: 32px;
line-height: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="boxDom" id="boxDom">
<div class="idDom">
<div class="content">
<input type="text" id="txt" class="txt"/>
<input type="button" value="发送" id="btn" class="btn" />
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
var colors = ["red","green","pink","blue","skyblue","yellowgreen","purple","navy","cyan"];// 数组角标0~len-1
// 注册事件
$("#btn").click(function() {
var randomColor = parseInt(Math.random()*colors.length);
var randomY = parseInt(Math.random()*400);
$("<span></span>") // 创建元素
.text($("#txt").val()) // 设置元素内容为输入的内容
.css("color",colors[randomColor]) // 设置字体颜色
.css("left","1400px") // 设置left位置
.css("top",randomY) // 设置top值
.animate({left:-600},10000,"linear",function() {
// 到了终点 删除span
$(this).remove();
}) // 动画
.appendTo($("#boxDom"));
$("#txt").val("");
});
});
//回车发送
$("#txt").keyup(function(e) {
if(e.keyCode==13) {
$("#btn").click(); //让按钮触发单击事件
}
});
</script>
</body>
</html>
2 val() val() 方法返回或设置被选元素的值 一般用于input表单元素
$(".txt").val() 取值
$(".txt").val("hello") 设置值
3 with() 与 height()
//获取元素的宽度
$(".box").css("width");
$("box").width();
//设置元素宽度
$(".box").css("width","300px");
$(".box").width(300);
//获取元素的高度
$(".box").css("height");
$("box").height();
//设置元素高度
$(".box").css("height","300px");
$(".box").height(300);
css()与 width()、height()的区别：width()、height()可以直接使用数字设置
$(select).innerWidth() //padding左 + width + padding右 number类型
$(select).innerHeight() //padding上 + height + padding下 number类型
console.log($("#box").outerWidth()); number类型
console.log($("#box").outerHeight()); number类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-size: 62.5%;
}
.boxDom {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.idDom {
position: fixed;
bottom: 0px;
width: 100%;
height: 100px;
background-color: #666;
}
.content {
display: inline-block;
width: 430px;
height: 40px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.txt {
border: none;
width: 300px;
height: 30px;
border-radius: 6px;
}
.btn {
width: 60px;
height: 30px;
background-color: #f90000;
color: #fff;
border: none;
}
span {
width: 300px;
height: 40px;
position: absolute;
color: #000;
white-space: nowrap;
font-size: 32px;
line-height: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="boxDom" id="boxDom">
<div class="idDom">
<div class="content">
<input type="text" id="txt" class="txt"/>
<input type="button" value="发送" id="btn" class="btn" />
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
var colors = ["red","green","pink","blue","skyblue","yellowgreen","purple","navy","cyan"];// 数组角标0~len-1
// 注册事件
$("#btn").click(function() {
var randomColor = parseInt(Math.random()*colors.length);
var randomY = parseInt(Math.random()*400);
$("<span></span>") // 创建元素
.text($("#txt").val()) // 设置元素内容为输入的内容
.css("color",colors[randomColor]) // 设置字体颜色
.css("left","1400px") // 设置left位置
.css("top",randomY) // 设置top值
.animate({left:-600},10000,"linear",function() {
// 到了终点 删除span
$(this).remove();
}) // 动画
.appendTo($("#boxDom"));
$("#txt").val("");
});
});
//回车发送
$("#txt").keyup(function(e) {
if(e.keyCode==13) {
$("#btn").click(); //让按钮触发单击事件
}
});
</script>
</body>
</html>
2 val() val() 方法返回或设置被选元素的值 一般用于input表单元素
$(".txt").val() 取值
$(".txt").val("hello") 设置值
3 with() 与 height()
//获取元素的宽度
$(".box").css("width");
$("box").width();
//设置元素宽度
$(".box").css("width","300px");
$(".box").width(300);
//获取元素的高度
$(".box").css("height");
$("box").height();
//设置元素高度
$(".box").css("height","300px");
$(".box").height(300);
css()与 width()、height()的区别：width()、height()可以直接使用数字设置
$(select).innerWidth() //padding左 + width + padding右 number类型
$(select).innerHeight() //padding上 + height + padding下 number类型
console.log($("#box").outerWidth()); number类型
console.log($("#box").outerHeight()); number类型
console.log($("#box").outerHeight(true)); //带参数true 表示包含margin number类型
4 scrollLeft() 与 scrollTop()
scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。
滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移.当滚动条位于最上边时，位置是0
$(function() {
$(window).scroll(function() {
console.log($(window).scrollTop());
console.log($(window).scrollLeft());
});
});
3267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
