文字跟随鼠标移动的效果

简介: doctype html> Jquery body{height:3000px; background:#09F;} .wenzi{position:absolute; left:0; top:0;} p{cursor:pointer;} $(function(){ $(document).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery</title>
<style>
body{height:3000px; background:#09F;}
.wenzi{position:absolute; left:0; top:0;}
p{cursor:pointer;}
</style>

<script src="jquery.js" type="text/javascript"></script>
<script>
$(function(){
    $(document).mousemove(function(e){var x=e.pageX-$('p').width()/2;    //获取鼠标的x坐标
        var y=e.pageY-$('p').height()/2-10;   //获取鼠标的y坐标
         $('.wenzi').css({'left':x,'top':y},1000)
    });
})
</script>
</head>
<body>
<p class='wenzi'>这是一段文字</p>
</body>
</html>

 

相关文章
|
4月前
|
前端开发 C++
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
46 0
|
12月前
|
小程序 JavaScript
小程序鼠标点击按钮(改变背景颜色字体)
小程序鼠标点击按钮(改变背景颜色字体)
94 0
|
6月前
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
鼠标悬浮显示文字的简单方法
鼠标悬浮显示文字的简单方法
167 0
|
JavaScript 前端开发 API
前端|获取网页中鼠标选中文字
前端|获取网页中鼠标选中文字
242 0
|
前端开发 JavaScript 计算机视觉
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
1099 0
css动画:文字向上移动并逐渐消失 点击按钮显示+1上移淡出
|
Android开发 UED
完美解决android软键盘挡住输入框方法,还不顶标题栏
完美解决android软键盘挡住输入框方法,还不顶标题栏
1344 0
完美解决android软键盘挡住输入框方法,还不顶标题栏
点击图片或者鼠标划过切换样式的另一种写法
点击图片或者鼠标划过切换样式的另一种写法
66 0