`
ren2881971
  • 浏览: 109775 次
社区版块
存档分类
最新评论

鼠标onmouseover,onmouseout事件动态创建DIV 显示图片

    博客分类:
  • js
阅读更多
好久没写博客了。
更新下,省着以后还得现写。
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">&nbsp;<%=dkTime%></a>
分享到:
评论

相关推荐

    图片onmouseover 和onmouseout 事件,根据图片不同大小显示不同大小的div,鼠标移上去显示该图片详细信息

    在网页设计中,`onmouseover` 和 `onmouseout` 是两个非常重要的JavaScript事件,它们用于实现用户交互功能,特别是创建动态效果和提供额外信息。在这个特定的案例中,这两个事件被用来控制一个div元素,使其根据...

    鼠标经过显示图片离开隐藏JS代码

    在这个例子中,我们创建了一个`&lt;div&gt;`元素,当鼠标悬停在该元素上时,会触发`onmouseover`事件,调用`showImage`函数,显示隐藏的图片(通过移除CSS类`hidden`来实现)。当鼠标离开`&lt;div&gt;`元素,`onmouseout`事件被...

    js+div实现文字滚动和图片切换效果代码.docx

    - 创建多个Div元素,每个Div包含一张图片,通过CSS控制它们的初始显示状态为隐藏。 - 通过JS函数(如lunTab)来切换Div的显示和隐藏。该函数接收一个参数,表示要显示的图片编号,然后根据这个编号修改对应Div的...

    JS+CSS实现感应鼠标渐变显示DIV层的方法.docx

    在网页开发中,有时我们需要创建动态的交互效果来提升用户体验,比如当鼠标移过某个元素时,相关的提示信息会以渐变的方式显示出来。本文主要介绍了一种使用JavaScript(JS)和层叠样式表(CSS)相结合的方法,来...

    鼠标经过图片,横向切换图片特效

    4. **事件处理**:在JS中,可以使用`addEventListener`或`onmouseover`、`onmouseout`等内联事件处理函数来响应鼠标进入和离开图片的事件。例如,可以这样编写事件处理函数: ```javascript var imgElement = ...

    鼠标滑过图片出现大图片提示层效果js代码

    在我们的例子中,JavaScript将在用户鼠标滑过图片时触发事件,展示放大图片的提示层。 实现这个效果,主要涉及以下几个步骤: 1. **HTML结构**:首先,我们需要创建HTML结构,包含小图和大图元素。小图用于鼠标滑...

    javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)

    当鼠标悬停在该图片上时,`onmouseover`事件触发`mouseOverPic()`函数,传递原图的URL,并设置大图显示区域为可见。`onmouseout`事件调用`mouseOutPic()`函数,隐藏大图。 - 一个`&lt;div&gt;`元素,其`id`为"bigPic",...

    鼠标经过显示隐藏信息

    2. **DOM操作**:利用JavaScript/jQuery动态创建并更新DOM元素,实现提示信息的显示与隐藏。 3. **鼠标位置获取**:通过监听鼠标事件获取当前鼠标的屏幕坐标,确保提示信息能够跟随鼠标移动而移动。 4. **CSS样式...

    CSS+DIV+JS导航显示

    例如,当用户鼠标悬浮在导航条的某个链接上时,JS可以通过事件监听(如`onmouseover`和`onmouseout`)来改变链接的样式,或者显示隐藏的内容。JS还可以用来实现下拉菜单、滚动特效、动画过渡等增强用户体验的功能。 ...

    js+div实现图片滚动效果代码.docx

    同时,通过监听 `onmouseover` 和 `onmouseout` 事件,实现了鼠标悬停时滚动暂停的功能。 #### 五、总结 通过本文的介绍,读者应该能够理解并掌握使用 JavaScript 和 `div` 元素实现图片滚动效果的基本方法。这种...

    JavaScript实现的鼠标特效

    常见的鼠标事件有`onmouseover`(鼠标移入)、`onmouseout`(鼠标移出)、`onclick`(点击)等。这些事件可以与CSS结合,改变元素的样式,从而实现鼠标悬停或点击时的视觉变化。 二、CSS与JavaScript的配合 在创建鼠标...

    鼠标感应图片浏览器..

    如果要实现鼠标感应的效果,可能需要添加额外的事件监听器,如`onmouseover`(鼠标移入)、`onmouseout`(鼠标移出)和`onclick`(点击)。 描述部分由于省略了具体信息,我们无法直接获取到实现细节,但可以推测...

    JS网页图片放大镜特效.pdf

    这些样式用于创建一个水平排列的图片列表,每个图片项都有边框和相对定位,以便在鼠标悬停时进行动态调整。 - `ul, li{margin:0;padding:0}`:清除默认的列表样式。 - `.w960`:设置一个宽度为960px的容器,并居中...

    JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    在本示例中,我们使用了一个`&lt;div&gt;`元素,并且为它添加了`onmouseover`和`onmouseout`事件。这两个事件分别触发显示和隐藏的JavaScript函数。 CSS部分用来设定DIV框的基本样式。如示例中的`#tip`类,设置了`...

    javascript实现鼠标移到Image上方时显示文字效果的方法

    总结起来,实现JavaScript鼠标移到Image上方时显示文字效果的关键在于监听`onmouseover`和`onmouseout`事件,以及使用CSS来控制元素的显示和位置。通过这种方式,我们可以为网页中的图片添加动态的文字提示,提高...

    鼠标移上显示大图

    使用JavaScript或jQuery,我们可以监听鼠标移入和移出事件,动态地改变图片的`src`属性。以下是一个基于jQuery的例子: ```javascript $(document).ready(function() { $('#image').hover( function() { $(this)...

    jquery鼠标放上去显示悬浮层即弹出定位的div层

    3. 鼠标事件处理:`onMouseOver`和`onMouseOut`事件,以及JavaScript中的`event`对象,获取鼠标坐标。 4. 绝对定位:通过CSS的`position:absolute`属性,配合`left`和`top`设置元素位置。 通过以上步骤,我们可以...

    jsp鼠标效果 鼠标效果. 鼠标效果.

    在网页设计中,鼠标效果是提升用户体验的重要一环。...例如,我们可以监听鼠标的`onmouseover`和`onmouseout`事件,动态改变元素的属性: ```jsp ; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html&gt; ...

    dw制作鼠标经过时图像放大鼠标离开图像回原形效果

    总结起来,DW制作鼠标经过时图像放大、离开时回原形的效果主要依赖于“行为”功能,通过调整图片的宽度和高度属性,并设定合适的触发事件(onmouseover和onmouseout),即可轻松实现。这种效果的添加不仅提高了网页...

    鼠标移动到图片名上,显示图片的简单实例

    标题中的“鼠标移动到图片名上,显示图片的简单实例”描述了一个JavaScript实现的交互功能,当用户将鼠标悬停在图片名称上时,实际的图片会显示出来,而当鼠标离开时,图片则不再显示。这个功能常用于提供预览效果...

Global site tag (gtag.js) - Google Analytics