您的当前位置:首页js实现鼠标跟随运动效果

js实现鼠标跟随运动效果

2022-06-15 来源:比拉宠物

鼠标跟随运动效果展示

1、使用命令创建基本结构ul.cursorPlay#cursorPlay>li*12>a>img+div>span

2、给span标签添加字段

3、设置基本的样式

1、cursorPlay的宽度 992px,高度600px2、cursorPlay li背景为白色,内边距为8px,外边距5px,显示浮动为左浮动3、cursorPlay li a,cursorPlay li a img显示为块状并且为相对布局4、cursorPlay li a添加overflow:hidden5、cursorPlay li a div为绝对布局,宽度和高度均为100%,设置背景颜色为rgba

4、js添加动态效果(方向0,1,2,3分别为上,右,下,左)

1)、给绑定鼠标进入或者出去的事件

$("#cursorPlay li").on("mouseenter mouseleave",function(event){var evType = event.type;var direction = getDir($(this), {x: event.pageX,y: event.pageY});// console.log("evtype:"+evType+",dir:"+direction);moveTo($(this),direction, evType);});2、

2)、使用getDir获取鼠标移动的方向,coordinates坐标

计算鼠标划入画出方向函数(搜索关键词“jquery计算鼠标划入划出方向”)

direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;function getDir($el, coordinates){var w = $el.width(),h = $el.height(),x = (coordinates.x - $el.offset().left - (w / 2)) * (w > h ? (h / w) : 1),y = (coordinates.y - $el.offset().top - (h / 2)) * (h > w ? (w / h) : 1),direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;return direction;}

3)、添加移动函数moveTo,三个参数分别为选择器,方向,鼠标划入画出类型,通过判断鼠标划入类型,来自定义选择器初始位置,然后重定义css样式,当鼠标划出时再重定义每个方向上的位置

function moveTo($el, direction, type){ var $layer = $el.find("div"); var coord = {}; if(type === "mouseenter"){ switch(direction){ case 0 : $layer.css("top","-100%").css("left","0px");break; case 1 : $layer.css("left","100%").css("top","0px");break; case 2 : $layer.css("top","100%").css("left","0px");break; case 3 : $layer.css("left","-100%").css("top","0px");break; } coord = {left:0,top:0} }else{ switch(direction){ case 0 : coord = {left:0,top:'-100%'};break; case 1 : coord = {left:'100%',top:0};break; case 2 : coord = {left:0,top:'100%'};break; case 3 : coord = {left:'-100%',top:0};break; }}$layer.animate(coord,300);} 

小编还为您整理了以下内容,可能对您也有帮助:

javascript特效问题 页面上有许多点一直跟随着鼠标指针的移动。如何实现这个这个效果.

新建html复制黏贴运行即可

<html>

<head>

<title>鼠标跟随效果</title>

<style type="text/css">

html {

overflow: hidden;

}

body {

position: absolute;

height: 100%;

width: 100%;

margin:0;

padding:0;

}

#screen {

background:#000;

position: absolute;

width: 100%;

height: 100%;

}

#screen span {

background: #fff;

font-size: 0;

overflow: hidden;

width: 2px;

height: 2px;

}

</style>

<script type="text/javascript">

var Follow = function () {

var $ = function (i) {return document.getElementById(i)},

addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},

OBJ = [], sp, rs, N = 0, m;

var init = function (id, config) {

this.config = config || {};

this.obj = $(id);

sp = this.config.speed || 4;

rs = this.config.animR || 1;

m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};

this.setXY();

this.start();

}

init.prototype = {

setXY : function () {

var _this = this;

addEvent(this.obj, 'mousemove', function (e) {

e = e || window.event;

m.x = e.clientX;

m.y = e.clientY;

})

},

start : function () {

var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;

OBJ[N++] = OO = new CObj(null, 0, 0);

for(var i=0;i<360;i+=20){

var O = OO;

for(var j=10; j<35; j+=1){

var x = fn(i, j).x,

y = fn(i, j).y;

OBJ[N++] = o = new CObj(O , x, y);

O = o;

}

}

setInterval(function() {

for (var i = 0; i < N; i++) OBJ[i].run();

}, 16);

}

}

var CObj = function (p, cx, cy) {

var obj = document.createElement("span");

this.css = obj.style;

this.css.position = "absolute";

this.css.left = "-1000px";

this.css.zIndex = 1000 - N;

document.getElementById("screen").appendChild(obj);

this.ddx = 0;

this.ddy = 0;

this.PX = 0;

this.PY = 0;

this.x = 0;

this.y = 0;

this.x0 = 0;

this.y0 = 0;

this.cx = cx;

this.cy = cy;

this.parent = p;

}

