javascript的原型，原型链，内置对象拖曳对话框放大镜显示和隐藏遮挡层及大层

本文链接：https://blog.youkuaiyun.com/qq_53587164/article/details/124647882

本文通过实例展示了JavaScript在网页交互中的应用，包括图片跟随鼠标移动、拖曳对话框、高清放大镜显示与隐藏、无刷新评论功能。通过这些案例，读者可以深入理解JavaScript在页面动态效果和用户体验提升上的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片跟着鼠标飞

1.<!DOCTYPE html><html lang="en">

<head>

<title>title</title>

<style>

img {

position: absolute;

}

</style></head>

<body>

//鼠标在页面中移动,图片跟着鼠标移动

document.onmousemove = function (e) {

//鼠标的移动的横纵坐标

//可视区域的横坐标

//可视区域的纵坐标

my$("im").style.left = e.clientX + "px";

my$("im").style.top = e.clientY + "px";

};

</script></body>

</html>

//页面的鼠标移动事件

document.onmousemove=function (e) {

//鼠标相对于页面的可视区域的横坐标

//my$("im").style.left=e.clientX+"px";

//鼠标相对于页面的可视区域的纵坐标

//my$("im").style.top=e.clientY+"px";

//因为IE8的浏览器中针对事件参数对象使用的是window.event,那么,事件处理函数中是没有e这个参数的,所以,使用window.event来代替e// my$("im").style.left=window.event.clientX+"px";// my$("im").style.top=window.event.clientY+"px";

//火狐浏览器支持的事件参数对象:e,不支持window.event

//1.=======此时window.event和事件参数对象e是需要兼容的

//2. pageX和pageY就是鼠标相对于页面的边界的坐标

//下面的代码在谷歌和火狐支持// my$("im").style.left=e.pageX+"px";// my$("im").style.top=e.pageY+"px";

//下面的代码在IE8中不支持,不支持pageX和pageY的属性// my$("im").style.left=window.event.pageX+"px";// my$("im").style.top=window.event.pageY+"px";

function getScroll() {

return {

left:window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0,

top:window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0

}

//可视区域横坐+向左卷曲出去的横坐标

my$("im").style.left=window.event.clientX+getScroll().left+"px";

//可视区域纵坐标+向上卷曲出去的纵坐标

my$("im").style.top=window.event.clientY+getScroll().top+"px";

};

案例：拖曳对话框

ps: 实际没有要拖曳登录框的需求，只是演示拖曳的这个效果

1. 获取超链接，注册点击事件，显示登陆框和遮挡层

2. 获取关闭，注册点击事件，隐藏登陆框和遮挡层

3. 按下鼠标，移动鼠标，移动登陆框

<!DOCTYPE html><html>

<style>

.login-header {

width: 100%;

text-align: center;

height: 30px;

font-size: 24px;

line-height: 30px;

}

ul,

li,

ol,

dl,

dt,

dd,

div,

span,

h1,

h2,

h3,

h4,

h5,

h6,

a {

padding: 0px;

margin: 0px;

}

.login {

width: 512px;

position: absolute;

border: #ebebeb solid 1px;

height: 280px;

left: 50%;

right: 50%;

background: #ffffff;

box-shadow: 0px 0px 20px #ddd;

z-index: 9999;

margin-left: -250px;

margin-top: 140px;

display: none;

}

.login-title {

width: 100%;

margin: 10px 0px 0px 0px;

text-align: center;

line-height: 40px;

height: 40px;

font-size: 18px;

position: relative;

cursor: move;

-moz-user-select: none;

/*火狐*/

-webkit-user-select: none;

/*webkit浏览器*/

-ms-user-select: none;

/*IE10*/

-khtml-user-select: none;

/*早期浏览器*/

user-select: none;

}

.login-input-content {

margin-top: 20px;

}

.login-button {

width: 50%;

margin: 30px auto 0px auto;

line-height: 40px;

font-size: 14px;

border: #ebebeb 1px solid;

text-align: center;

}

.login-bg {

width: 100%;

height: 100%;

position: fixed;

top: 0px;

left: 0px;

background: #000000;

filter: alpha(opacity=30);

-moz-opacity: 0.3;

-khtml-opacity: 0.3;

opacity: 0.3;

display: none;

}

a {

text-decoration: none;

color: #000000;

}

.login-button a {

display: block;

}

.login-input input.list-input {

float: left;

line-height: 35px;

height: 35px;

width: 350px;

border: #ebebeb 1px solid;

text-indent: 5px;

}

.login-input {

overflow: hidden;

margin: 0px 0px 20px 0px;

}

.login-input label {

float: left;

width: 90px;

padding-right: 10px;

text-align: right;

line-height: 35px;

height: 35px;

font-size: 14px;

}

.login-title span {

position: absolute;

font-size: 12px;

right: -20px;

top: -30px;

background: #ffffff;

border: #ebebeb solid 1px;

width: 40px;

height: 40px;

border-radius: 20px;

}

</style></head>

<body>

<div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>

<div id="title" class="login-title">登录会员

</div>

</div>

</div>

//获取超链接，注册点击事件，显示登陆框和遮挡层 my$("link").onclick = function () {

my$("login").style.display = "block";

my$("bg").style.display = "block";

}

