div移动和发射子弹的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>键盘事件和组合键</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{width:40px;
height:40px;
position:absolute;
background:orange;
transform:rotate(0deg);
}
.pd{
width:5px;
height:15px;
border-radius:50%;
position:absolute;
background:#f06;
}
</style>
</head>
<body>
<div id="div1" style="top:350px;left:100px"></div>
</body>
</html>
<script>
var div1 = document.getElementById("div1");
document.onkeydown = function(e) {
var e = e || window.event;
var code = e.keyCode || e.which;
//alert(code);
switch (code) {
case 37:
// 按的是<-
div1.style.left = (div1.offsetLeft - 10<0?0:div1.offsetLeft - 10)+'px';
//考虑边界条件
break;
case 39:
// 按的是->
//考虑边界条件
if (div1.offsetLeft+div1.offsetWidth>=document.body.clientWidth) {
div1.offsetLeft = document.body.clientWidth - div1.offsetWidth;
div1.style.left = div1.offsetLeft + 'px';
}else{
div1.style.left = div1.offsetLeft + 10 +'px';
}
break;
case 32:
// 按的是空格 创建子弹
var bullet = document.createElement("div");
document.body.appendChild(bullet);
bullet.className = "pd";
bullet.style.left = div1.offsetLeft + div1.offsetWidth/2 - bullet.offsetWidth/2 + "px";
bullet.style.top = div1.offsetTop - bullet.offsetHeight + "px";
var tt = 0;
setInterval(function(){
if (parseInt(bullet.style.top)<-20) {
bullet.remove();
}else{
bullet.style.top = div1.offsetTop - bullet.offsetHeight - tt + 'px';
}
tt+=50;
},100);
}
}
</script>
固定导航栏的案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
#one{
width:100%;
height:80px;
background: pink;
}
#two{
width:100%;
height:40px;
line-height: 40px;
text-align:center;
background:green;
}
#three{
width:100%;
height:2000px;
background:orange;
}
.divFixed{
position:fixed;
top:0;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two">这里以后是导航栏</div>
<div id="three"></div>
</body>
</html>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
window.onscroll = function(){
var top = document.body.scrollTop || document.documentElement.scrollTop;
if(top>80){
$('two').classList.add('divFixed');
}else{
$('two').className = '';
}
}
</script>
放大镜案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 350px;
height: 350px;
border: 1px solid #000;
margin: 200px;
position: relative;
}
#big{
width: 400px;
height: 400px;
border: 1px solid #000;
overflow: hidden;
position: absolute;
top:0;
left : 360px;
display: none;
}
#mask{
width: 175px;
height: 175px;
background: paleturquoise;
position: absolute;
left:0;
top: 0;
opacity: 0.3;
display: none;
cursor: move;
}
#small{
position: relative;
}
#bigImg{
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div id="box" >
<div id="small"><!--小图区-->
<img src="001.jpg" alt="" />
<div id="mask"></div><!--遮罩层-->
</div>
<div id="big"><!--大图区-->
<img src="0001.jpg" alt="" id="bigImg"/>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var box = $('box');
var small = $('small');
var mask = $('mask');
var big = $('big');
var bigImg = $('bigImg');
//鼠标滑进小图区时显示大图区，显示小图区域遮罩
small.onmouseover = function(e){
var e = e||event;
big.style.display = 'block';
mask.style.display = 'block';
}
small.onmouseout = function(e){
var e = event;
big.style.display = 'none';
mask.style.display = 'none';
}
small.onmousemove = function(e){
var e = e||event;
var x = e.pageX - box.offsetLeft-mask.offsetWidth/2;
console.log(x);
var y = e.pageY - box.offsetTop-mask.offsetHeight/2;
// var maxX = box.clientWidth-mask.clientWidth;
// var maxY = box.clientHeight-mask.clientHeight;
//以上写法也可行
console.log(y);
var maxX = box.offsetWidth-mask.offsetWidth;
var maxY = box.offsetHeight-mask.offsetHeight;
x = x<0?0:(x>maxX?maxX:x)
y = y<0?0:(y>maxY?maxY:y)
mask.style.left = x+'px';
mask.style.top = y+'px';
//放大大图里面的图片
// 小图片宽度：大图片宽度 = x: 大图片位置
var BX = x*bigImg.clientWidth/small.clientWidth;
var BY = y*bigImg.clientHeight/small.clientHeight;
bigImg.style.left = -BX+'px';
bigImg.style.top = -BY+'px';
}
</script>
一个无缝滚动的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
margin:0;
padding:0;
}
div{
width:600px;
height:200px;
position:relative;
border:1px solid red;
margin:100px;
overflow:hidden;
}
ul{
width:600%;
position:absolute;
left:0;
}
li{
float:left;
list-style:none;
}
</style>
<body>
<div id="box">
<ul id="u">
<li><img src="a.jpg" alt="" /></li>
<li><img src="b.jpg" alt="" /></li>
<li><img src="c.jpg" alt="" /></li>
<li><img src="d.jpg" alt="" /></li>
<!-- 重复放两张图片是为了让无缝滚动看起来没有间隔 -->
<li><img src="a.jpg" alt="" /></li>
<li><img src="b.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
<script>
//一个无缝滚动的轮播案例
var oul = document.getElementById('u');
var dis = 0;
var timer = setInterval(auto,100);
function auto(){
oul.style.left = dis+'px';
dis-=20;
if(parseInt(oul.style.left)<=-1200){
dis = 0;
}
}//单独抽离出来当做一个函数处理是为了鼠标移出区域的时候方便重新调用
oul.onmouseover = function(){
clearInterval(timer);
}
oul.onmouseout = function(){
timer = setInterval(auto,100);
}
// var oul = document.getElementById('u');
// var dis = 0;
// function autoplay(){
// oul.style.left = dis+'px';
// dis-=10;
// if(dis<=-1200){
// dis = 0;
// }
// }
// var timer = setInterval(autoplay,100);
// oul.onmouseover = function(){
// clearInterval(timer);
// }
// oul.onmouseout = function(){
// timer = setInterval(autoplay,100)
// }
</script>
网友评论