CObj.prototype.run = function () {

if (!this.parent) {

this.x0 = m.x;

this.y0 = m.y;

} else {

this.x0 = this.parent.x;

this.y0 = this.parent.y;

}

this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;

this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;

this.css.left = Math.round(this.x) + 'px';

this.css.top = Math.round(this.y) + 'px';

}

return init;

}();

</script></head>

<body>

<div id="screen"></div>

<script type="text/javascript">

new Follow('screen', {speed: 4,

animR : 2,

fn : function (i, j) {

return {

x : j/4*Math.cos(i),

y : j/4*Math.sin(i)

}

}})

</script></body>

</html>

用js控制div跟随鼠标移动,鼠标点击后,鼠标离开,div留在当前点击的位置怎么做

var drag_ = false

var D = new Function('obj', 'return document.getElementById(obj);')

var oevent = new Function('e', 'if (!e) e = window.event;return e')

function Move_obj(obj) {

var x, y;

D(obj).onmousedown = function (e) {

drag_ = true;

with (this) {

style.position = "absolute"; var temp1 = offsetLeft; var temp2 = offsetTop;

x = oevent(e).clientX; y = oevent(e).clientY;

document.onmousemove = function (e) {

if (!drag_) return false;

with (this) {

style.left = temp1 + oevent(e).clientX - x + "px";

style.top = temp2 + oevent(e).clientY - y + "px";

}

}

}

document.onmouseup = new Function("drag_=false");

}

}

<div onmousedown="Move_obj(this.id)" id="dd" style="width:100px;height:100px;background:red"></div>

如果需要以后都留在此位置,需把当前位置的坐标保存到数据库,下次打开时读取数据加载div

用JS制作跟随鼠标移动的方块

<!DOCTYPE html>
<html>
  <head>
<meta charset=UTF-8>
<title>Yugi</title>
<style>
*{
margin:0;
padding:0;
}
</style>
<script>
var Yugi = function(w, h, v) 
{
    this.w = w;
    this.h = h;
    this.v = v;
};

Yugi.prototype = new Yugi;
Yugi.prototype.constructor = Yugi;

Yugi.pointToPoint = function(a, b) {
    return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2));
}

Yugi.pointToAngle = function(origin, point) {
    var PI = Math.PI;
    if (point[0] == origin[0]) {
        if (point[1] > origin[1])
            return PI * 0.5;
        return PI * 1.5
    } else if (point[1] == origin[1]) {
        if (point[0] > origin[0])
            return 0;
        return PI;
    }
    var t = Math.atan((origin[1] - point[1]) / (origin[0] - point[0]) * 1);
    if (point[0] > origin[0] && point[1] < origin[1])
        return t + 2 * PI;
    if (point[0] > origin[0] && point[1] > origin[1])
        return t;
    return t + PI;
}

Yugi.prototype.create = function(e, _sX, _sY) 
{
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.cursor = "pointer";
    div.style.width = this.w + "px";
    div.style.height = this.h + "px";
var L = e.clientX + _sX - this.w / 2, T = e.clientY + _sY - this.h / 2;
    div.style.left = L + "px";
    div.style.top = T + "px";
    div.style.backgroundColor = "red";
    document.body.appendChild(div);
    this.elem = div;
    this.currPoint = [L, T];
};

Yugi.prototype.move = function(e, _sX, _sY) 
{
    var me = this, x = e.clientX + _sX - me.w / 2, y = e.clientY + _sY - me.h / 2;
    var newPoint = [x, y];
    var sleep = 20, speed = me.v / sleep;
    me.interval && clearInterval(me.interval);
    me.interval = setInterval(function() {
        var len = Yugi.pointToPoint(me.currPoint, newPoint);
        if (len < 1) {
            clearInterval(me.interval);
            me.interval = 0;
        } else {
            var angle = Yugi.pointToAngle(me.currPoint, newPoint);
            me.currPoint = [me.currPoint[0] + Math.cos(angle) * Math.min(len / 2, speed), me.currPoint[1] + Math.sin(angle) * Math.min(len / 2, speed)];
            me.elem.style.left = me.currPoint[0] + 'px';
            me.elem.style.top = me.currPoint[1] + 'px';
        }
    }, sleep);
};

