您的位置：首页 > Web前端 > JavaScript

javascript-第九节-键值或按钮控制div移动、轮播

2016-06-14 08:53 429 查看

1、在屏幕添加四个按钮，上下左右，来控制一个div的移动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击按钮操作上下移动</title>
</head>
<style type="text/css">
#content {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 100px;
background: palevioletred;
}
</style>
<body>
<input type="button" value="左" id="left">
<input type="button" value="右" id="right">
<div id="content"></div>
<script>
var left = document.getElementById("left");
var right = document.getElementById("right");

var content = document.getElementById("content");
var index = 100;
left.onclick = function () {
index = index - 10;
content.style.left = index + "px";
}

right.onclick = function () {
index = index + 10;
content.style.left = index + "px";
}
</script>
</body>
</html>

2、通过键盘的上下左右键，来控制div的移动

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: cadetblue;
}

</style>
</head>
<body>

<div id="a"></div>
<script>
var div = document.getElementById("a");
var nowleft = 100;
var nowtop = 100;
document.onkeydown = function () {
//        alert(event.keyCode);//    event.keyCode 事件的键值属性
if(event.keyCode==65){
nowleft= nowleft - 50;
div.style.left = nowleft + "px";
}
switch (event.keyCode) {

case 37:
nowleft = nowleft - 10;
div.style.left = nowleft + "px";
break;
case 38:
nowtop = nowtop - 10;
div.style.top = nowtop + "px";
break;
case 39:
nowleft = nowleft + 100;
div.style.left = nowleft + "px";
break;
case 40:
nowtop = nowtop + 10;
div.style.top = nowtop + "px";
break;

}
}

</script>
</body>
</html>

3、实现轮播图：

方法一：setTimeout()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图-clearTimeout</title>
</head>
<body>
<img src="image/index0.jpg" id="pic">
<script>
var pic=document.getElementById("pic");
//图片数字循环
var num=0;
var str=0;
function change(){
num=(num+1);
//image是图片文件夹，index
pic.src="image/"+"index"+num+".jpg";
str=setTimeout(change,1500);

}
setTimeout(change,1500);
pic.onmouseover=function(){
clearTimeout(str);
}
pic.onmouseout=function(){
setTimeout(change,1500);
}

</script>
</body>
</html>

方法二：setInterval()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img src="image/index0.jpg" id="pic">
<script>
var pic = document.getElementById("pic");
var num = 0;
var loop=true;
function change() {
num = (num + 1) % 12;
if (loop==true) {
pic.src = "image/" + "index" + num + ".jpg";
}
}
setInterval(change,1500);
pic.onmouseover=function(){
loop=false;
}
pic.onmouseout=function(){
loop=true;
//setInterval(change,1000);
}

</script>
</body>
</html>

4、导航下拉（重点）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉导航</title>
<style type="text/css">
body{
padding:0;
margin: 0;
}
.nav ul {
padding: 0;
margin: 0;
list-style-type: none;
}

.nav ul li {
float: left;
width: 100px;
height: 40px;
line-height: 40px;
background-color: #6eb3d8;
text-align: center;
margin:0 5px;
}

.nav a {
text-decoration: none;
color: white;
cursor: pointer;

}
.navNow {
display: block;
background-color: #7b5255;
color: #999999;
font-weight: bold;
}
.navlist ul{
clear: both;
position: absolute;
left: 220px;
top:25px;
list-style-type: none;
padding: 0px 5px 0 5px;
}
.navlist ul li{
width: 100px;
height: 40px;
line-height: 40px;
background-color: #7b5255;
text-align: center;

}
.navlist a{
color: white;
text-decoration: none;

}
</style>
</head>
<body>
<div class="nav">
<ul id="nav">
<!--<li><a href="" id="navNow">首页</a></li>-->
<!--<li><a href="">关于我们</a></li>-->
<!--<li><a href="">新闻中心</a></li>-->
<!--<li><a href="">公司文化</a></li>-->
<!--<li><a href="">联系我们</a></li>-->
</ul>
</div>
<div class="navlist">
<ul id="navlist">
<!--<li><a href="">行业动态</a></li>-->
<!--<li><a href="">行业新闻</a></li>-->
<!--<li><a href="">公司文化</a></li>-->
<!--<li><a href="">领导简介</a></li>-->
</ul>
</div>
<script>
var ul = document.getElementById("nav");
var arr = ["首页", "关于我们", "新闻中心", "公司文化", "联系我们"];
var arrlist=[
[],
["公司介绍","领导简介"],
["行业动态","行业新闻","行业动态","企业周刊"],
["公司活动","公司主旨"],
["联系我们","人才招聘"],
];

//存放所有的a标签，目的：给a添加鼠标滑过事件
var alla = ;
for (var n = 0; n < arr.length; n++) {
//添加li标签
var li = document.createElement("li");
//添加a标签
var a = document.createElement("a");
//给a添加标题
a.innerHTML = arr[n];
//把a添加到li中
li.appendChild(a);
//把li添加到ul中
ul.appendChild(li);
//把a标签加入到数组，以便给a添加鼠标滑过事件时用
alla.push(a);
}
//遍历所有的a标签-且添加onmouseover时间
for (var n = 0; n < alla.length; n++) {
//初始默认显示第一个的状态
if (n == 0) {
alla[0].className = "navNow";
}
//给a添加onmouseover函数，进行鼠标滑过有状态值
alla[n].onmouseover=function(){
//遍历a，进行查询
for(var i=0;i<alla.length;i++){
//鼠标没有滑过没有选中的状态值
alla[i].className="";
}
//鼠标滑过选中的状态值
this.className="navNow";

//开始操作二级菜单
var index=0;
for(var j=0;j<alla.length;j++){
//获取一级菜单的下标
if(alla[j].className=="navNow"){
index=j;
break;
}
}

//添加二级
var ullist=document.getElementById("navlist");
ullist.style.left=110*index+"px";
var str="";
for(var m=0;m<arrlist[index].length;m++){
str=str+"<li><a href='#'>"+arrlist[index][m]+"</a></li>"
}
ullist.innerHTML=str;
//当鼠标离开下拉菜单时，菜单不显示
ullist.onmouseout=function(){
ullist.style.display="none";
}
//鼠标放上时，菜单显示
ullist.onmouseover=function(){
ullist.style.display="block";
}

//鼠标放上
ul.onmouseover=function(){
ullist.style.display="block";
}
//鼠标离开
ul.onmouseout=function(){
ullist.style.display="none";
}

}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航