JavaScript（四）
阿新 • • 發佈：2020-09-08
1.圖層移動：遇到右邊距彈回來，遇到左邊距再彈回去
2.滑鼠拖拽移動圖層：滑鼠按住拖動圖層，鬆開之後圖層停留在滑鼠鬆開的位置
3.通過點選關閉按鈕將廣告層隱藏：
4.摺疊選單：通過點選主選單將子選單進行展開或隱藏
5.實現迴圈播放廣告：
6.查詢的資訊分頁：
圖層移動：遇到右邊距彈回來，遇到左邊距再彈回去
主要是比較左邊距和瀏覽器的邊緣位置是否相同，如果相同就彈回
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.d1{
width:100px ;
height:100px ;
background
例子：圖層能夠在頁面中斜下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>