var yugi = new Yugi(30, 30, 500);
document.onclick = function(e) 
{
    e = e || window.event;
    var _sX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
    var _sY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var me = yugi;
    if (!me.elem) {
        me.create(e, _sX, _sY);
    } 
    else {
        if (!me.interval) {
            var cloned = document.createElement("div");
            cloned.innerHTML = me.elem.outerHTML;
            document.body.appendChild(cloned.children[0]);
        }
        me.move(e, _sX, _sY);
    }
};

document.oncontextmenu = new Function("return false");
</script>
  </head>
<body></body>
</html>

用JS制作跟随鼠标移动的方块

<!DOCTYPE html>
<html>
  <head>
<meta charset=UTF-8>
<title>Yugi</title>
<style>
*{
margin:0;
padding:0;
}
</style>
<script>
var Yugi = function(w, h, v) 
{
    this.w = w;
    this.h = h;
    this.v = v;
};

Yugi.prototype = new Yugi;
Yugi.prototype.constructor = Yugi;

Yugi.pointToPoint = function(a, b) {
    return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2));
}

Yugi.pointToAngle = function(origin, point) {
    var PI = Math.PI;
    if (point[0] == origin[0]) {
        if (point[1] > origin[1])
            return PI * 0.5;
        return PI * 1.5
    } else if (point[1] == origin[1]) {
        if (point[0] > origin[0])
            return 0;
        return PI;
    }
    var t = Math.atan((origin[1] - point[1]) / (origin[0] - point[0]) * 1);
    if (point[0] > origin[0] && point[1] < origin[1])
        return t + 2 * PI;
    if (point[0] > origin[0] && point[1] > origin[1])
        return t;
    return t + PI;
}

Yugi.prototype.create = function(e, _sX, _sY) 
{
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.cursor = "pointer";
    div.style.width = this.w + "px";
    div.style.height = this.h + "px";
var L = e.clientX + _sX - this.w / 2, T = e.clientY + _sY - this.h / 2;
    div.style.left = L + "px";
    div.style.top = T + "px";
    div.style.backgroundColor = "red";
    document.body.appendChild(div);
    this.elem = div;
    this.currPoint = [L, T];
};

Yugi.prototype.move = function(e, _sX, _sY) 
{
    var me = this, x = e.clientX + _sX - me.w / 2, y = e.clientY + _sY - me.h / 2;
    var newPoint = [x, y];
    var sleep = 20, speed = me.v / sleep;
    me.interval && clearInterval(me.interval);
    me.interval = setInterval(function() {
        var len = Yugi.pointToPoint(me.currPoint, newPoint);
        if (len < 1) {
            clearInterval(me.interval);
            me.interval = 0;
        } else {
            var angle = Yugi.pointToAngle(me.currPoint, newPoint);
            me.currPoint = [me.currPoint[0] + Math.cos(angle) * Math.min(len / 2, speed), me.currPoint[1] + Math.sin(angle) * Math.min(len / 2, speed)];
            me.elem.style.left = me.currPoint[0] + 'px';
            me.elem.style.top = me.currPoint[1] + 'px';
        }
    }, sleep);
};

var yugi = new Yugi(30, 30, 500);
document.onclick = function(e) 
{
    e = e || window.event;
    var _sX = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
    var _sY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var me = yugi;
    if (!me.elem) {
        me.create(e, _sX, _sY);
    } 
    else {
        if (!me.interval) {
            var cloned = document.createElement("div");
            cloned.innerHTML = me.elem.outerHTML;
            document.body.appendChild(cloned.children[0]);
        }
        me.move(e, _sX, _sY);
    }
};

document.oncontextmenu = new Function("return false");
</script>
  </head>
<body></body>
</html>

js鼠标跟随是怎么做到的

(若有事件,事件触发时)获取鼠标的x、y坐标值,在把坐标值赋值给元素的定位值
获取鼠标的坐标值方式有多种,event.client/screen/page/offset,自己去了解对比下用法和区别

js鼠标跟随是怎么做到的

(若有事件,事件触发时)获取鼠标的x、y坐标值,在把坐标值赋值给元素的定位值
获取鼠标的坐标值方式有多种,event.client/screen/page/offset,自己去了解对比下用法和区别

求鼠标移动上去就显示一张跟在鼠标的图片JS代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效|JsCode.cn|---跟随鼠标的图片</title>

<script LANGUAGE="JavaScript">

var newtop=0

var newleft=0

if (navigator.appName == "Netscape") {

layerStyleRef="layer.";

layerRef="document.layers";

styleSwitch="";

}

else

{

layerStyleRef="layer.style.";

layerRef="document.all";

styleSwitch=".style";

}

