css底图随鼠标滑动局部显现

发布网友发布时间：2022-04-24 14:31

共8个回答

热心网友时间：2022-04-24 16:00

$(获取到需要弹出浮动框的元素obj).hover(function () {
//鼠标移动时
//获取到需要弹出浮动框的元素obj
divobj = document.getElementById(obj);
//获取obj的位置，left及top，IE及FF3.0以上都支持
divobjleft = divobj.getBoundingClientRect().left;
divobjtop = divobj.getBoundingClientRect().top;
//为弹出的div的left，top赋值
divobjx = divobjleft + 0 /* 弹出的div距离obj左边的距离，取实际值 */;
divobjy = divobjtop + 50 /* 弹出的div距离obj顶部的距离，取实际值 */;
// 定义弹出div
var x = "<div id='description' class='help' style='left:" + divobjx + "px; top:" + divobjy + "px;'>这里是内容，也可以通过参数来传递</div>";
//通过insertAdjacentHTML来写入到html内（这个参数火狐不支持，但是可能通过兼容代码让火狐兼容insertAdjacentHTML 属性，兼容代码不长，就几十行）
document.body.insertAdjacentHTML("afterBegin", x);
}, function () {
//鼠标移出时，通过closeDiv()移除这个div
closeDiv("description");
})

/* Sart 移除元素方法 */
function closeDiv(obj) {
var divobj = document.getElementById(obj);
divobj.parentNode.removeChild(divobj);
}
/* End移除元素方法 */

/* Start 兼容代码让火狐兼容insertAdjacentHTML 属性 */
if (typeof HTMLElement != "undefined" && !HTMLElement.prototype.insertAdjacentElement) {
HTMLElement.prototype.insertAdjacentElement = function (where, parsedNode) {
switch (where) {
case "beforeBegin":
this.parentNode.insertBefore(parsedNode, this);
break;
case "afterBegin":
this.insertBefore(parsedNode, this.firstChild);
break;
case "beforeEnd":
this.appendChild(parsedNode);
break;
case "afterEnd":
if (this.nextSibling) {
this.parentNode.insertBefore(parsedNode, this.nextSibling);
} else {
this.parentNode.appendChild(parsedNode);
}
break;
}
};
HTMLElement.prototype.insertAdjacentHTML = function (where, htmlStr) {
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var parsedHTML = r.createContextualFragment(htmlStr);
this.insertAdjacentElement(where, parsedHTML);
};
HTMLElement.prototype.insertAdjacentText = function (where, txtStr) {
var parsedText = document.createTextNode(txtStr);
this.insertAdjacentElement(where, parsedText);
};
}
/* End 兼容代码让火狐兼容insertAdjacentHTML 属性 */

热心网友时间：2022-04-24 17:18

用 background-attachment: fixed; 就可以实现了。
把图片作为那个div的背景。

热心网友时间：2022-04-24 18:53

你好，
这是简单的一个定位操作
你将该盒子的position写成 fixed;
通过left | top 将背景图移到你想显示的位置，
background里面就写上你想展示的图片。
盒子的宽高就是你想展示该背景图片的窗口大小。

热心网友时间：2022-04-24 20:44

这种情况应该是用js进行书写的，虽然css也可以实现，但代码太多，不建议使用。在网上找一找类似的js效果搬过来用就好了。

热心网友时间：2022-04-24 22:52

background-attachment这个属性,背景图片不会随页面滚动........你可以了解一下

热心网友时间：2022-04-25 01:17

使用绝对定位

热心网友时间：2022-04-25 03:58

定位属性position：flixe；

热心网友时间：2022-04-25 06:56

background: url(图片路径) no-repeat center;

background-attachment: fixed;

背景图片大点，固定就可以了