前端jQuery实现的提示浮层跟随鼠标移动

前端如何提升开发效率前端开发如何调试安卓前端开发岗:岗位职责

html 代码

<head>

<title>jquery实现简单文字提示</title>

#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>

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

前端jQuery实现的提示浮层跟随鼠标移动

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

回顶部

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

回顶部

评论抢沙发