鼠标跟随效果代码

Untitled Document

document.onmousemove=function(e){
var e=e?e:window.event;
var posx=e.clientX;
var posy=e.clientY;
document.images[0].style.left=posx+"px";
document.images[0].style.top=posy+"px";
}

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

赞 (0)

相关推荐

  • js实现简单鼠标跟随效果的方法

    本文实例讲述了js实现简单鼠标跟随效果的方法.分享给大家供大家参考.具体分析如下: 鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动.   要点一: var oEvent = evt || window.event; 这个是为了兼容ie和ff而写的,在ie下window.event表示event对象,而ff下,是给事件函数传一个参数,这个参数就表示事件对象. 要点二: document.onmousemove = function(evt) 鼠标跟随是在鼠标移动时发生的事情.

  • 基于jquery实现人物头像跟随鼠标转动

    基于jquery实现人物头像跟随鼠标转动

    一款非常乖巧的人物头像跟随鼠标转动效果,在浏览器屏幕内,人物脸庞始终面向鼠标转动.其实现原理即同一张图片上作出人物上下左右不同面向的效果,利用JS调用背景图片的位置,以此实现人物"转脸"的jquery特效效果. 先给大家展示效果图,需要的朋友可以下载源码 效果演示  源码下载 具体实现过程不多说了,直接给大家贴代码了. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q

  • 鼠标跟随的文字变动效果

    复制代码保存为.html文件即可运行: 鼠标跟随 var sum; function change(){ sum=document.getElementById("test").scrollLeft; document.getElementById("test").scrollLeft+=40; if(sum==document.getElementById("test").scrollLeft){document.getElementById(

  • Js鼠标跟随代码小手点击实例方法

    Js鼠标跟随代码小手点击实例方法

    可爱的鼠标跟随 html{ background:#000;} body,html,input{ cursor:none;} body,html{ height:100%;} #cursor{ position:absolute; left:100px; top:100px; display:block;} window.onload = function(){ var oCursor = document.getElementById("cursor"); document.onmo

  • 基于JQuery的一个简单的鼠标跟随提示效果

    基于JQuery的一个简单的鼠标跟随提示效果

    1.效果如图 2.实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建好的div加到文档中 为提示层设置位置 2 鼠标移出标题 移除div 3 当鼠标在标题内移动时 同样添加div效果 3.JQuery实现代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t

  • 鼠标跟随效果代码

    鼠标跟随效果代码

    Untitled Document document.onmousemove=function(e){ var e=e?e:window.event; var posx=e.clientX; var posy=e.clientY; document.images[0].style.left=posx+"px"; document.images[0].style.top=posy+"px"; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 原生js实现鼠标跟随效果

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标跟随效果</title> <style type="text/css"> *{margin: 0;padding: 0;} img{position:absolute;top:0;left:0;} &

  • 简单实现js鼠标跟随效果

    本文实例为大家分享了js鼠标跟随效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div{ margin:0; padding:0; } #box{ position:relative; m

  • 原生js canvas实现鼠标跟随效果

    本文实例为大家分享了canvas实现鼠标跟随效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas鼠标跟随效果(原生js实现)</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m

  • jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html

  • jQuery实现鼠标跟随效果

    所谓鼠标跟随,一般就是指鼠标移到哪张图片上,那该张图片的放大图片就会出现,并且放大图片会随着鼠标在该张图片上移动而移动. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } img{ border:none; }

  • Javascript 鼠标移动上去 滑块跟随效果代码分享

    Javascript 鼠标移动上去 滑块跟随效果代码分享

    先来一张截图. 鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随.不管有多少个都可以.javascript code: 复制代码 代码如下: function changeCoord(id, left) { $$(id).style.left = left;} function $$(id) { return document.getElementById(id);} function $$$(id) { return document.getElementsByClassNam

  • 基于jquery的鼠标拖动效果代码

    记得在之前的一个"拖动层"的随笔中,我实现拖动,是用的一个布尔变量,判断是否可以拖动某元素. 这两天看了一些东西,发现不需要设这个布尔变量; 实现过程: 按下鼠标的时候,给文档对象(当然也可以是别的DOM对象)的移动事件绑定一个处理函数,同时也给鼠标抬起时绑定一个解除的处理函数. 复制代码 代码如下: //按下鼠标并移动时(拖动),调用的函数: function startSelection(event){ -- } //解除移动时的处理函数: function cancelSelec

  • js鼠标跟随运动效果

    本文实例为大家分享了js鼠标跟随效果展示的具体代码,供大家参考,具体内容如下 1.使用命令创建基本结构ul.cursorPlay#cursorPlay>li*12>a>img+div>span 2.给span标签添加字段 3.设置基本的样式 cursorPlay的宽度 992px,高度600px cursorPlay li背景为白色,内边距为8px,外边距5px,显示浮动为左浮动 cursorPlay li a,cursorPlay li a img显示为块状并且为相对布局 cur

随机推荐