鼠标事件和表单事件+好友列表选中效果+侧面菜单下拉效果

通用：
onclick 鼠标单击
ondblclick 鼠标双击
onmouseover 鼠标放上
onmouseout 鼠标离开
onmousemove 鼠标移动

表单：
onchang 表单的值改变
onblur 失去焦点
onfocus 获得焦点
onselect 选中

2.好友列表选中效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:16px;}

.f{ width:200px; height:30px; background-color:#63C; color:white; text-align:center; line-height:30px; vertical-align:middle; margin-top:3px}
.f:hover{ cursor:pointer;}

</style>

</head>

<body>

<div style="width:200px; height:600px; margin-top:30px">

<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">张三</div>
<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">李四</div>
<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">王五</div>
<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">赵六</div>
<div class="f" onclick="Xuan(this)" onmouseover="Bian(this)" onmouseout="Hui(this)" xz="0">马七</div>

</div>

</body>
<script type="text/javascript">

function Xuan(a)
{
var attr = document.getElementsByClassName("f");

for(var i=0;i<attr.length;i++)
{
attr[i].style.backgroundColor = "#63C";
attr[i].setAttribute("xz","0");
}
a.setAttribute("xz","1");
a.style.backgroundColor = "#F63";
}

function Bian(a)
{
var attr = document.getElementsByClassName("f");

for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "#63C";
}
}

a.style.backgroundColor = "#F63";
}

function Hui(a)
{
var attr = document.getElementsByClassName("f");

for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "#63C";
}
}
}

</script>
</html>

2.左侧下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:14px;}
.zhu{ width:200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; background-color:#03C; color:white;}
.zi{ width:200px; display:none}
.list{ width:198px; height:30px; text-align:center; line-height:30px; vertical-align:middle; border-left:1px solid #999;border-right:1px solid #999;}
#z4{ border-bottom:1px solid #999;}
</style>

</head>
<body>
<div style="width:200px; height:600px; margin-top:30px">
<div class="zhu" onclick="Show(‘z1‘)">
首页
</div>
<div class="zi" id="z1">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
<div class="zhu" onclick="Show(‘z2‘)">
教务信息
</div>
<div class="zi" id="z2">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
<div class="zhu" onclick="Show(‘z3‘)">
下载专区
</div>
<div class="zi" id="z3">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
<div class="zhu" onclick="Show(‘z4‘)">
学员信息管理
</div>
<div class="zi" id="z4">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
</div>
</body>
<script type="text/javascript">

function Show(id)
{

var z = document.getElementById(id);

if(z.style.display=="block")
{
z.style.display = "none";
}
else
{
z.style.display = "block";
}
}

</script>
</html>

时间： 2024-10-14 18:01:05

鼠标事件和表单事件+好友列表选中效果+侧面菜单下拉效果的相关文章

Js效果：图片轮播；选项卡；侧面菜单下拉效果;进度条效果；滑动效果；好友列表选中效果；点击选中显示效果

选项卡效果表: <body><div id="aaa"> <div class="bbb" style="width:50px; height:30px; background-color:#3F0" onclick="Show('d1')">娱乐</div> <div class="bbb" style="width:50px; height

React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑定 * 事件对象: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息 * 表单事件: 获取表单的值 * 1.监听表单的改变事件 ---onChange * 2.在改变的事件里面获取表单输入的值 ---event * 3.把表单输入的值赋值给username

jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）

1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div> $("ele").click(function(){ alert('触发指定事件') }) $("#test").click(function(){ $("ele").click() //手动指定触发事件 });   方法二:$ele.click( h

jQuery-3.事件篇---表单事件

jQuery表单事件之blur与focus事件 在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的本质区别: 是否支持冒泡处理 举个简单的例子 <div> <input type="text" /> </div> 其中input元素可以触发focus()事件 div是input的父元素,当它包含的元素input触发了focus事件时,它就产生了foc

表单事件（jQuery）

1jQuery表单事件之blur与focus事件 在input元素上绑定keydown事件会发现一个问题: 每次获取的内容都是之前输入的,当前输入的获取不到 keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本 当浏览器捕获键盘输入时,还提供了一个keypress的响应,这个跟keydown是非常相似,这里使用请参考keydown这一节,具体说说不

javascript中的常用表单事件用法

下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="testform" action="#" id="form"> What is your name?<br /> <input type="text" name="fname" /> <in

常用的表单事件及用法

记录一下常用的表单事件,因为工作中常用到所以特别记录一下.有jq写法和原生js写法 1.这是select的option的事件,jq写法 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="../jquery-1.10.2.min.

JavaScript基础 submit按钮结合onclick事件 实现表单的提交与验证

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

2018-06-25 js表单事件、三个高度和Ajax异步通讯技术

表单事件: onfocus -> 表单控件得到焦点时触发: obj_ipt.onfocus=function(){}; onblur -> 表单控件失去焦点时: onchange -> 表单控件内容被改变时: onselect -> 控件被选择时: onsubmit -> 当表单提交时: onreset -> 当表单重置时: 表单对象方法: select() -> 对象被选中: ipt_obj.select(); blur() -> 失去焦点 focus()