您的位置:首页 > 其它

鼠标浮动文本的实现

2016-06-24 11:46 295 查看
</pre>鼠标浮动文本:页面添加div:<pre name="code" class="html"><div id="titie" style="position: absolute; top: 500px; width: auto; background-color: #E7F3FF; display: none; z-index: 100000; border: 1px solid #e1e3e4; padding: 5px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px;">
</div>


显示div:
function CreateDiv(val) {
var e = window.event
// //这里可得到鼠标X坐标
var pointX = e.pageX;
//这里可以得到鼠标Y坐标
var pointY = e.pageY;

$("#titie").css("top", pointY + 20);
$("#titie").css("margin-left", pointX);
$("#titie").html("<span>" + val + "</span>");
$("#titie").show();
}


隐藏div:
function RemoveDiv(val) {
$("#titie").hide();
}


添加元素对应的鼠标事件:
<span       onmouseover="CreateDiv(' " + content + "')" onmouseout="RemoveDiv('" + content + "')"> + content + </span>;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: