jquery实现的提示浮层跟随鼠标移动

jquery实现：

jquery实现简单文字提示

#preview{border:1px solid #cccccc; background:#9900CC;color:#fff; padding:5px; display:none; position:absolute;}

把鼠标放到这里1

把鼠标放到这里2

把鼠标放到这里3

把鼠标放到这里4

把鼠标放到这里5

this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// 可以自己设定偏移值
/* END CONFIG */
$("a.preview").hover(function(e){
$("body").append("

jquery实现简单文字提示

");
$("#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();
});

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript DIV跟随鼠标移动

    首先介绍的是一个div跟随鼠标移动的效果,具体代码如下 javascript div跟随鼠标移动 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> window.o

  • 随鼠标移动的图片或文字特效代码

    跟随鼠标的图片特效 document.onmousemove = function () { var x = window.event.clientX; var y = window.event.clientY; var divId = document.getElementById("divId"); if (!divId) { return; } divId.style.left = x; divId.style.top = y; } 这里放的是图片 [Ctrl+A 全选 注:如需

  • js实现文字跟随鼠标移动而移动的方法

    本文实例讲述了js实现文字跟随鼠标移动而移动的方法.分享给大家供大家参考.具体分析如下: 这是一款非常简单的鼠标特性代码,在网页中移动鼠标的时候,后面跟着一串文字跟随者鼠标移动 复制代码 代码如下: <html> <head> <style type="text/css"> .spanstyle { COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY:

  • js图片跟随鼠标移动代码

    js图片跟随鼠标移动代码

    在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下. 在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里,http://www.jb51.net/article/17266.htm. 我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只

  • javascript跟随鼠标x,y坐标移动的字效果

    跟随鼠标x,y坐标移动的字效果 function oMove() { var x=event.x; var y=event.y; if (y>0&&y200&&x 移动的字! 移动的字! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 让div层随鼠标移动的实现代码 ie ff

    .center_div2 { position: absolute; z-index: 1; text-align: center; display: none; background-color: #e0e7ef; } .center_div_tips2 { position: relative; color: Red; } <div id="detailDiv" class="center_div2"> <span class="ce

  • Jquery创建层显示标题和内容且随鼠标移动而移动

    复制代码 代码如下: <script src="Core/Public/js/jquery.js" type="text/javascript"></script> //引入Jquery <style type="text/css"> //编写创建的div的样式 #tooltip { position: absolute; border: 1px #solid #333; background: #f7f5d1

  • javascript实现图片跟随鼠标移动效果的方法

    本文实例讲述了javascript实现图片跟随鼠标移动效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片跟着鼠标走</title&g

  • 当鼠标移动到图片上时跟随鼠标显示放大的图片效果

    当鼠标移动到图片上时跟随鼠标显示放大的图片效果

    原始状态:  鼠标经过:   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

  • jQuery实现div跟随鼠标移动

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解释) <!DOCTYPE html> <html> <head> <meta charset="{utf-8}"> <title></title> <script src="../jquery-3.2.

随机推荐