`
JavaSam
  • 浏览: 951958 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

鼠标简单跟随提示二

 
阅读更多
function id(s){
	return document.getElementById(s);
}
/**
 * 鼠标跟随提示
 */
function mouseFollow() {
	var e = e ? e : window.event;
	var posx = e.clientX;
	var posy = e.clientY;
	var followDiv = id("followDiv") ? id("followDiv"): document.createElement("div");
	followDiv.setAttribute("id","followDiv");
	var css = "width:100px;height:20px;border:1px solid grey;position:absolute;z-index:10000;left:"+posx+";top:"+posy+";";
	setCss(followDiv,css);
	document.body.appendChild(followDiv);
}
/**
 * element:需要获取样式的目标元素;name:样式属性
 */ 
function getStyle(element, name) {
	var computedStyle;
	try {
		computedStyle = document.defaultView.getComputedStyle(element, null);
	} catch (e) {
		computedStyle = element.currentStyle;
	}
	if (name != "float") {
		return computedStyle[name];
	} else {
		return computedStyle["cssFloat"] || computedStyle["styleFloat"];
	}
}
/**
 * element:需要设置样式的目标元素;name:样式属性;value:设置值
 */ 
function setStyle(element, name, value) {
	if (name != "float") {
		element.style[name] = value;
	} else {
		element.style["cssFloat"] = value;
		element.style["styleFloat"] = value;
	}
}
/**
 * 
 */
function setCss(obj,css){
	obj.setAttribute("style",css);
	obj.style.cssText = css;
}

 

0
0
分享到:
评论

相关推荐

    鼠标跟随提示框

    2. **JavaScript**:实现鼠标跟随提示框的功能通常需要用到JavaScript,这里的脚本使用了一个名为`tip`的对象,包含两个主要方法: - `$(ele)` 是一个简单的DOM选择器,根据传入的参数(字符串或对象)返回对应的...

    jQuery Tooltip跟随鼠标提示条

    jQuery Tooltip跟随鼠标提示条是一种常见的前端交互设计,用于在用户将鼠标悬停在特定元素上时,提供附加信息或指导。这种功能广泛应用于网站、应用和各种用户界面中,为用户提供方便的上下文帮助。 首先,jQuery是...

    Delphi 光标跟随 (鼠标提示效果)代码

    Delphi 光标跟随 (鼠标提示效果)代码 Delphi简单模拟所谓‘光标跟随’效果。程序包括以下实现细节:激活提示窗体,重新引入API函数以便Active_Hint()调用、Hint窗体要显示的提示文字、隐藏自己并转发消息给下面...

    一个CSS+Js实现的鼠标跟随的图片提示效果

    "一个CSS+Js实现的鼠标跟随的图片提示效果"就是一种增强用户体验的常见技术,它能够让用户在鼠标移动到图片上时,显示相关信息,且提示信息会随着鼠标的移动而动态调整位置,确保始终可见。这种效果在各种类型的网站...

    5种炫酷js鼠标跟随动画特效插件

    2. **index2.html**:这个可能包含了更复杂的跟随动画,比如元素可能在鼠标周围以某种特定的轨迹旋转或者缩放,增强了动态效果。 3. **index3.html**:可能展示的是元素以鼠标为中心点进行扩散或聚拢的动画,这种...

    css+js作出鼠标跟随提示

    ### CSS+JS 实现鼠标跟随提示的技术解析 在前端开发领域,通过CSS和JavaScript实现鼠标跟随提示是一项常用且实用的功能。这项技术不仅能够提升用户体验,还可以增加网站的互动性。接下来,我们将深入探讨如何利用...

    vue鼠标悬浮显示提示框.doc

    通过上面的介绍,我们可以看到,在Vue中使用`vue-tooltip`插件来实现鼠标悬浮显示提示框的功能非常简单。只需要安装插件、注册插件和使用`v-tooltip`指令即可。此外,还可以通过自定义选项来调整提示框的样式,满足...

    html鼠标跟随

    HTML鼠标跟随是一个常见的网页交互效果,它使得网页上的某个元素(通常是文本或图像)能够跟随用户的鼠标指针移动。这种效果常用于制作动态导航菜单、交互式提示信息或者游戏等。下面将详细介绍如何实现HTML鼠标跟随...

    文字跟随鼠标小实例

    在本教程中,我们将深入探讨如何使用ActionScript 3(AS3)和Flash Develop来创建一个简单的“文字跟随鼠标”小实例。这个实例是Flash编程中的一个基础动态效果,能够帮助初学者理解AS3的基本语法和事件处理。 首先...

    js移动层和跟随鼠标的div

    这种效果可以用于制作提示框、广告条或任何需要随用户鼠标移动而移动的元素,提升用户体验。在这个场景中,我们讨论的是如何实现这样一个功能,并可能涉及到JavaScript基础、DOM操作以及事件监听。 首先,我们需要...

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

    标题中的“基于JQuery的一个简单的鼠标跟随提示效果”是指利用JQuery库来创建一个功能,当用户将鼠标悬停在特定元素(例如本例中的`<a>`标签)上时,会在鼠标指针下方显示一个提示信息框,该信息框会随着鼠标在页面...

    html5气泡提示框鼠标悬停气泡文字框提示代码

    首先,我们需要在HTML文档中创建一个触发提示框的元素,比如一个`<a>`链接或者`<button>`按钮,并为其设置一个`title`属性,这个属性在鼠标悬停时会默认显示一个简单的提示文本。然而,如果需要更自定义的气泡样式,...

    Javascript 学习实例- 鼠标动态跟随

    这个实例通常用于创建交互式的网页元素,比如浮动提示框或者动态导航菜单,使得页面上的某个元素能实时响应并跟随用户鼠标的移动。 首先,我们需要了解JavaScript中的事件监听。在本例中,我们关注的是`mousemove`...

    可将任何HTML元素吸附到鼠标上制作鼠标跟随动画的js插件

    回调函数中,我们获取了要跟随鼠标的元素,并设置了它的`left`和`top`样式属性,使其与鼠标位置相对应。 然而,实际的插件可能会更复杂,它可能包含对元素速度、延迟、缓动效果以及与其他元素或页面边缘的碰撞检测...

    鼠标提示框(简单的js特效)

    在`mouseover`事件处理函数中,我们通过`event.clientY`和`event.clientX`获取鼠标位置,然后计算提示框的坐标,使其跟随鼠标显示。`- tooltip.offsetHeight - 10`是为了使提示框在鼠标下方适当距离显示,`+ 10`则是...

    鼠标移动提示人广告代码

    可以使用JavaScript动态地更改这些样式,确保提示信息始终跟随鼠标移动。 5. **延迟显示与隐藏**:为了避免频繁地创建和销毁提示元素,我们可以设定一个延迟,比如当鼠标静止一段时间后才显示提示,再次移动时则...

    鼠标放到图片上显示图文提示效果

    最后,为了实现下拉层效果,我们可以使用JavaScript(这里以jQuery为例)来处理图片的鼠标事件,动态调整提示框的位置,使其跟随鼠标移动: ```javascript $(document).ready(function() { $('img[data-tooltip]')...

    jquery 鼠标提示例子

    2. **jQuery 插件**:鼠标提示功能通常可以通过使用jQuery插件来实现,例如在提供的文件列表中,`jquery.tooltip.zip`可能就是一个包含自定义提示功能的插件。使用插件可以减少重复工作,提升代码复用性。 3. **...

    鼠标跟随效果代码

    总的来说,这个代码示例展示了如何利用JavaScript和CSS实现一个简单的鼠标跟随效果,适用于网页中的动态提示或吸引用户注意力的场景。为了完善这个功能,你可能还需要考虑一些额外的优化,比如限制元素在屏幕内的...

Global site tag (gtag.js) - Google Analytics