function doMouseMove() {

layerName = 'iit'

eval('var curElement='+layerRef+'["'+layerName+'"]')

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"')

eval('curElement'+styleSwitch+'.visibility="visible"')

eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth')

eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight')

eval('height=curElement'+styleSwitch+'.height')

eval('width=curElement'+styleSwitch+'.width')

width=parseInt(width)

height=parseInt(height)

if (event.clientX > (document.body.clientWidth - 5 - width))

{

newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width

}

else

{

newleft=document.body.scrollLeft + event.clientX

}

eval('curElement'+styleSwitch+'.pixelLeft=newleft')

if (event.clientY > (document.body.clientHeight - 5 - height))

{

newtop=document.body.clientHeight + document.body.scrollTop - 5 - height

}

else

{

newtop=document.body.scrollTop + event.clientY

}

eval('curElement'+styleSwitch+'.pixelTop=newtop')

}

document.onmousemove = doMouseMove;

</script>

</head>

<body>

<!-- 以下代码是设定此页的鼠标样式代码 -->

<script language="javascript">

if (navigator.appName == "Netscape") {

}

else

{

document.write('<div ID=OuterDiv>')

document.write('<img ID=iit src="images/flag.gif" STYLE="position:absolute;TOP:5pt;LEFT:5pt;Z-INDEX:10;visibility:hidden;">')

document.write('</div>')

}

</script>

</body>

</html>

div随鼠标移动js问题

var oTop = document.getElementById("to_top");
document.onmousemove = function(evt){
var oEvent = evt || window.event;//重点在这句
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
}

div随鼠标移动js问题

var oTop = document.getElementById("to_top");
document.onmousemove = function(evt){
var oEvent = evt || window.event;//重点在这句
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
}

JS代码实现跟随鼠标移动的图片中细节问题求解,谢谢!

1.e就指的事件(event),其中就包括鼠标x y坐标(clientX clientY)。 e||window.event是为是兼容ie与ff。记住就好了,当要取得事件时,加上一个参数。尤其是在ff中,必须这样传事件,否则获取不到事件,而ie可以函数中直接用window.event获得事件。

2.这样实现是把他藏在左边很远的地方的了。也可以设置他的z-index,但是要指定它的position 为absolute,再指定z-index=-99; 或者直接另它的 display="none"。

js控制鼠标显示 坐标随着鼠标移动 并且坐标在鼠标的右侧显示 谢谢_百度...

测试可用。希望对你有所帮助。
<html>
<head>
<script type="text/javascript">
function show_coords(event){
var x = event.clientX;
var y = event.clientY;
var say = document.all("coords");
say.innerHTML = "X:"+x+" Y:"+y;
say.style.position = "absolute";
say.style.left = x + 30;
say.style.top = y;
}
</script>
</head>
<body onmousemove="show_coords(event)">
<p id="coords"></p>
</body>
<html>

js控制鼠标显示 坐标随着鼠标移动 并且坐标在鼠标的右侧显示 谢谢_百度...

测试可用。希望对你有所帮助。
<html>
<head>
<script type="text/javascript">
function show_coords(event){
var x = event.clientX;
var y = event.clientY;
var say = document.all("coords");
say.innerHTML = "X:"+x+" Y:"+y;
say.style.position = "absolute";
say.style.left = x + 30;
say.style.top = y;
}
</script>
</head>
<body onmousemove="show_coords(event)">
<p id="coords"></p>
</body>
<html>

用js控制div跟随鼠标移动,鼠标点击后,鼠标离开,div留在当前点击的位置怎么做

你要的应该是拖拽效果,可以通过jq插件做

http://www.runoob.com/jqueryui/example-draggable.html

基本原理就是鼠标按下修改div的left和top(或者right/bottom)。鼠标离开不变。

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<Style>

#test{

position:absolute;

}

</style>

<script>

$(document).mousedown(function(){

       $(this).mousemove(function(e){

$("#test").css({ "left": e.pageX+"px", "top": e.pageY+"px" }); 

           $(document).mouseup(function(){

               $(this).unbind('mousemove');

           })

       })

   })

</script>

</head>

<body>

<div id="test">ssssssssss</div>

</body>

</html>

javascript 鼠标跟随--一串跟随鼠标的Div的问题

可以这样理解,这是一个鼠标移动事件,当你的鼠标移动时div就有了left和top了。js代码处理dom时本身速度没有鼠标移动触发事件改变那么快所以造成了拖影效果,也就是在for循环当中已经在对div进行位置修改了,但是鼠标不停移动又触发了事件。不信你就保留2个div看看就知道了。
希望我说的清楚。

