fed
fed copied to clipboard
Published
20 hours ago •
BestACE
BestACE
【签到帖】移应161 复习课签到帖
请大家在本贴签到。 格式如下： 00 王海庆 今天实现如下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复习</title>
<!--
开发的时候，建议大家用本地文件，最好用没有压缩过的文件
上线的时候，建议使用压缩过的文件，或使用cdn的方式
-->
<!--<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.container{
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.container .closeBtn{
position: absolute;
right: 5px;
top: 5px;
}
.modal i{
font-size: 24px;
color: green;
}
</style>
</head>
<body>
<!--
交互开发，做交互，事件
-->
<div class="container">
<div class="content">示例内容</div>
<a class="closeBtn" href="javascript:">
<i class="fa fa-close"></i>
</a>
</div>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-list"></i></a>
<a href="javascript:" data-title="内容" class="modal">链接2</a>
<script>
var oModal=document.querySelectorAll(".modal");
var oContainer=document.querySelector(".container");
var oClose=document.querySelector(".container .closeBtn");
for (var i = 0; i < oModal.length; i++) {
oModal[i].addEventListener("click",function(event){
//console.log(event.target.innerHTML,event.target.dataset.title,event.target.getAttribute("data-title"));
oContainer.classList.add('animated');
oContainer.classList.add('bounceIn');
oContainer.style.display="block";
})
}
oClose.addEventListener("click",function(){
oContainer.classList.remove('bounceIn');
oContainer.classList.add('fadeOut');
setTimeout(function(){
if(oContainer.style.opacity==0){
oContainer.style.display="none";
}
},1000);
})
</script>
</body>
</html>
10 徐晗 今天代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.container{
transform: translate(50px);
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.modal i{
font-size: 24px;
color: green;
}
.close{
position: absolute;
right: 5px;
top: 0;
}
.close i:hover{
color: red;
}
</style>
</head>
<body>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
<a href="javascript:" data-title="内容" class="modal">链接2</a>
<script type="text/javascript">
var oModal=document.querySelectorAll(".modal");
var oDiv=document.createElement("div");
oDiv.setAttribute("class","container");
document.body.appendChild(oDiv);
var oDiv2=document.createElement("div");
oDiv2.setAttribute("class","content");
oDiv.appendChild(oDiv2);
var oClose=document.createElement("div");
oClose.setAttribute("class","close");
oI=document.createElement("i");
oI.setAttribute("class","fa fa-close");
oClose.appendChild(oI);
oDiv.appendChild(oClose);
var newContent = document.createTextNode('示例内容');
oDiv2.appendChild(newContent);
for(var i=0;i<oModal.length;i++){
oModal[i].addEventListener("click",function(event){
oDiv.style.display="block";
oDiv.setAttribute("class","container animated bounceInDown");
});
}
oI.addEventListener("click",function(event){
oDiv.setAttribute("class","container animated bounceOut");
// oDiv.style.display="none";
});
</script>
</body>
</html>
32王锟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
position: relative;
}
.newTip{
width: 200px;
height: 30px;
margin-top:50px ;
/*border: 1px solid #000;*/
/*position: absolute;
top: 700px;
bottom: 0;
left: 0;
right: 30px;
margin: auto;*/
color: #000;
}
#spanTip{
border-radius:10px ;
display: inline-block;
position: relative;
top: -55px;
left: 0;
right: 0;
margin: auto;
/*width: 100px;*/
text-align: center;
background-color: #000;
color: #fff;
}
#delta{
width: 0;
height: 0;
border: 10px solid;
border-color: #000 transparent transparent transparent;
position: relative;
top: -55px;
left: 55px;
}
</style>
</head>
<body>
<div class="newTip" data-content="">
这里显示提示内容
</div>
<div class="newTip" data-content="">
这里显示提示内容1
</div>
<div class="newTip" data-content="">
这里显示提示内容2
</div>
<div class="newTip" data-content="">
这里显示提示内容3
</div>
<script type="text/javascript">
(function(){
var spanObj,deltaObj;
var Tip=document.querySelectorAll(".newTip");
var spanObj;
// console.log(Tip[0].innerHTML);
for(var i = 0; i < Tip.length; i++) {
Tip[i].addEventListener('mouseenter', (function(n) {
return function() {
for (var j=0;j<Tip.length;j++) {
if(j==n){
spanObj=document.createElement("span");
spanObj.innerHTML=Tip[j].innerHTML;
spanObj.id="spanTip";
Tip[j].appendChild(spanObj);
deltaObj=document.createElement("div");
deltaObj.id="delta";
Tip[j].appendChild(deltaObj);
}
}
};
})(i));
}
for(var i = 0; i < Tip.length; i++) {
Tip[i].addEventListener('mouseleave', (function(n) {
return function() {
for (var j=0;j<Tip.length;j++) {
if(j==n){
spanObj.remove();
deltaObj.remove();
}
}
};
})(i));
}
// Tip.addEventListener("mouseenter",enter);
// Tip.addEventListener("mouseleave",leave);
// function enter(){
//
// }
})();
</script>
</body>
</html>
02 张振栋 今天实现如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复习</title>
<!--
开发的时候，建议大家用本地文件，最好用没有压缩过的文件
上线的时候，建议使用压缩过的文件，或使用cdn的方式
-->
<!--<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.container{
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.modal i{
font-size: 24px;
color: green;
}
.container .close{
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
z-index: 1000;
}
</style>
</head>
<body>
<!--
交互开发，做交互，事件
-->
<div class="container animated bounceIn">
<div class="content">示例内容</div>
<!--<a href="javascript:" class="clossebtn"></a>-->
<a href="javascript:" class="close" ><i class="fa fa-close"></i></a>
</div>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
<a href="javascript:" data-title="内容" class="modal">链接2</a>
<script>
var oModal=document.querySelectorAll(".modal");
var oContainer=document.querySelector(".container");
// var oClose=document.querySelector(".animated .clossebtn");
var oClose=document.querySelector(".close");
for (var i = 0; i < oModal.length; i++) {
oModal[i].addEventListener("click",function(event){
//console.log(event.target.innerHTML,event.target.dataset.title,event.target.getAttribute("data-title"));
oContainer.style.display="block";
console.log(oClose);
})
}
oClose.addEventListener("click",function(event){
event.preventDefault();
// oClose.className="clossebtn";
oContainer.classList.remove("bounceIn");
oContainer.classList.add("fadeOut");
setTimeout(function(){
oContainer.classList.remove("fadeOut");
oContainer.classList.add("bounceIn");
oContainer.style.display="none";
},1000);
})
//console.log(oClose)
</script>
</body>
</html>
···
39 张桦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.container{
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.modal i{
font-size: 24px;
color: green;
}
button{
}
</style>
</head>
<body>
<div class="container animated bounceIn">
<div class="content"><img src="img/h1_small.jpg"/></div>
<input type="button" name="" id="anniu" value="关闭" class="anniu"/>
</div>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
<a href="javascript:" data-title="内容" class="modal">链接2</a>
<script>
var oModal=document.querySelectorAll(".modal");
var oContainer=document.querySelector(".container");
var oanniu = document.querySelector(".anniu")
for (var i = 0; i < oModal.length; i++) {
oModal[i].addEventListener("click",function(event){
oContainer.style.display="block";
oContainer.classList.add("animated");
oContainer.classList.add("bounceIn");
oContainer.style.display="block";
// oContainer.style.display=""
//oContainer.classList.add("animate.css");
})
}
oanniu.addEventListener("click",function(event){
oContainer.style.display="none";
})
// oModal.addEventListener("click"function(event){
// oContainer.classList.add("animate");
// oContainer.classList.add("fadeOut");
//
//
// })
</script>
</body>
</html>
```html
08 韩浩浩 今天代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<style type="text/css">
.container{
margin-top: -250px;
margin-left: 520px;
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.modal i{
font-size: 24px;
color: green;
}
</style>
</head>
<body>
<div class="container ">
<div class="content">2018年1月9日10:08:24</div>
<i class="fa fa-close" style="position: absolute; right: 10px; top: 10px;"></i>
</div>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
<script>
var oModal=document.querySelectorAll(".modal");
var oContainer=document.querySelector(".container");
var oClose=document.querySelector('.fa-close');
for (var i = 0; i < oModal.length; i++) {
oModal[i].addEventListener("click",function(event){
oContainer.style.display="block";
oContainer.classList.add("animated");
oContainer.classList.add("bounceIn");
})
oClose.addEventListener('click',function(event){
oContainer.style.display="none";
})
}
</script>
</body>
</html>
34 陈耀泽
<style type="text/css">
.container{
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.model i{
font-size: 24px;
color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
</head>
<body>
<div class="container">
<div class="content">示例内容</div>
</div>
<a href="javascript:" data-title="内容" class="model"><i class="fa fa-table"></i>link</a>
<a href="javascript:" data-title="内容" class="model2">link2 <i class="fa fa-close"></i></a>
<script type="text/javascript">
var Ocontainer=document.querySelector('.container')
var Omodel = document.querySelector('.model')
Omodel.addEventListener('click',function(){
Ocontainer.setAttribute('class',"container animated swing");
Ocontainer.style.display='block';
})
var Omodel2 = document.querySelector('.model2')
Omodel2.addEventListener('click',function(){
Ocontainer.setAttribute("class","container animated fadeOut")
setTimeout("Ocontainer.style.display='none'",1000);
})
</script>
</body>
42 鄢滟麟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.conter{
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.remove{
position: absolute;
right: 20px;
top: 10px;
}
img{
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<a href="javascript:" class="mo" data-title="123">连接</a>
<a href="javascript:" class="mo" data-title="123"><i class="fa fa-user"></i></a>
<!--<div class="conter">
<div class="content animated flash" >内容 </div>
</div>-->
<img src="img/u=1244693497,3491935706&fm=27&gp=0.jpg"/>
<script type="text/javascript">
var oMo= document.querySelectorAll(".mo");
if(oMo.length<1){
console.log("没有元素");
}else{
var oConter =document.createElement("div");
oConter.setAttribute("class","conter animated");
document.body.appendChild(oConter);
var oContent = document.createElement("div");
oContent.setAttribute("class","content");
oConter.appendChild(oContent);
oContent.innerHTML="内容";
var oi = document.createElement("i");
oi.setAttribute("class","remove fa fa-remove");
oContent.appendChild(oi);
}
for (var i = 0; i < oMo.length; i++) {
oMo[i].addEventListener("click",function(event){
oConter.style.display="block";
oConter.classList.add("flip");
});
}
oi.addEventListener("click",function(){
oConter.classList.remove("flip");
oConter.classList.add("bounceOut");
setTimeout(function(){
oConter.classList.remove("bounceOut");
oConter.style.display="none";
},1000)
})
</script>
</body>
</html>
19 陈波 今天做的如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>...</title>
<style type="text/css">
.test{
margin: auto;
}
.container{
position: fixed;
top: 400px;
bottom: 0;
right: 0;
left: 700px;
width: 200px;
height: 100px;
display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
</head>
<body>
<div class="test">
<div class="container">
实例显示
</div>
</div>
<a href="javascript:"><i class="fa fa-address-card"></i>打開</a>
</body>
<script type="text/javascript">var oBtn=document.querySelector("a");
var otxt=document.querySelector('.container');
var i=1;
oBtn.addEventListener("click", function() {
otxt.style.display="block";
otxt.style.border="1px dashed #000";
otxt.classList.add("animated");
otxt.classList.add("bounceInUp");
if(i==1) {
closelogo=document.createElement("i");
closelogo.classList.add("fa");
closelogo.classList.add("fa-close");
closelogo.style.marginLeft="108px";
otxt.appendChild(closelogo);
i=2;
}
closelogo.addEventListener("click", function() {
console.log("ok");
otxt.classList.remove("bounceInUp");
otxt.classList.add("animated");
otxt.classList.add("bounceOutUp");
setTimeout(function() {
otxt.style.display="none"
}, 1000);});
}
)</script>
</html>
感谢 庆哥的大力支持 和指导
22 包捷 今天做的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.container{
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.modal i{
font-size: 24px;
color: green;
}
</style>
</head>
<body>
<div class="container animated bounceIn">
<div class="content">示例内容</div>
<a href="javascript:" class="closebtn">
<b class="fa fa-close"></b>
</a>
</div>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-arrows"></i></a>
<a href="javascript:" data-title="内容" class="modal">链接</a>
<script>
var oModal=document.querySelectorAll(".modal");
var oContainer=document.querySelector(".container");
var oClose=document.querySelector(".container .closebtn")
for (var i = 0; i < oModal.length; i++) {
oModal[i].addEventListener("click",function(event){
oContainer.style.display="block";
})
}
oClose.addEventListener("click",function(event){
oContainer.classList.remove("bounceIn");
oContainer.classList.add("fadeOut");
setTimeout(function(){
oContainer.style.display="none";
oContainer.classList.remove("fadeOut");
oContainer.classList.add("bounceIn");
},1000);
})
</script>
</body>
</html>
16 袁健苗 今天实现如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.container{
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height:200px;
border: 1px solid #000;
}
.mobil i{
font-size:24px;
color: red;
}
.content i{
position: absolute;
right: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="container animated">
<div class="content">示例内容
<i class="fa fa-close"></i>
</div>
</div>
<a href="javascript:" data-title = "内容" class="mobil"><i class="fa fa-table"></i></a>
<script>
var oMobil=document.querySelectorAll(".mobil");
var oContainer=document.querySelector(".container");
var oAnniu=document.querySelector(".fa-close");
for (var i = 0; i < oMobil.length; i++){
oMobil[i].addEventListener("click",function(event){
oContainer.removeAttribute("class","container animated fadeOut");
oContainer.setAttribute("class","container animated fadeIn");
oContainer.style.display="block";
})
oAnniu.addEventListener("click",function(event){
oContainer.removeAttribute("class","container animated fadeIn");
oContainer.setAttribute("class","container animated fadeOut");
oContainer.style.display="none";
})
}
</script>
</body>
</html>
33 朱善鸿
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<style type="text/css">
.a{
width: 100px;
height: 100px;
border: 1px solid #000;
position: fixed;
top: 500px;
display: none;
}
</style>
</head>
<body>
<div class="a animated bounce">
<i class="fa fa-close guan"></i> 点击事例
</div>
<i class="fa fa-address-book "></i>
<a href="#" class="b">点击</a>
</body>
<script type="text/javascript">
var ob=document.querySelector(".b");
var oa=document.querySelector(".a");
var oguan=document.querySelector(".guan");
ob.addEventListener("click",function() {
oa.style.display="block";
oa.classList.remove('fadeOut');
});
oguan.addEventListener("click",function() {
setTimeout(function() {
oa.classList.add('fadeOut');
// oa.style.display="none";
},1000);
});
</script>
</html>
01 朱浩然
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<style type="text/css">
.container {
display: none;
position: fixed;
left: 20px;
bottom: 20px;
height: 200px;
width: 400px;
border: 1px solid #000;
}
.modal i {
font-size: 24px;
color: green;
}
.container .close{
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
z-index: 1000;
}
</style>
</head>
<body>
<div class="container animated bounceIn">
<div class="content">事例内容</div>
<a href="javascript:" class="close"><i class="fa fa-close"></i></a>
</div>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
<a href="javascript:" data-title="内容" class="modal">链接2</a>
<script>
var oModal = document.querySelectorAll(".modal");
var oContainer = document.querySelector(".container");
var oClose=document.querySelector(".close");
//var oClose = document.querySelectorAll(".animated .clossebtn")
for(var i = 0; i < oModal.length; i++) {
oModal[i].addEventListener("click", function(event) {
oContainer.style.display = "block";
console.log(oClose)
})
}
oClose.addEventListener("click", function(event) {
event.preventDefault();
oContainer.classList.remove("bounceIn");
oContainer.classList.add("fadeOut");
setTimeout(function() {
oContainer.classList.remove("fadeOut");
oContainer.classList.add("bounceIn");
oContainer.style.display = "none";
},1000);
})
</script>
</body>
</html>
07 陈克行 今天代码实现如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<style type="text/css">
.conter{
border: 1px solid #FFA500;
width: 200px;
height: 100px;
display: none;
position: fixed;
left: 20px;
bottom: 100px;
}
.one i{
color: orange;
}
.conter div i{
color: orange;
position: absolute;
right: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="conter ">
nice
<div >
<a href="javascript:"><i class="fa fa-close close"></i></a>
</div>
</div>
<a href="javascript:" class="one"><i class="fa fa-2x fa-qq"></i></a>
<a href="javascript:" class="one"><i class="fa fa-2x fa-wechat"></i></a>
<script type="text/javascript">
var One=document.querySelectorAll(".one");
var Con=document.querySelector(".conter");
var Close=document.querySelector(".close");
for (var i = 0; i < One.length; i++) {
One[i].addEventListener("click",function(){
Con.style.display="block";
Con.classList.add("animated");
Con.classList.add("bounceIn");
});
}
Close.addEventListener("click",function(){
Con.classList.remove("bounceIn");
Con.classList.add("fadeOut");
setTimeout(function(){
if(Con.style.opacity==0){
Con.style.display="none"
}
},1000)
})
</script>
</body>
</html>
35 黄书琛 今天实现如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<style type="text/css">
.content{
display: none;
position: fixed;
left: 20px;
bottom: 200px;
width: 300px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="content" id="content">
<div class="a" id="a">内容</div>
<i class="fa-apple"></i>
</div>
<a href="#" data-title = "emmmm....1"><i class="fa-apple"></i></a>
<a href="#" data-title = "emmmm....2">link</a>
<script type="text/javascript">
var oArray = document.querySelectorAll("a");
var oDiv = document.getElementById("content");
var oa = document.getElementById("a");
var oi = document.querySelector("i");
for (var i = 0; i < oArray.length; i++) {
oArray[i].addEventListener("click",function () {
oDiv.setAttribute('class',"content animated bounce");
oDiv.style.display="block";
})
}
oi.addEventListener('click',function () {
oDiv.setAttribute('class',"content animated fadeOut");
setTimeout("oDiv.style.display='none'",2000);
});
</script>
</body>
</html>
44 郑文汉 今天代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/animate.css"/>
<style type="text/css">
.container{
display:none;
position: fixed;
left:20px;
bottom:20px;
border: 1px solid #000;
}
.container a i{
position: absolute;
right: 5px;
top: 5px;
}
.modal i{
font-size: 24px;
color: deepskyblue;
}
</style>
</head>
<body>
<div class="container animated bounceIn">
<div class="content">示例内容</div>
<a href="javascript:">
<i class="fa fa-close"></i>
<img src="img/img.jpg"/>
</a>
</div>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-camera"></i></a>
<a href="javascript:" data-title="内容" class="modal">链接2</a>
<script>
var oModal=document.querySelectorAll(".modal");
var oContainer=document.querySelector(".container");
var oClose=document.querySelector("a i");
var oimg=document.querySelector(".container img");
oContainer.appendChild(oimg);
for (var i = 0; i < oModal.length;i++){
oModal[i].addEventListener("click",function(event){
oContainer.classList.add('animated');
oContainer.classList.add('bounceIn');
oContainer.style.display="block";
})
}
oClose.addEventListener("click", function(){
oContainer.classList.remove('bounceIn');
oContainer.classList.add('fadeOut');
oContainer.style.display="none";
})
</script>
</body>
</html>
45 杨志谦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>案列</title>
<link rel="shortcut icon" type="text/css" href="img/icon.ico"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
</head>
<style type="text/css">
.container{
display: none;
position: fixed;
border: 1px solid #000;
z-index: 1000;
bottom: 250px;
left: 50px;
overflow: hidden;
}
a{
text-decoration: none;
color: black;
}
.ocont{
display: none;
}
.container a i{
position: absolute;
right: 5px;
top: 5px;
}
</style>
<body>
<div class="container">
<div class="content">示列内容</div>
<a href="javascript:">
<i class="fa fa-close"></i>
</a>
<img src="img/timg (1).jpg"/>
</div>
<a href="javascript:" class="fa fa-android"></a>
<a href="javascript:" data-title="连接5" class="fa fa-car"></a>
<script type="text/javascript">
var windith=window.innerWidth;
var winheight=window.innerHeight;
var olink=document.querySelectorAll("a");
var ocontainer=document.querySelector(".container");
var oa=document.querySelector("a");
var ocont=document.createElement("div");
var h1=document.createElement("h1");
var oimg=document.querySelector(".container img");
ocontainer.appendChild(ocont);
ocont.appendChild(h1);
h1.innerHTML="www";
ocont.className="ocont";
ocont.appendChild(oimg);
for (var i=0;i<olink.length;i++) {
olink[i].addEventListener("click",function (event) {
// alert(event.target.getAttribute('data-title'));
console.log("ok");
oimg.style.width=56+'px';
oimg.style.height=56+'px';
console.log(windith);
ocontainer.style.display="block";
ocontainer.classList.add("animated");
ocontainer.classList.add("bounceIn");
ocont.style.display="block";
})
}
oimg.addEventListener("click",function () {
oimg.style.width=windith+'px';
oimg.style.height=winheight+'px';
oimg.style.top=0+'px';
oimg.style.left=0+'px';
ocontainer.style.top=0+'px';
ocontainer
.style.left=0+'px';
})
oa.addEventListener("click",function () {
// ocontainer.classList.remove("bounceIn")
ocontainer.classList.add("animated");
ocontainer.classList.add("bounceOut");
setTimeout(function () {
if(ocontainer.style.opacity==0){
ocontainer.classList.remove("fadeOut");
ocontainer.classList.remove("animated");
ocontainer.classList.remove("bounceIn");
ocontainer.style.display="none";
}
},1000)
})
</script>
</body>
</html>
15 潘承彬 今天实现代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>复习</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.container{
display: none;
position: fixed;
left:20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid rgba(100,150,180,.5);
}
.modal i{
font-size: 24px;
}
.close i{
position: absolute;
right: 5px;
top: 5px;
}
</style>
</head>
<body>
<div class="container animated">
<div class="content">
<h1>这里的是标题</h1>
<p>这里是段落</p>
<div class="close"> <a href="avascript:"><i class="fa fa-close"></i></a></div>
</div>
</div>
<a href="javascript:" data-title = "示例内容" class="modal"> <i class="fa fa-id-card"></i></a>
<a href="javascript:" data-title = "示例内容" class="close"> <i class="fa fa-table"></i></a>
<script >
var oModal=document.querySelectorAll(".modal");
var oContainer=document.querySelector(".container");
var oClose=document.querySelector(".close");
for(var i=0;i<oModal.length;i++){
oModal[i].addEventListener("click",function(event) {
oContainer.removeAttribute("class","container animated fadeOut");
oContainer.setAttribute("class","container animated fadeIn");
oContainer.style.display="block";
})
}
oClose.addEventListener("click",function(event) {
oContainer.removeAttribute("class","container animated fadeIn");
oContainer.setAttribute("class","container animated fadeOut");
setTimeout(function () {
oContainer.style.display="none";
},1000);
})
</script>
</body>
</html>
20 邵家栋 今天实现如下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
</head>
<style type="text/css">
.container{
display: none;
position: fixed;
width: 200px;
height: 200px;
border: 1px solid #000;
left: 50px;
bottom: 250px;
}
a{
text-decoration: none;
color: black;
}
.ocont{
width: 100px;
height: 100px;
background: #f00;
display: none;
}
.container a i{
position: absolute;
right: 5px;
top: 5px;
}
</style>
<body>
<div class="container">
<div class="content">内容</div>
<a href="javascript:">
<i class="fa fa-close"></i>
</a>
</div>
<a href="javascript:" class="fa fa-android"></a>
<a href="javascript:" data-title="连接5" class="fa fa-car"></a>
<script type="text/javascript">
var olink=document.querySelectorAll("a");
var ocontainer=document.querySelector(".container");
var oa=document.querySelector("a");
var ocont=document.createElement("div");
var h1=document.createElement("h1");
ocontainer.appendChild(ocont);
ocont.appendChild(h1);
h1.innerHTML="www";
ocont.className="ocont";
for (var i=0;i<olink.length;i++) {
olink[i].addEventListener("click",function (event) {
// alert(event.target.getAttribute('data-title'));
console.log("ok");
ocontainer.style.display="block";
ocontainer.classList.add("animated");
ocontainer.classList.add("bounceIn");
ocont.style.display="block";
})
}
oa.addEventListener("click",function () {
// ocontainer.classList.remove("bounceIn")
ocontainer.classList.add("animated");
ocontainer.classList.add("fadeOut");
setTimeout(function () {
if(ocontainer.style.opacity==0){
ocontainer.classList.remove("fadeOut");
ocontainer.classList.remove("animated");
ocontainer.classList.remove("bounceIn");
ocontainer.style.display="none";
}
},1000)
})
</script>
</body>
</html>
23 屠林锋
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hi</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.container{
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.a i{
font-size: 24px;
color: green;
}
b{
position: absolute;
right: 5px;
top: 5px;
}
</style>
</head>
<body>
<div class="container animated bounceIn">
<div class="content ">示例内容</div>
<a href="javascript:" class="closebtn ">
<b class="fa fa-close"></b>
</a>
</div>
<a href="javascript:" data_title="122"class="a" ><i class=" fa fa-music"></i></a>
<a href="javascript:" data_title="122"class="a" >链接2</a>
<script type="text/javascript">
var oa=document.querySelectorAll(".a");
var oContainer=document.querySelector(".container");
var oclose=document.querySelector(".container .closebtn");
for(var i=0;i<oa.length;i++){
oa[i].addEventListener("click",function(event){
oContainer.style.display="block";
oContainer.classList.add('bounceIn');
oContainer.classList.remove('fadeOut');
})
}
oclose.addEventListener("click",function(event){
oContainer.classList.add('fadeOut');
setTimeout("oContainer.style.display='none';",1000);
})
</script>
</body>
</html>
12 章驰恒
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<title></title>
<style type="text/css">
.container{
left: 200px;
bottom: 200px;
width: 400px;
height: 200px;
border: 1px solid #f333;
}
.modal{
font-size:20px ;
color: deepskyblue;
}
</style>
</head>
<body>
<div class="container ">
<div class="content animated bounce">示例内容</div>
</div>
<a href="javascript:" data-title = "内容" class="modal"><i class="fa fa-table"></i></a>
<a href="javascript:" data-title = "内容" class="modal">链接</a>
<script type="text/javascript">
var oModal=document。querySelectorAll(".modal");
var oContainer=document.querySelector(".container");
for(var i=0;i<oModal.length;i++){
oModal[i].addEventListener("click",function(event){
oContainer.style.display="block";
})
}
</script>
</body>
</html>
37 王成铠 今天实现如下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<style type="text/css">
.container{
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.close i{
position: absolute;
right: 5px;
top: 5px;
}
</style>
</head>
<body>
<a class="link" data-title="abc" href="jacascript:">连接</a>
<a class="link" data-title="def" href="jacascript:">连接1</a>
<script type="text/javascript">
var olink=document.querySelectorAll(".link");
var ocontent=document.createElement("div");
ocontent.className="container";
document.body.appendChild(ocontent);
var ocon=document.createElement("div");
ocon.innerHTML="实例内容";
ocontent.appendChild(ocon);
var oclose=document.createElement("div");
oclose.className="close";
ocontent.appendChild(oclose);
var oA=document.createElement("a");
oA.href="javascript:";
oclose.appendChild(oA);
var oI=document.createElement("i");
oI.className="fa fa-close";
oA.appendChild(oI);
for (var i = 0; i < olink.length; i++) {
olink[i].addEventListener("click",function(event) {
ocontent.style.display="block";
ocontent.setAttribute("class","container animated bounce");
});
}
oclose.addEventListener("click",function() {
ocontent.setAttribute("class","container animated bounceOut");
setTimeout(function() {
ocontent.style.display="none";
},1000);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="animate.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"
<style type="text/css">
.container{
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.modal i{
font-size: 24px;
color: green;
}
.a i{
position: absolute;
margin-left: 300px;
margin-top: 20px;
cocolor: #green;
}
</style>
</head>
<body>
<div class="a.animated bounceIn">
<div class="b" style="width;100px">CHEN</div>
<a href="javascript" class="f">
<i class="fa fa-close"></i>
</a>
</div>
<div class="container">
<div class="content">示例内容</div>
</div>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
<a href="javascript:" data-title="内容" class="modal">链接2</a>
<script>
var.oC=document.querySelectorAll(".c");
var.oA=document.querySelector(".a");
var.oF=document.querySelector(".f");
for (var i = 0; i < oModal.length; i++) {
oC[i].addEventListener("click",function(event){
oA.style.display="block";
oA.classList.remove("bounceOut");
oA.classList.add("bounceOut");
})
}
oF.addEventListener("click",function(e){
oA.style.display="none"
oA.classList.add("bounceOut");
setTimeout("oA.style.display='none';",1000)
})
</script>
</body>
</html>
21 屠鑫波
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.a{
margin: 10px;
border: 1px solid sandybrown;
width: 300px;
height: 300px;
position: fixed;
bottom: 0;
display: none;
}
i{
position: absolute;
right: 5px;
top: 5px;
}
</style>
</head>
<body>
<div class="a animated bounceIn">
<a href="javascript:">
<i class="guan fa fa-close"></i>
</a>
</div>
<a href="javascript:" class="b fa fa-music">点</a>
<script type="text/javascript">
var oa=document.getElementsByClassName("a");
var ob=document.getElementsByClassName("b");
var of=document.querySelector("h1");
var ofa=document.querySelector("i");
for (var i=0;i<ob.length;i++) {
ob[i].addEventListener("click",function(event){
oa[0].style.display="block";
oa[0].classList.remove('fadeOut');
oa[0].classList.add('bounceIn');
})
}
ofa.addEventListener("click",function(event){
oa[0].classList.remove('bounceIn');
oa[0].classList.add('fadeOut');
setTimeout("oa[0].style.display='none';",1000);
})
</script>
</body>
</html>
38 娄明磊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>复习</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<style type="text/css">
.container {
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
}
.modal i {
font-size: 24px;
color: green;
}
.close {
position: absolute;
right: 4px;
top: 4px;
}
img {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div class="container animated bounceInLeft">
<div id="picture" class="content"><img class="img" src="img/u=460555328,3074397162&fm=27&gp=0.jpg" /></div>
<a href="javascript:" class="close">
<i class="fa fa-close"></i>
</a>
</div>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
<a href="javascript:" data_title="内容" class="modal">链接2</a>
<script type="text/javascript">
var oModal = document.querySelectorAll(".modal");
var oContainer = document.querySelector(".container");
var oClose = document.querySelector(".close");
for(var i = 0; i < oModal.length; i++) {
oModal[i].addEventListener("click", function(event) {
oContainer.style.display = "block";
})
}
oClose.addEventListener("click", function() {
oContainer.style.display = "none";
})
var opicture = document.getElementById("picture");
var oimg = document.querySelector(".img");
opicture.addEventListener("click", function() {
console.log(oimg.width, window.innerWidth);
var width=oimg.width;
var height=oimg.width;
(function Larger(){
console.log(oimg.width, window.innerWidth);
if( width<= window.innerWidth)
oimg.style.width =width + "px";
if(oimg.height <= window.innerHeight)
oimg.style.height =height + "px";
if(width <= window.innerWidth||height <= window.innerHeight)
setTimeout(Larger,10);
height+=window.innerHeight/window.innerWidth*15;
width+=window.innerWidth/window.innerHeight*13;
oContainer.style.top = 0;
oContainer.style.left = 0;
}());
})
</script>
</body>
</html>
13 夏彬慧 今天实现如下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复习</title>
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<style type="text/css">
.container {
display: none;
position: fixed;
left: 100px;
bottom: 360px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.container i {
position: absolute;
right: 8px;
top: 3px;
}
.modal i {
font-size: 24px;
color: green;
}
</style>
</head>
<body>
<div class="container animated bounceIn">
<div class="content">示例内容</div>
<i class="fa fa-close close"></i>
</div>
<a href="javascript:" class="modal"><i class="fa fa-table"></i></a>
<a href="javascript:" class="modal">点击</a>
<script>
var oModal = document.querySelectorAll(".modal");
var oContainer = document.querySelector(".container");
var oclose = document.querySelector(".close");
for(var i = 0; i < oModal.length; i++) {
oModal[i].addEventListener("click", function(event) {
oContainer.classList.remove("fadeOut");
oContainer.style.display = "block";
});
}
oclose.addEventListener("click", function() {
oContainer.classList.add("fadeOut");
setTimeout(function() {
if(oContainer.style.opacity == 0) {
oContainer.style.display = "none";
}
}, 800);
});
</script>
</body>
</html>
31 兰庆锋
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"/>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.aaa{
margin: auto;top:200px;
border: 1px solid #000;
width: 500px;
height: 400px;
display: none;background-color: #00FF00;
position: relative;
}
i{
color: #f0f0f0;
}
.cha{
text-decoration: none;
position: absolute;
right: 10px;
}
.mban{
width: 1600px;
height: 793px;
background-color: rgba(333,0,0,.3);
}
</style>
</head>
<body>
<div class="ccc">
<a href="javascript:" class="mmm"><i class="fa fa-window-restore"></i></a>
<a href="javascript:" id="lj" class="mmm">链接</a>
<div class="aaa">
<a href="javascript:" class="cha">×</a>
<div class="bbb">
aaaaaaa
</div>
</div>
</div>
<script type="text/javascript">
var oA=document.querySelectorAll(".mmm");
var oP=document.querySelector(".aaa")
var oC=document.querySelector(".cha");
var oD=document.querySelector(".ccc")
for(i=0;i<oA.length;i++){
oA[i].addEventListener("click",function(event){
oP.style.display="block";
oD.setAttribute("class","ccc mban");
});
}
oC.addEventListener("click",function(event){
oP.style.display="none";
oD.setAttribute("class","ccc");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.tu{
widows: 800px;
height: 300px;
}
.tuxiaoshi{
display: none;
}
.tu11{
width: 100%;
height: 100%;
}
.tu1{
width: 350px;
height: 250px;
overflow: hidden;
display: inline-block;
}.tu2{
width: 350px;
height: 250px;
overflow: hidden;
display: inline-block;
}
.tu2 img{
width: 100%;
height: 100%;
}.tu1 img{
width: 100%;
height: 100%;
}
</style>
<body>
<div id="tu">
<div id="tu1" class="tu1">
<img src="img/001.png"/>
</div>
<div id="tu2" class="tu2">
<img src="img/002.jpg"/>
</div>
</div>
</body>
<script type="text/javascript">
var oT1=document.querySelector("#tu1");
var oT2=document.querySelector("#tu2");
var tup=document.querySelectorAll("img");
var k=0;
var j=0;
oT1.addEventListener("click",function(event){
if(k==0)
{
oT1.setAttribute("class","tu11");
oT2.setAttribute("class","tuxiaoshi");
k=1;
}else{
oT1.setAttribute("class","tu1");
oT2.setAttribute("class","tu2");
k=0;
}
//
});
//
oT2.addEventListener("click",function(event){
if(j==0)
{
oT2.setAttribute("class","tu22");
oT1.setAttribute("class","tuxiaoshi");
j=1;
}else{
oT2.setAttribute("class","tu2");
oT1.setAttribute("class","tu1");
j=0;
}
});
</script>
</html>
25 娄文依
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复习</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<style type="text/css">
.container{
display: none;
position: fixed;
left: 20px;
bottom: 20px;
width: 400px;
height: 200px;
border: 1px solid #000;
}
.container .closeBtn{
position: absolute;
top: 5px;
right: 5px;
}
.modal i{
font-size: 24px;
color: green;
}
</style>
</head>
<body>
<div class="container animated bounceIn">
<div class="content">示例内容</div>
<a href="javascript:" class="closeBtn"><i class="fa fa-close"></i></a>
</div>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
<a href="javascript:" data-title="内容" class="modal">链接2</a>
<script>
var oModal=document.querySelectorAll(".modal");
var oContainer=document.querySelector(".container");
var oClose=document.querySelector(".container .closeBtn")
for (var i = 0; i < oModal.length; i++) {
oModal[i].addEventListener("click",function(event){
event.target.style.fontSize="30px";
event.target.style.color="green";
//console.log(event.target.innerHTML,event.target.dataset.title,event.target.getAttribute("data-title"));
oContainer.style.display="block";
// oContainer.classList.add('animated');
// oContainer.classList.add('bounceIn');
})
}
oClose.addEventListener("click",function(){
oContainer.classList.remove('bounceIn');
oContainer.classList.add('fadeOut');
setTimeout(function(){
if(oContainer.style.opacity==0){
oContainer.style.display="none";
}
},1000);
})
</script>
</body>
</html>
40 杨钦沨
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<style type="text/css">
.container {
display: none;
position: fixed;
left: 20px;
bottom: 20px;
height: 200px;
width: 400px;
border: 1px solid #000;
}
.modal i {
font-size: 24px;
color: green;
}
.container .close{
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
z-index: 1000;
}
</style>
</head>
<body>
<div class="container animated bounceIn">
<div class="content">事例内容</div>
<a href="javascript:" class="close"><i class="fa fa-close"></i></a>
</div>
<a href="javascript:" data-title="内容" class="modal"><i class="fa fa-table"></i></a>
<a href="javascript:" data-title="内容" class="modal">链接2</a>
<script>
var oModal = document.querySelectorAll(".modal");
var oContainer = document.querySelector(".container");
var oClose=document.querySelector(".close");
//var oClose = document.querySelectorAll(".animated .clossebtn")
for(var i = 0; i < oModal.length; i++) {
oModal[i].addEventListener("click", function(event) {
oContainer.style.display = "block";
console.log(oClose)
})
}
oClose.addEventListener("click", function(event) {
event.preventDefault();
oContainer.classList.remove("bounceIn");
oContainer.classList.add("fadeOut");
setTimeout(function() {
oContainer.classList.remove("fadeOut");
oContainer.classList.add("bounceIn");
oContainer.style.display = "none";
},1000);
})
</script>
</body>