//获取关闭，注册点击事件，隐藏登陆框和遮挡层 my$("closeBtn").onclick = function () {

my$("login").style.display = "none";

my$("bg").style.display = "none";

}

//按下鼠标，移动鼠标，移动登陆框 my$("title").onmousedown = function (e) {

//获取此时的可视区域的横坐标-此时登录框距离左侧页面的横坐标

var spaceX = e.clientX - my$("login").offsetLeft;

var spaceY = e.clientY - my$("login").offsetTop;

//移动事件 document.onmousemove = function (e) {

//新的可视区域的横坐标-spaceX

var x = e.clientX - spaceX + 250;

var y = e.clientY - spaceY - 140;

my$("login").style.left = x + "px";

my$("login").style.top = y + "px";

};

document.onmouseup = function () {

document.onmousemove = null;

};

</script>

</body>

</html>

案例：放大镜显示和隐藏遮挡层及大层

案例：高清放大镜

分3步

1. 鼠标进入和离开，显示和隐藏遮挡层和大图div

2. 鼠标在小层上移动，鼠标横纵坐标，为可视区域坐标-遮挡层的宽高，鼠标移动的时候，在一个区域内移动，需要判断和定义下移动区间

3. 在小图移动，对应大图的坐标，用比例来做 a/b =c/d ，a=bc/d

4. 移动设置，用大图的marginleft和top实现，负的移动距离

<!DOCTYPE html><html>

<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: 0px;

left: 0px;

cursor: move;

display: none;

}

.small {

position: relative;

}

</style></head>

<body>

</div>

</div>

</div>

//获取需要的元素

var box = my$("box");

//获取小图的div

var small = box.children[0];

//遮挡曾

var mask = small.children[1];

//获取大图的div

var big = box.children[1];

//获取大图

var bigImg = big.children[0];

//鼠标进入显示遮挡层和大图的div box.onmouseover = function () {

mask.style.display = "block";

big.style.display = "block";

};

//鼠标离开隐藏遮挡层和大图的div box.onmouseout = function () {

mask.style.display = "none";

};

//鼠标的移动事件---鼠标是在小层上移动 small.onmousemove = function (e) {

//鼠标此时的可视区域的横坐标和纵坐标

//设置鼠标在遮挡层的中间显示

var x = parseInt(e.clientX - mask.offsetWidth / 2);

var y = parseInt(e.clientY - mask.offsetHeight / 2);

//设置margin的100px的问题（先让鼠标在遮挡层左上角显示） x = x - 100;

y = y - 100;

//横坐标的最小值 x = x < 0 ? 0 : x;

//纵坐标的最小值 y = y < 0 ? 0 : y;

