好久没写博客了。
更新下,省着以后还得现写。
function displayPic(objId){
createElement(objId);
//document.getElementById(objId+"_pic").innerHTML = document.getElementById(objId+"_text").innerHTML;
}
function nonePic(objId){
destoryElement(objId);
}
var isScroll = function (el) {
// test targets
var elems = el ? [el] : [document.documentElement, document.body];
var scrollX = false, scrollY = false;
for (var i = 0; i < elems.length; i++) {
var o = elems[i];
// test horizontal
var sl = o.scrollLeft;
o.scrollLeft += (sl > 0) ? -1 : 1;
o.scrollLeft !== sl && (scrollX = scrollX || true);
o.scrollLeft = sl;
// test vertical
var st = o.scrollTop;
o.scrollTop += (st > 0) ? -1 : 1;
o.scrollTop !== st && (scrollY = scrollY || true);
o.scrollTop = st;
}
// ret
return {
scrollX: scrollX,
scrollY: scrollY
};
};
function createElement(objId,event){
if(!event){
event = window.event;
}else{
event.srcElement = event.target;
}
var createDiv = document.createElement("div");
createDiv.id = objId+"_pic";
createDiv.innerHTML = document.getElementById(objId+"_text").innerHTML;
var temp = 500;
var x = event.clientX-temp;
createDiv.style.left=x;
if (isScroll){
//有滚动条 div 的 y = 鼠标的y + 滚动条距离浏览器最上面的距离
createDiv.style.top= event.clientY+document.body.scrollTop;
}else{
//没有滚动条
createDiv.style.top= event.clientY;
}
createDiv.style.position = "absolute";
createDiv.style.display='';
document.body.appendChild(createDiv);
}
function destoryElement(objId){
var obj = document.getElementById(objId+"_pic");
if(obj != null){
obj.innerHTML = "";
document.body.removeChild(obj);
}
}
<a href="#" id="<%=userSerial%>_href" onmouseover="displayPic('<%=userSerial%>');" onmouseout="nonePic('<%=userSerial%>');" TARGET="_blank"> <%=dkTime%></a>
分享到:
相关推荐
在网页设计中,`onmouseover` 和 `onmouseout` 是两个非常重要的JavaScript事件,它们用于实现用户交互功能,特别是创建动态效果和提供额外信息。在这个特定的案例中,这两个事件被用来控制一个div元素,使其根据...
在这个例子中,我们创建了一个`<div>`元素,当鼠标悬停在该元素上时,会触发`onmouseover`事件,调用`showImage`函数,显示隐藏的图片(通过移除CSS类`hidden`来实现)。当鼠标离开`<div>`元素,`onmouseout`事件被...
- 创建多个Div元素,每个Div包含一张图片,通过CSS控制它们的初始显示状态为隐藏。 - 通过JS函数(如lunTab)来切换Div的显示和隐藏。该函数接收一个参数,表示要显示的图片编号,然后根据这个编号修改对应Div的...
在网页开发中,有时我们需要创建动态的交互效果来提升用户体验,比如当鼠标移过某个元素时,相关的提示信息会以渐变的方式显示出来。本文主要介绍了一种使用JavaScript(JS)和层叠样式表(CSS)相结合的方法,来...
4. **事件处理**:在JS中,可以使用`addEventListener`或`onmouseover`、`onmouseout`等内联事件处理函数来响应鼠标进入和离开图片的事件。例如,可以这样编写事件处理函数: ```javascript var imgElement = ...
在我们的例子中,JavaScript将在用户鼠标滑过图片时触发事件,展示放大图片的提示层。 实现这个效果,主要涉及以下几个步骤: 1. **HTML结构**:首先,我们需要创建HTML结构,包含小图和大图元素。小图用于鼠标滑...
当鼠标悬停在该图片上时,`onmouseover`事件触发`mouseOverPic()`函数,传递原图的URL,并设置大图显示区域为可见。`onmouseout`事件调用`mouseOutPic()`函数,隐藏大图。 - 一个`<div>`元素,其`id`为"bigPic",...
2. **DOM操作**:利用JavaScript/jQuery动态创建并更新DOM元素,实现提示信息的显示与隐藏。 3. **鼠标位置获取**:通过监听鼠标事件获取当前鼠标的屏幕坐标,确保提示信息能够跟随鼠标移动而移动。 4. **CSS样式...
例如,当用户鼠标悬浮在导航条的某个链接上时,JS可以通过事件监听(如`onmouseover`和`onmouseout`)来改变链接的样式,或者显示隐藏的内容。JS还可以用来实现下拉菜单、滚动特效、动画过渡等增强用户体验的功能。 ...
同时,通过监听 `onmouseover` 和 `onmouseout` 事件,实现了鼠标悬停时滚动暂停的功能。 #### 五、总结 通过本文的介绍,读者应该能够理解并掌握使用 JavaScript 和 `div` 元素实现图片滚动效果的基本方法。这种...
常见的鼠标事件有`onmouseover`(鼠标移入)、`onmouseout`(鼠标移出)、`onclick`(点击)等。这些事件可以与CSS结合,改变元素的样式,从而实现鼠标悬停或点击时的视觉变化。 二、CSS与JavaScript的配合 在创建鼠标...
如果要实现鼠标感应的效果,可能需要添加额外的事件监听器,如`onmouseover`(鼠标移入)、`onmouseout`(鼠标移出)和`onclick`(点击)。 描述部分由于省略了具体信息,我们无法直接获取到实现细节,但可以推测...
这些样式用于创建一个水平排列的图片列表,每个图片项都有边框和相对定位,以便在鼠标悬停时进行动态调整。 - `ul, li{margin:0;padding:0}`:清除默认的列表样式。 - `.w960`:设置一个宽度为960px的容器,并居中...
在本示例中,我们使用了一个`<div>`元素,并且为它添加了`onmouseover`和`onmouseout`事件。这两个事件分别触发显示和隐藏的JavaScript函数。 CSS部分用来设定DIV框的基本样式。如示例中的`#tip`类,设置了`...
总结起来,实现JavaScript鼠标移到Image上方时显示文字效果的关键在于监听`onmouseover`和`onmouseout`事件,以及使用CSS来控制元素的显示和位置。通过这种方式,我们可以为网页中的图片添加动态的文字提示,提高...
使用JavaScript或jQuery,我们可以监听鼠标移入和移出事件,动态地改变图片的`src`属性。以下是一个基于jQuery的例子: ```javascript $(document).ready(function() { $('#image').hover( function() { $(this)...
3. 鼠标事件处理:`onMouseOver`和`onMouseOut`事件,以及JavaScript中的`event`对象,获取鼠标坐标。 4. 绝对定位:通过CSS的`position:absolute`属性,配合`left`和`top`设置元素位置。 通过以上步骤,我们可以...
在网页设计中,鼠标效果是提升用户体验的重要一环。...例如,我们可以监听鼠标的`onmouseover`和`onmouseout`事件,动态改变元素的属性: ```jsp ; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> ...
总结起来,DW制作鼠标经过时图像放大、离开时回原形的效果主要依赖于“行为”功能,通过调整图片的宽度和高度属性,并设定合适的触发事件(onmouseover和onmouseout),即可轻松实现。这种效果的添加不仅提高了网页...
标题中的“鼠标移动到图片名上,显示图片的简单实例”描述了一个JavaScript实现的交互功能,当用户将鼠标悬停在图片名称上时,实际的图片会显示出来,而当鼠标离开时,图片则不再显示。这个功能常用于提供预览效果...