文字跟随鼠标移动的效果

<!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>
时间: 2025-01-02 15:39:55

文字跟随鼠标移动的效果的相关文章

jquery文字跟随鼠标提示

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

文字跟随鼠标

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><input type="text" id="txt" onkeypress="num1(this.event)"><

jQuery-鼠标经过显示大图并跟随鼠标效果插件

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=281 今天看完了<JavaScript语言精粹>这本书,还有时间,就决定写写jQuery插件练练手,实现的效果是,鼠标移到缩略图上会显示该图的大图,并且大图跟随鼠标移动:或是移动到提示文字上,也可以显示图片.并且含有方向判别功能,具体来说就是如果缩略图在页面的左半部分,则大图显示在鼠标的右侧,如果缩略图在页面的右半部

通用元素跟随鼠标移动效果

封装鼠标指针定位是一件很有意义的事情,这样在日常开发中就不需要再为鼠标指针定位问题而犯愁了. 设计思路:能够根据传递的具体对象,以及相对鼠标指针的偏移值,即命令该对象能够跟随鼠标移动. JS代码: function getMousePos(o,x,y,event){ //o-->对象;x,y-->相对鼠标指针的偏移距离;event-->事件对象; var posX = 0,posY = 0; //临时变量 var event = event || window.event; //标准化事

CSS3跟随鼠标的眼睛转动效果

<!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 http-equiv="Content-

JS实现导航条效果——current跟随鼠标hover移动

<!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 http-equiv="Content-

JS实现文字链接感应鼠标的解密效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>JS实现文字链接感应鼠标的解密效果丨石家庄展柜制作|石家庄铜门</TITLE> <META content="text/html; charset=gb2312" http-equiv=Content-Type> <STYLE&

Ant Design -- 图片可拖拽效果,图片跟随鼠标移动

Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(props); this.dragDrop = false; // 图片是否被拖动中 this.apartX = 0; // 鼠标在图片中与图片左上角的X轴的距离 this.apartY = 0; //鼠标在图片中与图片左上角的Y轴的距离 this.state = { value: 1, previewV

html5跟随鼠标炫酷网站引导页动画特效

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/texiao/html5/ 效果图: 以下是源代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Co