<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>精美js鼠标跟随代码</title>
</head>
<body>
<script>
A = document.getElementById
B = document.all;
C = document.layers;
T1 = new Array("/jscss/demoimg/200905/trail1.gif", 38, 35, "/jscss/demoimg/200905/trail2.gif", 30, 31, "/jscss/demoimg/200905/trail3.gif", 28, 26, "/jscss/demoimg/200905/trail4.gif", 22, 21, "/jscss/demoimg/200905/trail5.gif", 16, 16, "/jscss/demoimg/200905/trail6.gif", 10, 10)
var offsetx = 15
var offsety = 10
nos = parseInt(T1.length / 3)
rate = 50
ie5fix1 = 0;
ie5fix2 = 0;
rightedge = B ? document.body.clientWidth - T1[1] : window.innerWidth - T1[1] - 20
bottomedge = B ? document.body.scrollTop + document.body.clientHeight - T1[2] : window.pageYOffset + window.innerHeight - T1[2]
for ( i = 0; i < nos; i++) {
createContainer("CUR" + i, i * 10, i * 10, i * 3 + 1, i * 3 + 2, "", "<img src='" + T1[i * 3] + "' width=" + T1[(i * 3 + 1)] + " height=" + T1[(i * 3 + 2)] + " border=0>")
}
function createContainer(N, Xp, Yp, W, H, At, HT, Op, St) {
with (document) {
write((!A && !B) ? "<layer id='" + N + "' left=" + Xp + " top=" + Yp + " width=" + W + " height=" + H : "<div id='" + N + "'" + " style='position:absolute;left:" + Xp + "; top:" + Yp + "; width:" + W + "; height:" + H + "; ");
if (St) {
if (C)
write(" style='");
write(St + ";' ")
} else
write((A || B) ? "'" : "");
write((At) ? At + ">" : ">");
write((HT) ? HT : "");
if (!Op)
closeContainer(N)
}
}
function closeContainer() {
document.write((A || B) ? "</div>" : "</layer>")
}
function getXpos(N) {
if (A)
return parseInt(document.getElementById(N).style.left)
else if (B)
return parseInt(B[N].style.left)
else
return C[N].left
}
function getYpos(N) {
if (A)
return parseInt(document.getElementById(N).style.top)
else if (B)
return parseInt(B[N].style.top)
else
return C[N].top
}
function moveContainer(N, DX, DY) {
c = (A) ? document.getElementById(N).style : (B) ? B[N].style : (C) ? C[N] : "";
if (!B) {
rightedge = window.innerWidth - T1[1] - 20
bottomedge = window.pageYOffset + window.innerHeight - T1[2]
}
c.left = Math.min(rightedge, DX + offsetx);
c.top = Math.min(bottomedge, DY + offsety);
}
function cycle() {
//if (IE5)
if (document.all && window.print) {
ie5fix1 = document.body.scrollLeft;
ie5fix2 = document.body.scrollTop;
}
for ( i = 0; i < (nos - 1); i++) {
moveContainer("CUR" + i, getXpos("CUR" + (i + 1)), getYpos("CUR" + (i + 1)))
}
}
function newPos(e) {
moveContainer("CUR" + (nos - 1), (B) ? event.clientX + ie5fix1 : e.pageX + 2, (B) ? event.clientY + ie5fix2 : e.pageY + 2)
}
function getedgesIE() {
rightedge = document.body.clientWidth - T1[1]
bottomedge = document.body.scrollHeight - T1[2]
}
if (B) {
window.onload = getedgesIE
window.onresize = getedgesIE
}
if (document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = newPos
setInterval("cycle()", rate)
</script>
</body>
</html>
分享到：
相关推荐
"jquery图片跟随鼠标晃动效果"是一个基于jQuery库实现的特效，旨在为用户提供一种新颖的交互方式，使图片在鼠标移动时产生动感十足的视觉体验。这个特效由韩雪冬工作室开发，因其精美的设计和出色的动态性能，受到了...
322个精美鼠标指针”集合，显然是一个丰富的资源库，专为个性化和优化用户体验而设计。这些鼠标指针可能包括不同样式、颜色、形状和动画效果，使得桌面环境更加生动有趣。 首先，我们来了解一下鼠标指针的基本概念...
`<head>`中包含了一个`<title>`标签，定义了网页的标题为“精美js鼠标跟随代码”。在`<body>`部分，虽然内容被移除，但我们可以推断出这里将放置JavaScript代码来实现图片跟随鼠标的特效。 JavaScript代码部分首先...
在计算机使用中，个性化元素是许多用户追求的一种体验，其中之一就是改变默认的鼠标指针。本文将详细讨论“个性化鼠标...在享受这些精美鼠标指针带来的乐趣时，也要注意定期备份原有的系统设置，以便在需要时轻松恢复。
鼠标指针，顾名思义，就是我们在屏幕上看到的那个跟随鼠标移动的小箭头或其他形状的图形。它指示了鼠标在屏幕上的位置，并在执行不同操作时会有相应的变化，例如等待、链接、文本选择等状态。在Windows系统中，用户...
"Night Diamond五套指针.rar" 是一个专为鼠标指针爱好者提供的资源包，它包含五款设计精美的夜光钻石主题指针，让你的电脑操作界面更具个性化色彩。只需简单几步操作，即可让平凡的鼠标指针焕发出独特的魅力。 首先...
桌面宠物是安装在操作系统上的一个小程序，它可以在桌面上显示一个动态的形象，如动画角色或虚拟生物，这些宠物可以进行简单的互动，例如跟随鼠标移动、做出各种动作，甚至还有可能响应用户的指令。《轻音少女》的...
这种功能通常是通过监听鼠标的`mousedown`、`mousemove`和`mouseup`事件来实现的，当用户按下鼠标并移动时，客服窗口会跟随鼠标移动，松开鼠标后停止移动。 3. **集成QQ在线客服：** - 要在自己的网站上使用QQ在线...
2. **拖拽移动**：用户只需轻轻一按并拖动，图片就能跟随手指移动，这种直观的操作方式使得相册在触摸屏上的使用更为便捷。 3. **边界限制**：为了防止图片过度拖动导致界面混乱，源代码内置了边界检测，当图片接近...
拖动通常通过监听鼠标按下、移动和释放事件来完成，当鼠标按下并在窗体内移动时，窗体会跟随鼠标移动。大小缩放则可能通过在窗体边缘检测鼠标形状变化，当鼠标处于可调整大小的状态时，改变窗体尺寸。 "双击切换...
"jQuery实现的精美个性筋斗云动态菜单"是一个利用jQuery库创建的交互式菜单，它通过精美的动画效果和独特的设计风格，为用户提供了个性化的导航体验。jQuery是一个轻量级、高性能的JavaScript库，它的API简单易用，...
第1章 开发环境 1 1.1 环境设置 2 0001 如何定制工具栏 2 0002 如何定制组件面板 2 0003 如何定制代码编辑器 3 0004 保存自定义开发环境桌面 4 1.2 组件安装 4 0005 安装ActiveX组件 4 0006 安装...
本文详细介绍了如何使用jQuery来实现一个悬浮提示框的实例，内容涵盖了jQuery鼠标事件的响应以及页面元素样式的动态操作技巧。 首先，让我们来深入理解标题“jquery悬浮提示框完整实例”。这个标题告诉我们，文章将...
13. **图片感应鼠标左右移动代码**：这是一种互动效果，当鼠标在图片上左右移动时，图片会跟随鼠标方向移动，增加互动性。 14. **绿色网页特效模板**：模板提供了预先设计的特效布局，开发者可以通过调整JS和CSS...
一款jQuery实现漂亮精美相册插件源码 71.一款jQuery左右箭头控制大图滚动切换的代码 72.一款jquery常用产品图片放大效果插件下载 73.一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出...
`基于jQuery精美浮动层效果（JS+CSS）.rar`可能包含一个浮动提示框或对话框的实现，这种效果常见于提示信息、广告或者表单验证中，它可以跟随用户的鼠标移动或固定在屏幕某一位置。 `站酷（ZCOOL）首页焦点大图代码...
通过响应这些消息，宠物可以对用户的输入做出反应，比如跟随鼠标移动、执行特定动作或播放声音。 在设计精美的动感图画方面，开发者可能利用GDI+（Graphics Device Interface Plus）库，这是一个增强版的图形库，...
- 可以监听鼠标或触摸事件，使波纹跟随用户交互产生。 - 鼠标点击或触摸位置作为波纹的起点，根据时间衰减波纹大小和透明度。 7. **性能优化** - 使用局部更新，只重绘发生变化的部分，而非整个Canvas。 - 利用...
7. 如需整体移动一组图形，选择它们并确保鼠标呈四向箭头状，然后拖动即可。 **第二种流程图制作** 三维流程图看起来更精美，制作相对复杂，步骤如下： 1. 设置页面和段落。调整页面边距和段前间距，以提供充足的...