JavaScript（四）
1.图层移动：遇到右边距弹回来，遇到左边距再弹回去
2.鼠标拖拽移动图层：鼠标按住拖动图层，松开之后图层停留在鼠标松开的位置
3.通过点击关闭按钮将广告层隐藏：
4.折叠菜单：通过点击主菜单将子菜单进行展开或隐藏
5.实现循环播放广告：
6. 查询的信息分页：
图层移动：遇到右边距弹回来，遇到左边距再弹回去
主要是比较左边距和浏览器的边缘位置是否相同，如果相同就弹回
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.d1{
width:100px ;
height:100px ;
background-color: red;
position:absolute ;
left: 0px;
top: 100px;
}
</style>
<body>
<input type="button" value="start" id="btnStart" name="">
<div class="d1"></div>
</body>
</html>
<script type="text/javascript">
var d1=document.querySelector(".d1");
var btnStart=document.getElementById("btnStart");
btnStart.onclick=moveRight;
//水平移动方向的标识，0表示向右移动，1表示向左移动
var h=0;
//获取层的样式
var style=window.getComputedStyle(d1);
function moveRight(){
var left=parseInt(style.left);
//根据元素目前在的状态判断往哪走
if(h==0){
d1.style.left=left+1+"px";
}
else{
d1.style.left=left-1+"px";
}
//判断是否移动到浏览器的右边缘位置并修改标识
left=parseInt(style.left);
if(left>=document.documentElement.clientWidth-d1.clientWidth){
h=1;
}
//判断是否移动到浏览器的左边缘位置并修改标识
else if(left<=0){
h=0;
}
window.setTimeout("moveRight()",10);
}
</script>
例子：图层能够在页面中斜下45度角移动。碰到页面边缘就弹回
主要是left和top同时进行位置的坐标改变
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.d1{
width: 100px;
height: 100px;
background-color: #2A7EB0;
position: absolute;
left: 200px;
top: 300px;
}
</style>
<body>
<input type="button" value="start" id="btnStart" name="">
<div class="d1"></div>
</body>
</html>
<script type="text/javascript">
var d1 = document.querySelector(".d1");
var btnStart = document.getElementById("btnStart");
btnStart.onclick = moveRight;
//水平移动方向的标识 0表示向右移动 1表示向左移动
var h = 0;
//垂直移动方向的标识 0表示向下移动 1表示向上移动
var v = 0;
//获取层的样式
var style = window.getComputedStyle(d1);
function moveRight(){
//获取层的左边距
var left = parseInt(style.left);
//判断水平移动的方向
if(h == 0){
//如果是0则向右移动
d1.style.left = left+1+"px";
}
else{
//如果是1则向左移动
d1.style.left = left-1+"px";
}
//判断是否移动到浏览器右边缘位置（修改标识用来判断向哪个方向移动）
left = parseInt(style.left);
//到达了右边界，修改为1开始向左移动
if(left >= document.documentElement.clientWidth-d1.clientWidth){
h = 1;
}
//判断浏览器左边缘的位置，到达了左边界，修改为0开始向右移动
else if(left <= 0){
h = 0;
}
//获取层的上边距
var top = parseInt(style.top);
//判断垂直移动方向
if(v == 0){
d1.style.top = top+1+"px";
}
else{
d1.style.top = top-1+"px";
}
top = parseInt(style.top);
console.log(top+","+(document.documentElement.clientHeight-d1.clientHeight));
//判断是否到达屏幕底部边缘（判断修改标识用来判断向哪个方向移动）
if(top >= document.documentElement.clientHeight-d1.clientHeight){
v = 1;
}
else if(top <= 0){
v = 0;
}
window.setTimeout("moveRight()",10);
}
</script>
鼠标拖拽移动图层：鼠标按住拖动图层，松开之后图层停留在鼠标松开的位置
方法一：图层原来与页面的边距 + 鼠标移动的距离（鼠标当前的坐标-鼠标开始点击的坐标）：原来的图层与页面边距、原鼠标点击坐标、鼠标当前的坐标
方法二：图层移动的距离（当前图层与页面的边距-原来图层与页面的边距）- 鼠标相较于图层的边距（鼠标的坐标-层的边距）：鼠标相较于图层的边距、原来图层与页面的边距、当前图层与页面的边距
方法一：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.d1{
width: 100px;
height: 100px;
background-color: #2A7EB0;
position: absolute;
left: 200px;
top: 300px;
}
</style>
<body>
<div class="d1"></div>
</body>
</html>
<script type="text/javascript">
/**
* 层的拖拽思路：
* 通过3个事件动作协同完成
* onmousedown
* onmousemove
* onmouseup
*/
var d1 = document.querySelector(".d1");
var style = window.getComputedStyle(d1);
//鼠标的按下坐标
var x;
var y;
//层的初始边距
var initLeft;
var initTop;
//鼠标按下的状态
var hasDown = false;
/**
* 鼠标按下
* [onmousedown description]
* @return {[type]} [description]
*/
d1.onmousedown = function(){
//记录鼠标按下的状态
hasDown = true;
//记录鼠标按下的坐标
x = event.clientX;
y = event.clientY;
//记录当前层的边距
initLeft = parseInt(style.left);
initTop = parseInt(style.top);
}
/**
* 鼠标松开
* [onmouseup description]
* @return {[type]} [description]
*/
d1.onmouseup = function(){
//修改鼠标按下的状态
hasDown = false;
}
/**
* 页面中进行的鼠标移动
* [onmousemove description]
* @return {[type]} [description]
*/
document.onmousemove = function(){
//如果鼠标按下
if(hasDown){
//记录移动中鼠标的坐标
var nowX = event.clientX;
var nowY = event.clientY;
//计算移动的距离
var moveX = nowX-x;
var moveY = nowY-y;
//根据移动的距离设置层的边距
d1.style.left = initLeft+moveX+"px";
d1.style.top = initTop+moveY+"px";
}
}
</script>
方法二：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.d1{
width: 100px;
height: 100px;
background-color: #2A7EB0;
position: absolute;
left: 200px;
top: 300px;
}
</style>
<body>
<div class="d1"></div>
</body>
</html>
<script type="text/javascript">
/**
* 层的拖拽思路：
* 通过3个事件动作协同完成
* onmousedown
* onmousemove
* onmouseup
*/
var d1 = document.querySelector(".d1");
var style = window.getComputedStyle(d1);
//按下点与层边框的距离
var x;
var y;
//鼠标按下的状态
var hasDown = false;
/**
* 鼠标按下
* [onmousedown description]
* @return {[type]} [description]
*/
d1.onmousedown = function(){
//记录鼠标按下的状态
hasDown = true;
//获取按下的鼠标坐标
var nowX = event.clientX;
var nowY = event.clientY;
//获取层的边距
var divLeft = parseInt(style.left);
var divTop = parseInt(style.top);
//计算鼠标坐标与边距的距离
x = nowX-divLeft;
y = nowY-divTop;
}
/**
* 鼠标松开
* [onmouseup description]
* @return {[type]} [description]
*/
d1.onmouseup = function(){
//修改鼠标按下的状态
hasDown = false;
}
/**
* 页面中进行的鼠标移动
* [onmousemove description]
* @return {[type]} [description]
*/
document.onmousemove = function(){
//如果鼠标按下
if(hasDown){
//记录移动中鼠标的坐标
var nowX = event.clientX;
var nowY = event.clientY;
//根据按下鼠标与层的边距，计算层的边距
d1.style.left = nowX-x+"px";
d1.style.top = nowY-y+"px";
}
}
</script>
通过点击关闭按钮将广告层隐藏：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.ad{
width: 180px;
height: 230px;
background-image: url(image/advpic.gif);
position: absolute;
left: 300px;
top: 100px;
}
.ad>div{
width: 13px;
height: 13px;
background-image: url(image/close.jpg);
position: relative;
left: 167px;
top: 217px;
cursor: pointer;
}
</style>
<body>
<div class="ad">
<div onclick="closeAd()"></div>//按钮插在广告层中
</div>
</body>
</html>
<script type="text/javascript">
//获取广告层
var ad = document.querySelector(".ad");
function closeAd(){
//将广告层隐藏 none表示隐藏 block表示显示
ad.style.display = "none";
}
</script>
折叠菜单：通过点击主菜单将子菜单进行展开或隐藏
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.menu{
margin-left: 50px;
}
.menu li{
list-style-image: url(image/z-1.jpg);
height: 30px;
line-height: 30px;
}
.main{
height: 30px;
cursor: pointer;
}
.subItem{
display: none;
}
</style>
<body>
<div class="menu">
<div class="main" onclick="showMenu(this)"><img src="image/fclose.gif">Java技术</div>
<!-- 子菜单 -->
<div class="subItem">
<li>JavaSE</li>
<li>Java Web</li>
<li>Eclipse</li>
<li>Java其他相关</li>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//菜单是否展开的标识（展开点击就隐藏，隐藏点击就展开）
var flag = false;
/**
* 展示菜单
* [showMenu description]
* @return {[type]} [description]
*/
function showMenu(menu){
//菜单中的图片
var img = menu.getElementsByTagName("img")[0];
//子菜单
var subItem = document.querySelector(".subItem");
if(!flag){
//修改菜单的图片
img.src = "image/fold.gif";
//将子菜单显示
subItem.style.display = "block";
//修改菜单展开的标识
flag = true;
}
else{
//修改菜单的图片
img.src = "image/fclose.gif";
//将子菜单隐藏
subItem.style.display = "none";
//修改菜单展开的标识
flag = false;
}
}
</script>
实现循环播放广告：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.ad{
width: 360px;
height: 190px;
background-image: url(image/ad-01.jpg);
}
.ad div{
width: 20px;
height: 20px;
background-color: #2C61AF;
color: white;
float: left;
position: relative;
left: 280px;
top: 170px;
text-align: center;
line-height: 20px;
font-size: 13px;
cursor: pointer;
}
#active{
background-color: white;
color: #2C61AF;
}
</style>
<body>
<div class="ad">
<div>1</div>
<div>2</div>
<div id="active">3</div>
<div>4</div>
</div>
</body>
</html>
<script type="text/javascript">
var ad = document.querySelector(".ad");
//播放图片的索引
var index = 1;
/**
* 轮播广告
* [playAd description]
* @return {[type]} [description]
*/
function playAd(){
//变更图片
ad.style.backgroundImage = "url(image/ad-0"+index+".jpg)";
//修改图片索引
index++;
if(index > 4){
index = 1;
}
//开启定时器（为了反复执行）
window.setTimeout("playAd()",1000);
}
playAd();
</script>
查询的信息分页：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.pageContent{
height: 200px;
}
</style>
<body>
<div style="height: 3000px; background-color: #FDC7C7"></div>
<div class="container"></div>
</body>
</html>
<script type="text/javascript">
//每页的高度
var size = 200;
//当前页码
var page = 1;
//原始的页面高度，决定了在该位置的基础上进行滚动条下拉实现分页
var init = 1500;
//总的页面数
var total = 15;
//页面显示的容器
var container = document.querySelector(".container");
//滚动条的滚动事件
window.onscroll = function(){
//获取滚动的距离
//console.log(document.documentElement.scrollTop);
var scrollTop = document.documentElement.scrollTop;
//如果滚动的距离超过了原始页面高度，根据页码值决定分页的加载
if(scrollTop >= init+page*size && page <= total){
//加载分页的内容
container.innerHTML += "<div class='pageContent'><img src='image/head/"+page+".gif'></div>";
page++;
}
}
</script>
浙公网安备 33010602011771号