前端jquery实现的提示浮层跟随鼠标移动
摘要：前端如何提升开发效率 前端开发如何调试 安卓前端开发岗:岗位职责 html 代码 <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type”……
前端如何提升开发效率 前端开发如何调试 安卓前端开发岗:岗位职责
html 代码
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>jquery实现简单文字提示</title>
<style type=”text/css”>
#preview {
background: #000;
color: #fff;
padding: 6px 8px;
border-radius: 3px;
font-size: 13px;
display: none;
position: absolute;
}
.preview {
width: 130px;
height: 40px;
padding: 0;
font-size: 14px;
line-height: 38px;
color: #333;
background-color: #fff;
border: 1px solid #d1d2d3;
display: inline-block;
margin: 50px 20px 0;
font-weight: normal;
text-align: center;
cursor: pointer;
border-radius: 2px;
}
</style>
</head>
<body>
<a class=”preview”>把鼠标放到这里1</a>
<a class=”preview”>把鼠标放到这里2</a>
<a class=”preview”>把鼠标放到这里3</a>
<a class=”preview”>把鼠标放到这里4</a>
<a class=”preview”>把鼠标放到这里5</a>
<script type=”text/javascript”>
this.imagePreview = function () {
/* CONFIG */
xOffset = 25;
yOffset = 15;
// 可以自己设定偏移值
/* END CONFIG */
$(“a.preview”).hover(function (e) {
$(“body”).append(“<div id=’preview’>jquery实现简单文字提示</div>”);
$(“#preview”)
.css(“top”, (e.pageY – xOffset) + “px”)
.css(“left”, (e.pageX + yOffset) + “px”)
.fadeIn(“slow”);
},
function () {
$(“#preview”).fadeOut(“fast”);
});
$(“a.preview”).mousemove(function (e) {
$(“#preview”)
.css(“top”, (e.pageY – xOffset) + “px”)
.css(“left”, (e.pageX + yOffset) + “px”);
});
};
// 页面加载完执行
$(document).ready(function () {
imagePreview();
});
</script>
</body>
</html>
如何更的学好前端开发 安卓与前端开发视频教程下载 安卓与前端开发视频教程下载
» 本文来自：前端开发者 » 《前端jquery实现的提示浮层跟随鼠标移动》
» 本文链接地址：https://www.rokub.com/5702.html
» 您也可以订阅本站：https://www.rokub.com
近期评论