javascript 鼠标跟随--一串跟随鼠标的Div的问题

可以这样理解,这是一个鼠标移动事件,当你的鼠标移动时div就有了left和top了。js代码处理dom时本身速度没有鼠标移动触发事件改变那么快所以造成了拖影效果,也就是在for循环当中已经在对div进行位置修改了,但是鼠标不停移动又触发了事件。不信你就保留2个div看看就知道了。
希望我说的清楚。

比拉宠物还为您提供以下相关内容希望对您有帮助:

three.js如何让场景中模型跟随鼠标旋转呀

引入这个js 找你自己的路径哈,在threejs的库文件里面有的。然后在代码中加入 var controls = new THREE.OrbitControls(camera);//创建控件对象 camera是你的相机对象 controls.addEventListener('change', render);//监听鼠标、键盘事件 就可以随意旋转了。

qq空间鼠标跟随代码怎么弄

在QQ空间中实现鼠标跟随效果,通常是通过编写JavaScript代码并嵌入到HTML页面中来实现的。下面是一种实现方式:首先,在QQ空间的HTML页面中,你需要定义一个元素来显示鼠标跟随的效果。这可以是一个文本元素、图像或其他任何你想要显示的内容。例如,你可以使用``元素来显示跟随鼠标的文本。然后,你需要编写J...

用js控制div跟随鼠标移动,鼠标点击后,鼠标离开,div留在当前点击的位置怎...

var drag_ = false var D = new Function('obj', 'return document.getElementById(obj);')var oevent = new Function('e', 'if (!e) e = window.event;return e')function Move_obj(obj) { var x, y;D(obj).onmousedown = function (e) { drag_ = true;with (this) { style...

用js控制div跟随鼠标移动,鼠标点击后,鼠标离开,div留在当前点击的位置怎...

你要的应该是拖拽效果,可以通过jq插件做 http://www.runoob.com/jqueryui/example-draggable.html基本原理就是鼠标按下修改div的left和top(或者right/bottom)。鼠标离开不变。&lt;!DOCTYPE html&gt;&lt;Style&gt;#test{position:absolute;}$(document).mousedown(function(){ $(this).mousemove(function(e){$...

js鼠标跟随是怎么做到的

(若有事件,事件触发时)获取鼠标的x、y坐标值,在把坐标值赋值给元素的定位值 获取鼠标的坐标值方式有多种,event.client/screen/page/offset,自己去了解对比下用法和区别

用JS制作跟随鼠标移动的方块

= function(a, b) { return Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2));}Yugi.pointToAngle = function(origin, point) { var PI = Math.PI; if (point[0] == origin[0]) { if (point[1] &gt; origin[1])...

js怎么让html页面跟随鼠标html跟随鼠标拖动

可以将链接设置成块级元素,设置块级元素的行高,增大对鼠标的响应。html如何实现鼠标悬停显示文字,鼠标移走文字消失?1、方法一,利用html特性,每个标签都有一个title属性。当鼠标hover在该标签内容上时,浏览器展示出该标签的title内容,让鼠标移走,内容消失,如下:p{ height:100px;width:100px;back...

在Dreamweaver中的鼠标跟踪特效的代码应该怎么写?

要用到 JavaScript 特效 把如下代码加入区域中 图片跟踪鼠标代码:QQ.jpg 是图片 &lt;SCRIPT language="JavaScript"&gt; &lt;!-- B=document.all;C=document.layers;T1=new Array("qq.jpg",38,35,"qq.jpg",30,31,"qq.jpg",28,26,"qq.jpg",22,21,"qq.jpg",16,16)nos=parseInt(T1.length/3)ra...

...属于那种进入网站后可以跟着鼠标或手指移动?

然后,你需要学习JavaScript来实现交互功能。JavaScript可以让你的网页具有动态效果,例如跟随鼠标或手指移动。关于宇宙星系图谱的实现,你可以使用一些开源的JavaScript库或框架来帮助你快速搭建。一些常用的库包括Three.js、D3.js和Pixi.js,它们都提供了强大的图形渲染和交互功能。你可以在网上搜索这些库的...

急!求网页鼠标跟随代码!~

网页中鼠标跟随效果代码 .spanstyle { COLOR: #ff0000; FONT-SIZE: 9pt; FONT-WEIGHT: bold; POSITION: absolute; TOP: -50px; VISIBILITY: visible } var x,y var step=20 var flag=0 var message="送你千朵红玫瑰——以代表我的心情"message=message.split("")var xpos=new...

Top