随鼠标移动的图片或文字特效代码
跟随鼠标的图片特效
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需刷新才能执行]
其实这段代码很简单,也很好理解,只是获取了当前鼠标在屏幕中的位置; 然后再把坐标值赋给图片,或者文字!当然要用到 position:absoluute; 绝对定位!
相关推荐
-
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
-
javascript跟随鼠标x,y坐标移动的字效果
跟随鼠标x,y坐标移动的字效果 function oMove() { var x=event.x; var y=event.y; if (y>0&&y200&&x 移动的字! 移动的字! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
js图片跟随鼠标移动代码
在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下. 在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里,http://www.jb51.net/article/17266.htm. 我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只
-
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
原始状态: 鼠标经过: 复制代码 代码如下: <!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实现的提示浮层跟随鼠标移动
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
-
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
-
js实现文字跟随鼠标移动而移动的方法
本文实例讲述了js实现文字跟随鼠标移动而移动的方法.分享给大家供大家参考.具体分析如下: 这是一款非常简单的鼠标特性代码,在网页中移动鼠标的时候,后面跟着一串文字跟随者鼠标移动 复制代码 代码如下: <html> <head> <style type="text/css"> .spanstyle { COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY:
-
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
-
让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实现div跟随鼠标移动
重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解释) <!DOCTYPE html> <html> <head> <meta charset="{utf-8}"> <title></title> <script src="../jquery-3.2.
随机推荐
- JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
- javascript:window.open弹出窗口的位置问题
- Java数据结构之红黑树的真正理解
- iOS使用 CABasicAnimation 实现简单的跑马灯(无cpu暴涨)
- 基于UIControl控件实现ios点赞功能
- perl 子程序 sub
- Python实现从URL地址提取文件名的方法
- VirtualBox 虚拟机中安装 Ubuntu 12.04(图文教程)
- JavaScript模拟重力状态下抛物运动的方法
- PHP函数常用用法小结
- Excel数据导入Mysql数据库的实现代码
- MySQL中日期比较时遇到的编码问题解决办法
- js中数组结合字符串实现查找(屏蔽广告判断url等)
- Node.js查找当前目录下文件夹实例代码
- Android 2.3 拨号上网流程从源码角度进行分析
- mssql server 存储过程里,bulk insert table from '路径+文件',路径固定,文件名不固定的实现方法
- IIS7报500.23错误的原因分析及解决方法
- C#通过html调用WinForm的方法
- 国产服务器走向成熟,大规模定制成趋势
- 利用angular自动编译andriod APK的绕坑经历分享