//横坐标的最大值 x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;

//纵坐标的最大值 y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;

//为遮挡层的left和top赋值 mask.style.left = x + "px";

mask.style.top = y + "px";

//遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离

//大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离

//大图的横向最大移动距离

var maxX = bigImg.offsetHeight - big.offsetHeight;

//大图的纵向最大移动距离

// var maxY = bigImg.offsetHeight - big.offsetHeight;

//大图的横向移动坐标

var bigImgMoveX = x * maxX / (small.offsetWidth - mask.offsetWidth);

//大图的纵向移动坐标

var bigImgMoveY = y * maxX / (small.offsetWidth - mask.offsetWidth);

//设置图片的移动 bigImg.style.marginLeft = -bigImgMoveX + "px";

bigImg.style.marginTop = -bigImgMoveY + "px";

};

</script>

</body>

</html>

案例：滚动条

html框架分为4部分，最外面的div, 放文字的div, 装滚动条的div层，以及滚动条本身放在一个div里面

<!DOCTYPE html><html>

<style>

* {

margin: 0;

padding: 0;

}

.box {

width: 300px;

height: 500px;

border: 1px solid red;

margin: 100px;

position: relative;

overflow: hidden;

}

.content {

padding: 5px 18px 5px 5px;

position: absolute;

top: 0;

left: 0;

}

.scroll {

width: 18px;

height: 100%;

position: absolute;

top: 0;

right: 0;

background-color: #eee;

}

.bar {

height: 100px;

width: 100%;

position: absolute;

top: 0;

left: 0;

background-color: red;

border-radius: 10px;

cursor: pointer;

}

</style></head>

<body>

床前明月光啊，明月光，疑是地上霜啊，举头

床前明月光啊，明月光，疑是地上霜啊，举头嘿嘿

</div>

</div>

//获取需要的元素

//最外面的div

var box = my$("box");

//文字div

var content = my$("content");

//装滚动条的div---容器

var scroll = my$("scroll");

//滚动条

var bar = my$("bar");

//设置滚动条的高度

//滚动条的高/装滚动条div的高=box的高/文字div的高

//滚动条的高=装滚动条div的高*box的高/文字div的高

var height = scroll.offsetHeight * box.offsetHeight / content.offsetHeight;

bar.style.height = height + "px";

//移动滚动条 bar.onmousedown = function (e) {

var spaceY = e.clientY - bar.offsetTop;

document.onmousemove = function (e) {

var y = e.clientY - spaceY;

y = y < 0 ? 0 : y;

y = y > scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y;

bar.style.top = y + "px";

//设置鼠标移动的似乎和，文字不被选中 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

//滚动条的移动距离/文字的div移动距离=滚动条最大的移动距离/文字div的最大移动距离

var moveY = y * (content.offsetHeight - box.offsetHeight) / (scroll.offsetHeight - bar.offsetHeight);

//设置位子div的移动距离 content.style.marginTop = -moveY + "px";

};

</script>

</body>

</html>

元素隐藏的不同方式

1. display:none

不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

该方式让元素隐藏时，隐藏的元素不占空间，隐藏后将改变html原有样式，会触发重排和重绘，不可触发其对应的事件。一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事。

css不能修改dom,css只能更改将在浏览器上显示的渲染树。可理解为display：none对应节点没有再dom上删除

2. visibility:hidden

该方式让元素隐藏时，隐藏的元素还是占用原有位置，所以它只会导致浏览器重绘而不会重排。隐藏后不将改变html原有样式，适用于那些元素隐藏后不希望页面布局会发生变化的场景，不可触发其对应的事件。可通过设置visibility:visible的话，将子元素将不被隐藏。

3. opacity:0

设置元素的透明度为0，

该方式让元素隐藏时，隐藏的元素还是占用原有位置，隐藏后不将改变html原有样式。但隐藏的元素所对应的事件，仍然可以触发。display属性不会出现过渡即使添加了transition,opacity属性适合在隐藏元素时添加过渡效果。

