动态鼠标操作实现网页项目顺序变化

需积分: 3 126 浏览量更新于2024-09-20 收藏 6KB TXT 举报

本篇文章主要介绍了如何在网页上实现动态的页面特效，通过JavaScript来改变列表项目的顺序，使用户能够通过鼠标操作实时调整。作者分享了一段HTML和JavaScript代码片段，用于演示这种交互功能。首先，HTML部分定义了一个基本的文档结构，包括`<!DOCTYPE HTML>`声明，表示使用的是HTML4.01 Transitional规范。页面有一个标题（`<title>`）和一个id为'forder'的`<select>`元素，这是列表项容器，用户可以从中选择和操作项目。 JavaScript部分的核心是`setTimeStart`、`upListItem`和`downListItem`三个函数。`setTimeStart`函数接受一个参数`type`，用于设置定时器方向，如果类型为"up"，则执行`upListItem`；反之执行`downListItem`，并设置定时器延迟300毫秒。 `upListItem`函数是列表项向上移动的逻辑。它首先获取当前选中的索引和值，然后将选中项的值和文本与前一项交换，并更新选中项为前一项。接着，如果还有下一项，设置新的定时器调用自身，使得列表不断向上移动，直到达到列表的顶部。 `downListItem`函数（未在提供的代码中给出，但从命名推测）应该对应于向上移动的相反操作，即向下移动列表项。这个函数的逻辑与`upListItem`类似，只是当`selIndex`不为0且不是列表末尾时，会将选中项与后一项交换并向下移动，同时设置定时器使列表向下滚动。整个代码的作用是为一个可选项列表创建一种鼠标点击效果，允许用户通过鼠标操作改变列表元素的顺序。虽然作者提到这个代码不完善，但通过理解这些核心函数，开发者可以在此基础上进行扩展和完善，以满足更多复杂的页面交互需求。此外，为了使用此代码，需要将其嵌入到HTML页面中，并确保选择的列表元素具有适当的id（如'dforder'），以便JavaScript能够正确地访问和操作它。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>排Ｑ291911320序</title>
<script>
var x=null;
var listObj=null;
//鼠标按下不放时的操作
function setTimeStart(type)
{
listObj=document.getElementById('forder');
//超过0.3秒启动连续的向上(下)的操作
if(type=="up")
{
x=setTimeout(upListItem,300);
}else
{
x=setTimeout(downListItem,300);
}
}
//将选中item向上
function upListItem()
{
var selIndex=listObj.selectedIndex;
if(selIndex<0)
{
if(x!=null){clearTimeout(x);}
return;
}
if(selIndex==0)

下载后可阅读完整内容，剩余3页未读，立即下载

wz198904164210

粉丝: 0
资源: 1

动态鼠标操作实现网页项目顺序变化

【网页特效代码-页面特效】24小时弹出一次,穿透WinXPSP2网页退弹弹窗.txt

网页源代码-特效代码

网页特效---进入页面的公告栏.pdf

网页特效--新手最爱

网页特效代码收集--网站制作

JavaScript网页特效实例－光盘代码

网页特效代码软件-网页秀

网页特效精灵-网页制作工具

好心情网页特效精灵-分享好东西

网页代码-网页特效的一些个应用

最新资源