首页 > 代码库 > 网站特效：欢迎窗口/发表评论

网站特效：欢迎窗口/发表评论

2024-09-15 01:14:52   216人阅读

 网站特效
 
做前你需要考虑的东西
①你需要的效果；
②HTML基础排版；
③css添加样式；
④javascript添加效果；
 
 
一、欢迎窗口
 
HTML代码：
在body里面添加代码：
 
<body>
<div id="right">
<div id="xiao" onclick="xiaoshi()"><p>√</p></div>
<h1>美丽的一天</h1>
<div id="zi"><p>哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></div>
</div>
</body>
 
㈠写html代码基础排版。↑
 
css代码，在这里我选择内部样式表
内部样式表，在HTML中的<head></head>中 添加<style type="style/css"></style>
内容：
<style type="text/css">
#right{width: 200px;
height: 200px;
 
position: fixed;
right: 0px;
bottom: -200px;
padding-left: 10px;
transition: all 1s ease;
}
#xiao {cursor: pointer;
width: 20px;
height: 20px;
 
text-align: center;
line-height: 2px;
position: absolute;
top: 10px;
right: 10px;
font-size: 36px;
}
#xiao p{position: absolute;
top: -36px;}
</style>
 
㈡给DIv添加样式与定位↑
 
javascript代码，在这里我选择在HTML 内部直接使用JS：
在body前使用代码：<script type="text/javascript"></script>
JS内容样式如下：
 
<script type="text/javascript">
window.onload = function(){
right.style.bottom=(0)+"px"
}
  function xiaoshi(){
  var right = document.getElementById("right")
var zi = document.getElementById("zi")
var xiao = document.getElementById("xiao")
var p = xiao.firstElementChild
console.log(p.innerText)
 
if(p.innerText=="√"){
p.innerText="×"
right.style.bottom=(-180)+"px";
 
}else{
p.innerText="√";
right.style.bottom=(0)+"px";
 
}
}
</script>
㈢给DIv添加效果，如：点击变换、隐藏、弹出等↑
效果图，如下：
技术分享
右下角出现弹窗，由于我在CSS代码里添加transition（过渡），弹窗在页面加载的时候慢慢弹出由最下方慢慢弹出。
当点击√ 时， √ 转换为×，之后弹窗下移只留 上部边缘，效果如图所示：
技术分享
再点击×时， × 转换为 √ ；弹窗重新显示。
 
二、发表评论
 
HTML代码：
在body里面添加代码：
<body>
<div id="wai">
<h3>最新评论</h3>
<hr />
<div id="content">
<div id="content1">
腾讯网友:
<span>李二狗</span>
<time>2017年4月14号</time>
<p>公务员好啊，可以为人名服务</p>
</div>
</div>
<hr />
 
<h4>发表评论</h4>
<div id="add">
昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：<input type="text" id="name"/>文明上网，理性发言
<div id="a">
评论内容：<textarea id="b"></textarea>
</div>
<button onclick="fabiao()" class="zi9">发表评论</button>
</div>
 
</div>
</body>
㈠写html代码基础排版。↑
 
css代码，在这里我选择内部样式表
内部样式表，在HTML中的<head></head>中 添加<style type="style/css"></style>
内容：
 
  #content{
  font-size: 12px;
  color: #B4B4B2;
  }
 
  #wai h4{
  color: #404e73;
 
  }
  #content span{
  color: #5979B2;
  font-weight: bold;
  margin-left: 15px;
  }
  #content p{
  font-size: 16px;
  color: #000000;
    }
  #add{
  font-size: 12px;
  color: #B4B4B2;
  }
 
 
  #a{
  padding-top: 10px;
  display:flex}
  #b{width: 600px;
  height: 100px;
  resize: none}
  .zi9{position:absolute;
  right: 20px;
  bottom: 10px;}
  </style>
 
㈡给DIv添加样式与定位↑
 
javascript代码，在这里我选择在HTML 内部直接使用JS：
在body前使用代码：<script type="text/javascript"></script>
JS内容样式如下：
<script type="text/javascript">
var idNum=1;
function fabiao(){
idNum++;
var name = document.getElementById("name");
var pinglun = document.getElementById("b");
if(name.value=http://www.mamicode.com/=0||pinglun.value==0){
alert("您昵称或者评论为空！！！！")
}
var content = document.getElementById("content");
var content1 = document.getElementById("content1");
var newContent1 = content.cloneNode(true);
newContent1.getElementsByTagName("span")[0].innerText=name.value;
newContent1.getElementsByTagName("p")[0].innerText=pinglun.value;
 
content.appendChild(newContent1);
 
name.value=""
pinglun.value=""
}
㈢给DIv添加效果，如：点击变换、隐藏、弹出等↑
效果图，如下：
技术分享
在昵称和评论内容写入文字：
技术分享
点击发表评论显示如图：
技术分享

网站特效：欢迎窗口/发表评论


联系
我们