发布时间：2025-12-09 14:28:18 浏览次数：4
1、拖动后记录x,y值
给p加上mousePosition事件
function mousePosition(evt){
evt = evt || windowevent;
return {
x : evtclientX + documentbodyscrollLeft - documentbodyclientLeft,
y : evtclientY + documentbodyscrollTop - documentbodyclientTop
}
}
2、打开页面p定位
$(“p”)attr("top",y)attr("left",x);
扩展资料
在用js获取元素的位置之前，元素在页面的位置的计算公式，如下：
元素在页面的位置=此元素相对浏览器视窗的位置+浏览器滚动条的值；
用getBoundingClientRect()方法来获得某个元素相对浏览器视窗的位置 ｛这个方法返回的是一个对象，即Object，该对象具有4个属性：top，left，right，bottom ｝。
<html >
<head>
<meta >
<title>Demo</title>
</head>
<body >
<p >Demo为了方便就直接用绝对定位的元素</p>
</body>
</html>
<script>
documentgetElementById('demo')onclick=function (){
if (documentdocumentElementgetBoundingClientRect) {
alert("left:"+thisgetBoundingClientRect()left)
alert("top:"+thisgetBoundingClientRect()top)
alert("right:"+thisgetBoundingClientRect()right)
alert("bottom:"+thisgetBoundingClientRect()bottom)
var X= thisgetBoundingClientRect()left+documentdocumentElementscrollLeft;
var Y = thisgetBoundingClientRect()top+documentdocumentElementscrollTop;
alert("Demo的位置是X:"+X+";Y:"+Y)
}
}
</script>
这是很多网页前端设计者都面临的一个问题，今天通过收集整理，把我常用的方法贴出来，希望能对需要的同行朋友有点帮助~~首称贴一段js代码：<script type="text/javascript">var Image = {};function SetMiddle(image, height){/// <summary>重设大小后让相对于DIV居中</summary>if (typeof(image) == 'string') image = documentimages[image] || documentgetElementById(image);var p = imageparentNode;if(pnodeName != "DIV"){p = pparentNode;}if(imageheight > 0 && imageheight < height){var marginTopVal= (height - imageheight) / 2;imagestylemarginTop =parseInt(marginTopVal)+"px";///不加px,在火狐下不支持！}else{imageheight = height;imagestylemarginTop = "0px";}}ImageResize1=function(image,width,height){if(width==null||height==null)return;imageremoveAttribute('width');imageremoveAttribute('height');var w = imagewidth, h = imageheight;var scalingW=w/width,scalingH=h/height;var scaling = w / h;if(scalingW>=scalingH){imagewidth=width;imageheight = width / scaling;}else{imageheight=height;imagewidth = heightscaling;}}function imgReSize(imgObj,w,h){ImageResize1(imgObj,w,h);SetMiddle(imgObj,h);}</script>下面是具体的调用js函数的方法：onload=imgReSize(this,628,452)函数有三个参数，第一个就不用说了吧，每二个参数是说的最大宽度，第三个参数是表示的最大高度当的宽高任一个大于参数里设置的值的时候，就会等比例缩小，且位置相对于外面的容器左右居中多的不说了，你懂的~~~
题主是否想询问“js怎么实现左右滑动无线加载”。
1、首先，需要在HTML中添加一个容器元素，用于显示滑动加载的内容。可以使用CSS设置容器元素的宽度和高度，并设置overflow属性为hidden，这样可以隐藏容器元素之外的内容。
2、接下来，需要使用JavaScript编写代码，实现滑动加载的功能。可以使用jQuery或其他JavaScript库实现，也可以使用原生JavaScript编写。
3、在JavaScript中，需要监听用户的滑动事件。当用户在容器元素上滑动时，可以使用JavaScript获取滑动的距离和方向，并根据需要加载新的内容，加载新的内容可以通过Ajax请求实现，将获取到的内容添加到容器元素的末尾或开头。
4、为了实现无限加载，需要在加载新内容之前判断容器元素中已有的内容是否已经全部加载完毕。
1、用js实现这样的功能纯粹就是浪费性能，不划算，最好用css来实现；
2、用css设置超出省略非常简单
text{
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
3、如果你实在想用js来实现这样的效果，那么，有两种方法：
先获取dom的宽度，判断宽度是不是大于预设的宽度，如果大于，就删掉最后的几个字，然后继续判断；
获取dom的宽度，如果宽度大于预设值，就用js改变dom的css样式。
js获取游戏控件方法如下：
//获取坐标位置
function getpos(e) {
var t=eoffsetTop;
var l=eoffsetLeft;
var height=eoffsetHeight;
while(e=eoffsetParent) {
t+=eoffsetTop;
l+=eoffsetLeft;
假设 obj 为某个 HTML 控件。
objoffsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
objoffsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
objoffsetWidth 指 obj 控件自身的宽度，整型，单位像素。
objoffsetHeight 指 obj 控件自身的高度，整型，单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。
“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，styletop 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而 styletop 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 styletop 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 styletop 返回的是空字符串。
offsetLeft 与 styleleft、offsetWidth 与 stylewidth、offsetHeight 与 styleheight 也是同样道理。
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
IE60、FF106+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE50/55：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流