4.设置height，width等盒模型属性为0这是我总结的一种比较奇葩的技巧，简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，这算是一种奇技淫巧。

这种方式既不实用，也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的，比如jquery的slideUp动画，它就是设置元素的overflow:hidden后，接着通过定时器，不断地设置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom为0，从而达到slideUp的效果。

5.position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外

6.filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

案例：大量字符串拼接效果实现

按钮点击，字符串拼接，最后效果字符串，str

input有很多，type来分就有button和text，需要找出inputs[i].value是text的

所以用！="button"，满足条件就push进str，所以是str.push(inputs[i].value)

console.log显示，用str.join就可拼接，加个|清楚一点

简而言之，遍历顺便拿到inputs[i].value不是按钮的，push进str, 最后join进str

<!DOCTYPE html><html lang="en">

<head>

<title>title</title>

</head>

<body>

//推荐使用数组的方式拼接大量的字符串 document.getElementById("btn").onclick = function () {

var str = [];

//获取所有的文本框

var inputs = document.getElementsByTagName("input")

//每个文本框的value属性值

for (var i = 0; i < inputs.length; i++) {

if (inputs[i].type != "button") {

str.push(inputs[i].value);

}

console.log(str.join("|"));//字符串 };

</script>

</body>

</html>

案例：无刷新评论---属于创建对象的案例拿出来复习

创建行和单元格，添加到相应元素中，设置内容 createElement, appendChild,innerHTML

<!DOCTYPE html><html lang="en">

<head>

<title>title</title></head>

<body>

<tr>

<td>我喜欢吃肉</td>

</tr>

</tbody>

</table>

<div>

昵称:<input type="text" value="" id="userName" /><br />

</div>

//获取按钮，注册点击事件 document.getElementById("btn").onclick = function () {

//获取昵称

var userName = my$("userName");

//获取评论

var tt = my$("tt");

//创建行

var tr = document.createElement("tr");

//行加到tbody中 my$("tbd").appendChild(tr);

//创建单元格td1,并添加到行

var td1 = document.createElement("td");

tr.appendChild(td1);

td1.innerHTML = userName.value;

//创建单元格td2,并添加到行

var td2 = document.createElement("td");

tr.appendChild(td2);

td2.innerHTML = tt.value;

//清空 userName.value = "";

tt.value = "";

};

</script>

</body>

</html>

案例：无刷新评论---属于创建对象的案例拿出来复习

创建行和单元格，添加到相应元素中，设置内容 createElement, appendChild,innerHTML

<!DOCTYPE html><html lang="en">

<head>

<title>title</title></head>

<body>

<tr>

<td>我喜欢吃肉</td>

</tr>

</tbody>

</table>

<div>

昵称:<input type="text" value="" id="userName" /><br />

</div>

//获取按钮，注册点击事件 document.getElementById("btn").onclick = function () {

//获取昵称

var userName = my$("userName");

//获取评论

var tt = my$("tt");

//创建行

var tr = document.createElement("tr");

//行加到tbody中 my$("tbd").appendChild(tr);

//创建单元格td1,并添加到行

var td1 = document.createElement("td");

tr.appendChild(td1);

td1.innerHTML = userName.value;

//创建单元格td2,并添加到行

var td2 = document.createElement("td");

tr.appendChild(td2);

td2.innerHTML = tt.value;

//清空 userName.value = "";

tt.value = "";

};

</script>

</body>

</html>

javascript的原型，原型链，内置对象 拖曳对话框 放大镜显示和隐藏遮挡层及大层

图片跟着鼠标飞

案例：拖曳对话框

案例：放大镜显示和隐藏遮挡层及大层

案例：高清放大镜

案例：滚动条

案例：大量字符串拼接效果实现

案例：无刷新评论---属于创建对象的案例拿出来复习

案例：无刷新评论---属于创建对象的案例拿出来复习

javascript的原型，原型链，内置对象拖曳对话框放大镜显示和隐藏遮挡层及大层