DOM事件

最新推荐文章于 2022-08-24 20:27:32 发布

weiweismile123

最新推荐文章于 2022-08-24 20:27:32 发布

阅读量177

点赞数

本文链接：https://blog.csdn.net/weiweismile123/article/details/53401924

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM事件</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.loginbox{
width: 350px;
height: 200px;
background-color: #ccc;
opacity: 0.6;
/*filter:alpha(opacity=50); /* IE */
/*-moz-opacity:0.5; /* 老版Mozilla */
/*-khtml-opacity:0.5; /* 老版Safari */
/*opacity: 0.5; 支持opacity的浏览器*/
margin: auto;
position: relative;
display: none;
}
/*制作关闭窗口的差图形*/
.close{
width: 30px;
height: 30px;
position: absolute;
top: 3px;
right: 10px;
/*background-color: red;*/
cursor: pointer;
}
/*方法是先用before和after制作两条重合的线，然后再用才CSS3中的旋转使得两天线分别旋转45度tranform属性中的rotate值*/
.close:before,.close:after{
content:" ";
width: 100%;
height: 1px;
background-color: #696969;
position: absolute;
top: 50%;
left: 0;
transition: all .5s;
}
.close:before{
transform: rotate(45deg);/*正值表示顺时针，负数表示逆时针*/
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
}
.close:after{
transform: rotate(-45deg);/*正值表示顺时针，负数表示逆时针*/
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Safari and Chrome */
}
/*要先写hover之后再写before和after*/
.close:hover:before,.close:hover:after{
background-color: #f00;
}
/*translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。*/
@keyframes loginboxIn
{
from {
/*loginbox进入的时候动画，开始设置为高度为0*/
transform:scale(0) translateY(-30px);
-ms-transform:scale(0) translateY(-30px); /* IE 9 */
-webkit-transform:scale(0) translateY(-30px); /* Safari and Chrome */
}
to {
transform:scale(1) translateY(0);
-ms-transform:scale(1) translateY(0); /* IE 9 */
-webkit-transform:scale(1) translateY(0); /* Safari and Chrome */
}
}
@keyframes loginboxOut
{
from {
/*loginbox退出的时候动画*/
opacity:0.6;
transform:translateY(0);
-ms-transform:translateY(0); /* IE 9 */
-webkit-transform:translateY(0); /* Safari and Chrome */
}
to {
opacity:0;
transform: translateY(-10px);
-ms-transform: translateY(-10px); /* IE 9 */
-webkit-transform: translateY(-10px); /* Safari and Chrome */
}
}
</style>
<script type="text/javascript" src="DOM事件.js"></script>
<script type="text/javascript">
window.οnlοad=function(){
var login=document.getElementById("login");
var loginbox=document.getElementById("loginbox");
var closebtn=document.getElementById("close");
function show(){
loginbox.style.display="block";
loginbox.style.animation="loginboxIn 2s";
}
function close(){
// var loginbox=document.getElementById("loginbox");
loginbox.style.animation="loginboxOut 2s";
setTimeout(function(){
loginbox.style.display="none";
},600);
}
eventUtil.addHander(login,"click",show);
eventUtil.addHander(closebtn,"click",close);
}
</script>
</head>
<body>
<p>亲，您好！</p>
<input type="button" name="login" id="login" value="登录" />
<div class="loginbox" id="loginbox">
<p style="padding: 10px 5px;">用户登录<span class="close" id="close"></span></p>
<hr>
</div>
</body>

</html>

DOM事件.js代码

//兼容浏览器事件,创建一个叫addHander的对象
var eventUtil={
//获取事件
getEvent:function(event){
return event?event:window.event;
},
//添加事件监听,ele是需要添加事件监听的元素，type是事件的类型，hander是绑定的函数
addHander:function(ele,type,hander){
//如果支持DOM2
if (ele.addEventListener) {
ele.addEventListener(type,hander,false);
}
// 如果支持IE
else if (ele.attachEvent) {
ele.attachEvent("on"+type,hander);
}
// 都不支持的话，使用通用方法DOM0
else {
ele["on"+type]=hander;
}
}

}