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

最新推荐文章于 2024-10-09 00:58:21 发布

qq_53587164

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量368

点赞数

文章标签： webview javascript html

本文链接：https://blog.csdn.net/qq_53587164/article/details/124647882

版权

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

摘要由CSDN通过智能技术生成

图片跟着鼠标飞

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,