JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条
2024-10-19 12:46:01
楼层跳跃
100%子盒子会继承父盒子的宽高。父盒子继承body宽高。Body继承html的宽高。
盒子属性：auto:适应盒子自身的宽度或者高度。（对自己负责）
盒子属性：100%:适应盒子父盒子的宽度或者高度。（对爸爸负责）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body,html {
height: 100%;
}
ul {
list-style: none;
height: 100%;
}
ul li {
height: 100%;
}
ol {
list-style: none;
position: fixed;
top: 80px;
left: 50px;
}
ol li {
width: 50px;
height: 50px;
border: 1px solid #000;
text-align: center;
line-height: 50px;
margin-top: -1px;
cursor: pointer;
}
</style>
</head>
<body> <ul>
<li>鞋子区域</li>
<li>袜子区域</li>
<li>裤子区域</li>
<li>裙子区域</li>
<li>帽子区域</li>
</ul>
<iframe src="04-鼠标跟随.html" frameborder="20px" style="margin-top: 100px"></iframe> <ol>
<li>鞋子</li>
<li>袜子</li>
<li>裤子</li>
<li>裙子</li>
<li>帽子</li>
</ol> <script src="animate.js"></script>
<script>
//需求：点击ol中的li，屏幕滑动到对应的ul中的li的范围。
//思路：还是利用window.scrollTo();利用缓动动画原理实现屏幕滑动。
//步骤：
//0.获取元素
//1.指定ul和ol中的li的背景色，对应的li背景色相同
//2.老三步。(获取元素并绑定事件)
//3.利用缓动动画原理实现屏幕滑动
//4.用scroll事件模拟盒子距离最顶端的距离。 //0.获取元素
var ul = document.getElementsByTagName("ul")[0];
var ol = document.getElementsByTagName("ol")[0];
var ulLiArr = ul.children;
var olLiArr = ol.children;
var target = 0;var leader = 0;var timer = null;
//1.指定ul和ol中的li的背景色，对应的li背景色相同
//设置一个数组，里面装颜色，然指定的颜色给数组中的指定元素
var arrColor = ["pink","blue","yellow","orange","green"];
//利用for循环给两个数组的元素上色
for(var i=0;i<arrColor.length;i++){
//上色
ulLiArr[i].style.backgroundColor = arrColor[i];
olLiArr[i].style.backgroundColor = arrColor[i]; //属性绑定索引值
olLiArr[i].index = i;
//2.老三步。(并绑定事件)循环绑定，为每一个li绑定点击事件
olLiArr[i].onclick = function () {
//***获取目标位置
//获取索引值。
target = ulLiArr[this.index].offsetTop; //要用定时器，先清除定时器
clearInterval(timer);
//3.利用缓动动画原理实现屏幕滑动
timer = setInterval(function () {
//(1).获取步长
var step = (target-leader)/10;
//(2).二次处理步长
step = step>0?Math.ceil(step):Math.floor(step);
//(3).屏幕滑动
leader = leader + step;
window.scrollTo(0,leader);
//(4).清除定时器
if(Math.abs(target-leader)<=Math.abs(step)){
window.scrollTo(0,target);
clearInterval(timer);
}
},25);
}
} //4.用scroll事件模拟盒子距离最顶端的距离。
window.onscroll = function () {
//每次屏幕滑动，把屏幕卷去的头部赋值给leader,模拟获取显示区域距离顶部的距离
leader = scroll().top;
} </script> </body>
</html>
楼层跳跃
事件对象：
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。（类似Date）
普通浏览器支持 event（带参，任意参数）
ie 678 支持 window.event（无参，内置）
总结：他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
事件对象的获取 event的获取：
IE678中，window.event
在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event.
Box.onclick = function (aaa){ aaa就是event }
获取方式有两种：
不写参数直接获取；
var event = event || window.event;(主要用这种)
event的部分重要内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 5000px;
}
img {
position: absolute;
padding: 10px 0;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<img src="data:images/img.jpg" width="100"/>
<script>
//需求：点击页面的任何地方，图片跟随鼠标移动到点击位置。
//思路：获取鼠标在页面中的位置，然图片缓慢运动到鼠标点击的位置。
// 兼容ie67做pageY和pageX；
// 原理： 鼠标在页面的位置 = 被卷去的部分+可视区域部分。
//步骤：
//1.老三步。
//2.获取鼠标在页面中的位置。
//3.利用缓动原理，慢慢的运动到指定位置。（包括左右和上下） //1.老三步。
var img = document.getElementsByTagName("img")[0];
var timer = null;
var targetx = 0;var targety = 0;
var leaderx = 0;var leadery = 0;
//给整个文档绑定点击事件获取鼠标的位置。
document.onclick = function (event) {
//新五步
//兼容获取事件对象
event = event || window.event;
//鼠标在页面的位置 = 被卷去的部分+可视区域部分。
var pagey = event.pageY || scroll().top + event.clientY;
var pagex = event.pageX || scroll().left + event.clientX; //要用定时器，先清定时器
// targety = pagey-img.offsetHeight/2;
// targetx = pagex-img.offsetWidth/2;
targety = pagey-30;
targetx = pagex-50;
clearInterval(timer);
timer = setInterval(function () {
//为盒子的位置获取值
leaderx = img.offsetLeft;
//获取步长
var stepx = (targetx-leaderx)/10;
//二次处理步长
stepx = stepx>0?Math.ceil(stepx):Math.floor(stepx);
leaderx = leaderx + stepx;
//赋值
img.style.left = leaderx + "px"; //为盒子的位置获取值
leadery = img.offsetTop;
//获取步长
var stepy = (targety-leadery)/10;
//二次处理步长
stepy = stepy>0?Math.ceil(stepy):Math.floor(stepy);
leadery = leadery + stepy;
//赋值
img.style.top = leadery + "px";
//清定时器 // if(Math.abs(targety-img.offsetTop)<=Math.abs(stepy) && Math.abs(targetx-img.offsetLeft)<=Math.abs(stepx)){
// img.style.top = targety + "px";
// img.style.left = targetx + "px";
// clearInterval(timer);
// }
},30);
}
//2.获取鼠标在页面中的位置。
//3.利用缓动原理，慢慢的运动到指定位置。（先左右后上下） </script> </body>
</html>
图片缓动到鼠标位置
screenX、pageX和clientX的区别
pageY/pageX ： 鼠标位于整个网页页面的顶部和左侧的距离（页面）
screenY/screenX： 鼠标位于屏幕的上方和左侧的距离 （屏幕）
clientX／clientY： 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）
pageY和pageX的兼容写法：
在页面的位置=看的见的+看不见的部分；
pageY／pageX = event.clientY+scroll().top/scroll().left
function scroll() { // 开始封装自己的scrollTop
if(window.pageYOffset != null) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
新事件：onmousemove 鼠标移动
onmouseenter:鼠标进入
onmouseleave:鼠标离开
只要鼠标在绑定该事件的事件源上移动，哪怕1像素，也会触动这个事件。
（这个事件可以直接或者间接的替代定时器）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.box {
width: 350px;
height: 350px;
margin:100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
/*display: none;*/
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
}
.small {
position: relative;
}
img {
vertical-align: top;
}
</style>
<!--<script src="animate.js"></script>-->
<script>
window.onload = function () { var box = document.getElementsByClassName("box")[0];
var small = box.firstElementChild||box.firstChild ;
var big = box.children[1];
var mask = small.lastElementChild || box.lastChild ;
var bigImg = big.children[0];
// console.log(mask); small.onmouseenter = function () {
show(mask);
show(big);
};
small.onmouseleaver = function () {
hide(mask);
hide(big);
}; small.onmousemove = function (event) {
event = event || window.event;
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top +event.clientY; // 让鼠标在黄盒子最中间。 减去黄盒子的一半 var x = pagex - box.offsetLeft - mask.offsetWidth/2 ;
var y = pagey - box.offsetTop - mask.offsetHeight/2 ; // 限制黄盒子的范围
if (x<0){
x = 0 ;
}
if(x>small.offsetWidth - mask.offsetWidth){
x = small.offsetWidth - mask.offsetWidth;
}
if (y<0) {
y = 0;
}
if (y>small.offsetHeight - mask.offsetHeight){
y = small.offsetHeight - mask.offsetHeight;
} mask.style.left = x +"px";
console.log(x)
console.log(small.offsetLeft)
console.log(mask.offsetWidth)
console.log()
console.log()
console.log()
mask.style.top = y +"px"; var bili = bigImg.offsetWidth/small.offsetWidth; var xx = bili*x ;
var yy = bili*y ;
bigImg.style.marginTop = -yy+"px";
bigImg.style.marginLeft = -xx+"px"; } } </script> </head>
<body>
<div class="box">
<div class="small">
<img src="data:images/001.jpg" alt=""/>
<div class="mask"></div>
</div>
<div class="big">
<img src="data:images/0001.jpg" alt=""/>
</div>
</div>
</body>
</html>
放大镜
大图片／大盒子 = 小图片／显示部分
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} .nav {
height: 30px;
background: #036663;
border-bottom: 1px solid #369;
line-height: 30px;
padding-left: 30px;
} .nav a {
color: #fff;
text-align: center;
font-size: 14px;
text-decoration: none; } .d-box {
width: 400px;
height: 300px;
border: 5px solid #eee;
box-shadow: 2px 2px 2px 2px #666;
position: absolute;
top: 40%;
left: 40%;
} .hd {
width: 100%;
height: 25px;
background-color: #7c9299;
border-bottom: 1px solid #369;
line-height: 25px;
color: white;
cursor: move;
} #box_close {
float: right;
cursor: pointer;
}
</style> <script src="animate.js"></script>
<script>
window.onload = function () {
//需求：在指定位置按住鼠标左键移动对话框。
//分析：鼠标按下，触动事件，移动在更换对话框的位置。
//鼠标按下onmousedown 鼠标弹起:onmouseup 鼠标移动onmousemove
//步骤：
//1.老三步和新五步
//2.把鼠标的坐标赋值给对话框。 var box = document.getElementById("d_box");
var drop = document.getElementById("drop");
//1.老三步和新五步
//先按下，在移动触动此事件
drop.onmousedown = function (event) {
//获取鼠标在盒子中的坐标，将来移动的时候减去保证鼠标在盒子的指定位置
event = event || window.event;
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
var x = pagex - box.offsetLeft;
var y = pagey - box.offsetTop; document.onmousemove = function (event) {
//2.把鼠标的坐标赋值给对话框。
event = event || window.event;
var xx = event.pageX || scroll().left + event.clientX;
var yy = event.pageY || scroll().top + event.clientY;
//二次操作鼠标位置 减去鼠标在盒子中的坐标
xx = xx - x;
yy = yy - y; //给box赋值
box.style.left = xx+"px";
box.style.top = yy+"px";
//禁止文本选中（选中后取消）
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
} //事件解绑
drop.onmouseup = function () {
//解绑
document.onmousemove = null;
} }
</script> </head>
<body>
<!--顶部注册部分，无用-->
<div class="nav">
<a href="javascript:;" id="register">注册信息</a>
</div>
<!--我们移动的对话框-->
<div class="d-box" id="d_box">
<div class="hd" id="drop">
<i>注册信息 (可以拖拽)</i>
<span id="box_close">【关闭】</span>
</div>
<div class="bd"></div>
</div> </body>
</html>
拖拽案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 500px;
border: 1px solid red;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.scroll {
width: 20px;
height: 530px;
background-color: #ccc;
position: absolute;
top: 0;
right: 0;
}
.bar {
width: 20px;
background-color: red;
border-radius: 10px;
cursor: pointer;
position: absolute;
top: 0;
}
.content {
padding: 15px;
}
</style> <script src="animate.js"></script>
<script>
window.onload = function () {
//需求：模拟滚动条，鼠标拖动滚动条，滚动条动，而且内容等比例联动。
//步骤：
//1.根据内容和盒子的比例确定bar的高。
//2.绑定事件（鼠标按下，然后移动）
//3.鼠标移动，bar联动
//4.内容等比例联动 //0.获取相关元素
var box = document.getElementById("box");
var content = box.children[0];
var scroll = box.children[1];
var bar = scroll.children[0]; //1.根据内容和盒子的比例确定bar的高。
//内容的高/盒子的高 = scroll的高/bar的高
//bar的高 = 盒子的高*scroll的高/内容的高
var barHeight = box.offsetHeight*scroll.offsetHeight/content.offsetHeight;
bar.style.height = barHeight + "px";
//2.绑定事件（鼠标按下，然后移动）
bar.onmousedown = function (event) {
event = event || window.event;
var pageyy = event.pageY || scroll().top + event.clientY;
var y = pageyy - bar.offsetTop;
//模拟拖拽案例
document.onmousemove = function (event) {
//新五步获取鼠标在页面的位置。
event = event || window.event;
var pagey = event.pageY || scroll().top + event.clientY;
//鼠标的位置-鼠标在盒子中的位置。
pagey = pagey - y; // 此时pagey 相当于bar.offsetTop //限制y的取值。大于0，小于scroll的高度-bar的高度
if(pagey<0){
pagey = 0;
}
if(pagey>scroll.offsetHeight-bar.offsetHeight){
pagey = scroll.offsetHeight-bar.offsetHeight;
} //3.鼠标移动，bar联动
bar.style.top = pagey + "px"; //4.内容等比例联动
//高级比例： 内容走的距离/bar走的距离 = （内容的高-大盒子的高）/（scroll的高-bar的高）
var s = pagey *(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
//s赋值给content。通过marginTop负值移动content
content.style.marginTop = -s+"px"; //让被选文字清除。
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
} //事件解绑
document.onmouseup = function () {
document.onmousemove = null;
} }
</script> </head>
<body>
<div class="box" id="box">
<div class="content">
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
孩儿励志出湘关，学不成名终不还。<br>
埋骨何须桑梓地，人生无处不青山。<br>
-------------结束------------<br>
</div>
<div class="scroll">
<div class="bar"></div>
</div>
</div> </body>
</html>
模拟滚动条
最新文章
- MVC框架
- javascript 模式(1)——代码复用
- angularJS 如何读写缓冲
- 做WP程序时遇到的一些问题及解决方法
- Datawarehouse
- NodeJS路径的小问题
- webkit的基本应用
- 【C++学习之路】派生类的构造函数（二）
- _declspec(dllexport)与_declspec(dllimport)
- fs学习笔记之输出格式
- jvm(13)-线程安全与锁优化（转）
- 用Eclipse生成JPA元模型
- CSS clear 清除浮动，兼容各浏览器
- mybatis_SQL映射(2)
- Nginx出现500 Internal Server Error 错误的解决方案
- Bootstrap免费模板站推荐
- fastdfsDemo
- LR实现问答系统查询功能
- I2C和SPI总线对比
- C#编程（七十九）---------- 反射