1.复习
- 匀速运动案例
- 匀速：num++，步长一致
- 缓动公式
- leader=leader+(target-leader)/10;
- 缓动动画，先快后慢
- 要配合定时器使用
- offset
- 第一组：offsetWidth、offsetHeight 包含内容区、内边距、边框的累计尺寸。
- 第二组：offsetLeft、offsetTop 找离他最近的、带有定位的父元素，不包含边框。
- 第三个：offsetParent 找离他最近的带有定位的父元素。
- event事件对象
- box.function(event){…}
- onclick事件的对象——event
- 存在兼容问题，处理：event=event||window.event;
- 第一组：event.clientX、event.clientY 以窗口可视区为基准
- 第二组：event.pageX、event.pageY 以整个页面为基准
- 第三组：event.screenX、event.screenY 以电脑屏为基准
2.容器的坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width:400px;
height: 400px;
border:solid 1px #333;
margin: 100px auto;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var box=document.getElementById("box");
box.function(event){
var event=event||document.event;
var x=event.clientX-box.offsetLeft;
var y=event.clientY-box.offsetTop;
box.innerHTML="x坐标为："+x+"，y坐标为："+y+"。"
}
</script>
</body>
</html>
3.放大镜
- cursor：move十字架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:400px;
height:400px;
margin:50px;
border:1px solid #333;
position: relative;
}
.small{
width:400px;
height:400px;
}
.zhe{
width:150px;
height:150px;
background-color: yellow;
opacity: .3;
position: absolute;
left:0;
top:0;
display: none;
cursor: move;
}
.big{
width:600px;
height:600px;
position: absolute;
left:430px;
top:0;
border:1px solid red;
display: none;
overflow: hidden;
}
img{
vertical-align: top;
}
.big img{
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="box">
<div class="small">
<div class="zhe"></div>
<img src="img/QQ图片20190408112203.jpg"/>
</div>
<div class="big">
<img src="img/QQ图片20190408112209.jpg"/>
</div>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var small=box.children[0];
var zhe=small.children[0];
var big=box.children[1];
var bigImg=big.children[0];
small.function(){
zhe.style.display="block";
big.style.display="block";
}
small.function(){
zhe.style.display="none";
big.style.display="none";
}
small.function(event){
var event=event||document.event;
shuBiaoX=event.clientX-box.offsetLeft;
shuBiaoY=event.clientY-box.offsetTop;
zheX=shuBiaoX-zhe.offsetWidth/2;
zheY=shuBiaoY-zhe.offsetHeight/2;
if(zheX<=0){
zheX=0;
}else if(zheX>=small.offsetWidth-zhe.offsetWidth){
zheX=small.offsetWidth-zhe.offsetWidth;
}
if(zheY<=0){
zheY=0;
}else if(zheY>=small.offsetHeight-zhe.offsetHeight){
zheY=small.offsetHeight-zhe.offsetHeight;
}
imgX=(big.offsetWidth-bigImg.offsetWidth)/(small.offsetWidth-zhe.offsetWidth)*zheX;
imgY=(big.offsetHeight-bigImg.offsetHeight)/(small.offsetHeight-zhe.offsetHeight)*zheY;
zhe.style.left=zheX+"px";
zhe.style.top=zheY+"px";
bigImg.style.left=imgX+"px";
bigImg.style.top=imgY+"px";
}
</script>
</body>
</html>
在自己框内放大
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
width:400px;
height:400px;
margin:100px auto;
border:1px solid #333;
position: relative;
}
.small{
width:400px;
height:400px;
}
.small img{
width:400px;
height:400px;
}
.big{
width:400px;
height:400px;
position: absolute;
left:0px;
top:0;
display: none;
overflow: hidden;
}
img{
vertical-align: top;
}
.big img{
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="box">
<div class="small">
<img src="img/1.jpg"/>
</div>
<div class="big">
<img src="img/1.jpg"/>
</div>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var small=box.children[0];
var big=box.children[1];
var bigImg=big.children[0];
box.function(){
big.style.display="block";
}
box.function(){
big.style.display="none";
}
big.function(event){
var event=event||document.event;
var X=event.clientX-box.offsetLeft;
var Y=event.clientY-box.offsetTop;
if(X<=0){
X=0;
}else if(X>=box.offsetWidth){
X=box.offsetWidth;
}
if(Y<=0){
Y=0;
}else if(Y>=box.offsetHeight){
Y=box.offsetHeight;
}
imgX=(box.offsetWidth-bigImg.offsetWidth)/(box.offsetWidth)*X;
imgY=(box.offsetHeight-bigImg.offsetHeight)/(box.offsetHeight)*Y;
bigImg.style.left=imgX+"px";
bigImg.style.top=imgY+"px";
}
</script>
</body>
</html>
4.拖拽进度条
- onmousedown：鼠标点下
- onmouseup：鼠标松开
- style.left ：可读
拖拽进度条案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
height: 30px;
width:500px;
margin:100px;
background-color:#ccc;
position: relative;
}
.bar{
display: inline-block;
height:50px;
width:10px;
background-color:blue;
position: absolute;
top:-10px;
left:0;
}
.content{
display: inline-block;
height:100px;
width:480px;
background-color:yellow;
position: absolute;
top:100px;
left:0;
font-size:20px;
line-height: 100px;
padding-left:20px;
}
.bgc{
display: inline-block;
width:0px;
height:30px;
background-color:blue;
}
</style>
</head>
<body>
<div id="box">
<span class="bar"></span>
<span class="bgc"></span>
<span class="content">当前进度为：0%。</span>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
var bar=document.querySelector(".bar");
var bgc=document.querySelector(".bgc");
var content=document.querySelector(".content");
bar.function(){
document.function(event){
var event=event||document.event;
var shubiaoX=event.clientX-box.offsetLeft;
if(shubiaoX<0){
shubiaoX=0;
}else if(shubiaoX>box.offsetWidth-bar.offsetWidth){
shubiaoX=box.offsetWidth-bar.offsetWidth;
}
bar.style.left=shubiaoX+"px";
bgc.style.width=bar.style.left;
var num=parseInt(shubiaoX/(box.offsetWidth-bar.offsetWidth)*100);
content.innerHTML="当前进度为："+num+"%。"
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.function(){
document.null;
}
}
</script>
</body>
</html>
5.模态框案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.login{
width:100%;
height:50px;
background-color:brown;
}
a{
text-decoration: none;
font-size:20px;
color:white;
line-height: 50px;
margin-left:20px;
}
#box{
width:500px;
height:400px;
position: absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-200px;
background-color:#CCCCCC ;
display: none;
}
.drag{
width: 500px;
height:50px;
background-color: purple;
color:white;
font-size:20px;
line-height: 50px;
text-align: center;
cursor: move;
}
span{
display: block;
width:40px;
height:40px;
border-radius: 5px;
background-color:yellow ;
color:red;
font-size:24px;
font-weight:700;
text-align: center;
line-height: 40px;
float:right;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login">
<a href="javascript:;">注册登录</a>
</div>
<div id="box">
<div class="drag">登录注册</div>
<span class="close">X</span>
</div>
<script type="text/javascript">
var login=document.querySelector("a");
var box=document.getElementById("box");
var close=document.querySelector("span");
var drag=document.getElementsByClassName("drag")[0];
login.function(){
box.style.display="block";
}
close.function(){
box.style.display="none";
}
drag.function(event){
var event=event||document.event;
var currentX=event.clientX-box.offsetLeft;//记录当前坐标
var currentY=event.clientY-box.offsetTop;
document.function(event){
var event=event||document.event;
var nowX=event.clientX-currentX+250;//调用前面记录的坐标
var nowY=event.clientY-currentY+200;
box.style.left=nowX+"px";
box.style.top=nowY+"px";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.function(){
document.null;
}
}
</script>
</body>
</html>
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
