<html>
<head>
<title></title>
<style type="text/css">
div{
width:200px;
height:25px;
border:1px solid;
}
</style>
<script type="text/javascript">
//是否有div被选中
var isSelect=false;
function fun(obj)
{
alert(obj.value);
var t=document.getElementById("t");
var t_val=t.value;
if(t_val.length>5)
{
t.value=t_val.substring(0,5);
}
}
function fun1(obj)
{
obj.style.background="";
obj.blur();
isSelect=false;
}
function fun2(obj)
{
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++)
{
if(divs[i].style.background.length==7)
{
if(i != obj.getAttribute("id"))
{
divs[i].style.background="";
obj.style.background="#6699FF";
obj.focus();
break;
}
}
}
if(!isSelect)
{
obj.style.background="#6699FF";
obj.focus();
isSelect=true;
}
}
function fun3()
{
var divs=document.getElementsByTagName("div");
var len=divs.length;
for(var i=0;i<len;i++)
{
var divcolor=divs[i].style.background;
if(divcolor.length==7)
{
if(event.keyCode==38)
{
divs[i].style.background="";
if(i==0)
{
i=len;
}
divs[i-1].style.background="#6699FF";
divs[i-1].focus();
break;
}
if(event.keyCode==40)
{
divs[i].style.background="";
if(i==len-1)
{
i=-1;
}
divs[i+1].style.background="#6699FF";
divs[i+1].focus();
break;
}
}
}
if(!isSelect)
{
if(event.keyCode==38)
{
divs[len-1].style.background="#6699FF";
divs[len-1].focus();
isSelect=true;
}
if(event.keyCode==40)
{
divs[0].style.background="#6699FF";
divs[0].focus();
isSelect=true;
}
}
}
function fun4()
{
var d=document.getElementById("d");
d.focus();
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++)
{
divs[i].onkeyup=function(){fun3();}
}
}
</script>
</head>
<body onload="fun4()">
<div id="d" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
<div id="d2" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
<div id="d3" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
<div id="d4" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
<div id="d5" onmouseover="fun2(this)" onmouseout="fun1(this)"></div><br>
<input id="t" type="text" onkeyup="fun3()">
<input type="button" value="" onclick="">
</body>
</html>
分享到：
相关推荐
现在，我们需要使用JavaScript（这里我们可以使用jQuery库，因为它简洁易懂）来监听"hover-div"的`mouseover`和`mouseout`事件，以便在鼠标进入和离开时显示和隐藏"info-div"。同时，我们还需要计算"info-div"的显示...
本案例中的"div css多方向鼠标悬停弹出代码"是一个JavaScript特效，它利用了`div`和`css`来实现鼠标悬停时，弹出层根据鼠标方向动态改变位置的功能。这种效果常用于导航菜单、提示信息或扩展内容的展示。 该压缩包...
在本项目中，我们主要探讨如何使用jQuery库来实现一个功能：当鼠标滑过图片时，显示一个半透明的提示信息，该信息会随着鼠标的上下滑动而移动。这个功能常见于各种网页设计中，用于提供用户交互的增强体验，如显示...
4. **事件监听**：为了让用户可以随时暂停或恢复滚动，我们可以添加对鼠标悬停(`mouseover`/`mouseout`)事件的监听。在`mouseover`时，清除定时器；在`mouseout`时，重新启动定时器。 5. **平滑滚动**：为了提供更...
这个项目“jquery实现鼠标在图片上悬停时可上下滑动展示描述信息.zip”显然是利用jQuery来创建一个互动的图片展示功能，当用户将鼠标悬停在图片上时，会有一个描述信息区域上下滑动出现，为用户提供更多信息。...
在JavaScript中，监听鼠标悬停事件通常涉及`mouseover`和`mouseout`两个事件。jQuery提供了`hover`方法，将这两个事件合并在一起，使得处理更方便。例如： ```javascript $("#element").hover(function() { // ...
3. 使用JavaScript监听鼠标事件，实现div层的拖动功能。 4. 调整z-index属性，处理div层的叠加效果。 通过这种方式，我们可以创建一个动态且交互性强的网页元素，提升用户在浏览和操作页面时的体验。在实际应用中，...
1. **事件监听**：使用`$(document).on('mouseover', 'selector', function() {})`监听鼠标悬停在下拉菜单上时的事件，然后获取鼠标位置。 2. **计算位置**：通过`event.pageY`获取鼠标相对于文档的垂直位置，再减去...
本篇文章将深入探讨如何使用JavaScript实现网页Banner图片的上下翻动效果。 首先，我们需要创建HTML结构来展示Banner图片。一个简单的 Banner 结构可能包含两个图片元素，一个显示当前图片，另一个作为备用，用于...
这需要用到JavaScript的事件监听，如`mouseover`和`mouseout`，并结合清除或设置定时器来控制滚动状态。 接下来，我们分步骤来实现这个功能： 1. **HTML结构**：首先，我们需要在HTML中设置一个容器元素来包含所有...
总之，通过理解jQuery的选择器、动画方法、事件处理和回调函数，你可以创建出各种各样的滚动效果，而“Jquery实现无缝隙上下左右滚动”就是这些技术的一种实际应用。在实践中，不断学习和尝试，你会发现jQuery能为你...
这可以通过监听`mouseover`、`mouseout`和`click`事件来实现。例如： ```javascript mainImage.addEventListener('mouseover', function() { clearInterval(autoSwitchInterval); }); mainImage.addEventListener...
在JavaScript或者jQuery中，我们可以监听`mouseover`和`mouseout`事件，当鼠标进入图片区域时触发`mouseover`，执行将图片变为黑白的函数；当鼠标离开图片时触发`mouseout`，恢复图片的原始色彩。实现这一效果的一种...
2. 事件绑定：jQuery的`on()`方法用于绑定事件，例如`$("element").on("mouseover", function() {...})`表示当鼠标悬停在指定元素上时执行函数。 3. CSS操作：jQuery可以轻松地改变元素的CSS样式，如`$("#element")...
这可以通过`mouseover`和`mouseout`事件实现： ```javascript var intervalId; $(slider).on('mouseover', function() { clearInterval(intervalId); }); $(slider).on('mouseout', function() { intervalId = ...
其次，要实现鼠标悬浮停止滚动，我们需要监听`mouseover`和`mouseout`事件。当鼠标进入列表区域时，可以通过JavaScript的`event.preventDefault()`阻止默认的滚动行为。反之，当鼠标离开时，恢复滚动。这可以通过...
实现时，可以监听mouseover和mouseout事件，根据事件触发改变预览图片的显示或隐藏。 4. 图片滑动门（Sliding Door） 滑动门特效是将图片分割成上下两部分，点击时分别向相反方向滑动，展示内部内容。这在创建按钮...
在本例中，mouseenter事件用于触发小图标上滑和淡出的动画，而mouseover事件可能会在期望的元素上触发意外的动画，因此选择使用mouseenter更合适。 5. 事件处理方法stop：在jQuery的animate方法链上，stop()方法...
可以监听`mouseover`和`mouseout`事件，使用`setInterval`或`requestAnimationFrame`来控制图片的切换，并根据当前显示的图片索引动态调整图片的上下位置。 ```javascript const items = document....
2. **事件处理**：jQuery简化了JavaScript中的事件处理，如`click()`函数用于响应点击事件，`mouseover()`和`mouseout()`则分别对应鼠标悬停和离开事件。画廊的上下滚动功能可能会用到`scroll`事件。 3. **动画方法...