原生JS实现特效留言框
本文给大家分享一个用原生JS实现的特效留言框，效果如下：
实现代码如下，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现特效留言框</title>
<style>
* {
margin: 0;
padding: 0
}
textarea {
overflow: auto;
resize: none;
}
li {
list-style: none;
}
html {
height: 100%;
}
body {
background: #570226;
height: 100%;
font: Arial, Helvetica, sans-serif;
}
h2 {
font-family: Arial, Helvetica, sans-serif
}
.wrap {
width: 740px;
height: 498px;
background-color: #a72244;
border-radius: 30px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -370px;
margin-top: -249px;
overflow: hidden;
}
#head {
position: absolute;
left: 50px;
top: 20px;
font-size: 20px;
color: #fff;
line-height: 28px;
text-shadow: 2px 2px 0 #a72244;
}
#head .title {
position: absolute;
width: 340px;
top: -100px;
}
#head .url {
font-size: 14px;
position: absolute;
top: 28px;
opacity: 0;
filter: alpha(opacity=0);
left: 700px;
width: 340px;
}
#list {
position: absolute;
left: 164px;
top: -100px;
}
#list li {
position: absolute;
top: 0;
left: 0;
}
.list-left {
width: 80px;
height: 80px;
background-color: red;
border-radius: 40px;
position: relative;
text-align: center;
line-height: 80px;
font-size: 20px;
color: #f8f8f8;
z-index: 5;
}
.text {
width: 0;
height: 0;
border: 1px solid #4C4042;
line-height: 26px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
position: absolute;
left: 30px;
top: 20px;
z-index: 2;
border-radius: 19px;
outline: none;
}
#btn {
width: 50px;
height: 50px;
background-color: red;
border-radius: 40px;
position: absolute;
text-align: center;
font-size: 12px;
color: #fff;
padding: 15px;
line-height: 20px;
text-decoration: none;
z-index: 20;
left: 335px;
top: -240px;
}
</style>
<script src="js/public.js"></script>
<script>
window.onload = function () {
toHead();
};
// 欢乐的留言框 文字特效,很经典
function toHead() {
var oHead = id("head");
var oUrl = oHead.children[1];
var oTitle = oHead.children[0]
var aTitle = oTitle.innerHTML.split("");
var iNow = 0;
var oTimer = null;
var i = 0;
// 将 "欢乐的留言框" 进行拆分
for (i = 0; i < aTitle.length; i++) {
aTitle[i] = "<span>" + aTitle[i] + "</span>";
}
oTitle.innerHTML = aTitle.join("");
aTitle = oTitle.children;
for (i = 0; i < aTitle.length; i++) {
aTitle[i].style.left = aTitle[i].offsetLeft + "px";
aTitle[i].style.top = aTitle[i].offsetTop + "px";
}
for (i = 0; i < aTitle.length; i++) {
aTitle[i].style.position = "absolute";
}
oTimer = setInterval(
function () {
if (iNow == aTitle.length) {
clearInterval(oTimer);
// www.baidu.com 运动
starMove(oUrl, { left: 0, opacity: 100 }, 0, function () {
// 标题 QQ 内容 亲,请完成此处 开始运动
toList();
});
} else {
// 欢乐的留言 运动
starMove(aTitle[iNow], { top: 100 }, 1);
iNow++;
}
},
50);
};
function toList() {
var oList = id("list");
var oBtn = id("btn");
var aLi = oList.getElementsByTagName("li");
var aText = getClass('text', oList);
var aStyle = [
{
height: 26,
width: 246,
paddingBottom: 5,
paddingTop: 5,
paddingLeft: 50,
paddingRight: 50
},
{
height: 26,
width: 246,
paddingBottom: 5,
paddingTop: 5,
paddingLeft: 50,
paddingRight: 50
},
{
height: 140,
width: 246,
paddingBottom: 5,
paddingTop: 5,
paddingLeft: 50,
paddingRight: 50
}
];
var i = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].style.zIndex = aLi.length - i;
}
starMove(oList, { top: 94 }, 1, function () {
starMove(aText[0], aStyle[0], 1);
starMove(aLi[2], { top: 85 }, 1);
starMove(aLi[1], { top: 85 }, 1, function () {
starMove(aText[1], aStyle[1], 1);
starMove(aLi[2], { top: 170 }, 1, function () {
starMove(aText[2], aStyle[2], 1, function () {
starMove(oBtn, { top: 0 }, 1);
});
});
});
});
};
</script>
</head>
<body>
<div class="wrap">
<form method="get" id="form">
<h2 id="head">
<strong class="title">欢乐的留言框</strong>
<span class="url">www.baidu.com</span>
</h2>
<div id="list">
<ul>
<li>
<h3 class="list-left">标题</h3>
<input type="text" value="" class="text" name="title" disabled="disabled" />
</li>
<li>
<h3 class="list-left">QQ</h3>
<input type="text" value="" class="text" name="QQ" disabled="disabled" />
</li>
<li>
<h3 class="list-left">内容</h3>
<textarea class="text text1" name="content" disabled="disabled"></textarea>
</li>
</ul>
<a href="javascript:;" id="btn">亲，请<br />完成此处</a>
</div>
</form>
</div>
</body>
</html>
以下是上面引入的最重要的public.js代码，里面封装了很多有用的方法。
function id(id) {
return document.getElementById(id);
}
function toBrowser() {
var browser = navigator.appName;
var b_version = navigator.appVersion;
if (browser == "Netscape") {
return true;
}
var version = b_version.split(";");
var trim_Version = version[1].replace(/[ ]/g, "");
if (browser == "Microsoft Internet Explorer" && (trim_Version == "MSIE7.0" || trim_Version == "MSIE6.0" || trim_Version == "MSIE8.0")) {
return false;
}
else {
return true;
}
}
function starMove(obj, target, iType, fnEnd, iDate) {
if (obj.timer) {
clearInterval(obj.timer);
}
if (iType == 1) {
var sAttr = "";
obj.iSpeed = {};
for (sAttr in target) {
obj.iSpeed[sAttr] = 0;
}
}
if (target["transform"]) {
if (obj["transform"]) {
target["transform"] += obj["transform"];
}
else {
css(obj, sAttr, 0);
}
}
switch (iType) {
case 0:
obj.timer = setInterval(function () { doMoveBuffer(obj, target, fnEnd); }, 24);
break;
case 1:
obj.timer = setInterval(function () { domoveFlexible(obj, target, fnEnd); }, 24);
break;
}
}
function doMoveBuffer(obj, target, fnEnd) {
var sAttr = "";
var iEnd = 1;
for (sAttr in target) {
if (toBrowser() == false && target["transform"]) {
continue;
}
var iNow = parseFloat(css(obj, sAttr));
if (iNow == target[sAttr]) {
continue;
}
else {
var iSpeed = (target[sAttr] - iNow) / 5;
iSpeed *= 0.75;
if (iSpeed > 0) {
iSpeed = Math.ceil(iSpeed);
}
else {
iSpeed = Math.floor(iSpeed);
}
css(obj, sAttr, iNow += iSpeed);
iEnd = 0;
}
}
if (iEnd) {
clearInterval(obj.timer);
if (fnEnd) {
fnEnd.call(obj);
}
}
}
function domoveFlexible(obj, target, fnEnd) {
var sAttr = "";
var iEnd = 1;
for (sAttr in target) {
if (toBrowser() == false && target["transform"]) {
continue;
}
var iNow = parseFloat(css(obj, sAttr));
obj.iSpeed[sAttr] += (target[sAttr] - iNow) / 5;
obj.iSpeed[sAttr] *= 0.75;
if (Math.round(iNow) == target[sAttr] && Math.abs(obj.iSpeed[sAttr]) < 1) {
continue;
}
else {
iNow = Math.round(iNow + obj.iSpeed[sAttr]);
css(obj, sAttr, iNow);
iEnd = 0;
}
}
if (iEnd) {
clearInterval(obj.timer);
if (fnEnd) {
fnEnd.call(obj);
}
}
}
function css(obj, attr, value) {
if (arguments.length == 2) {
if (attr == "transform") {
return obj.transform;
}
var i = parseFloat(obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr]);
var val = i ? i : 0;
if (attr == "opacity") {
val *= 100;
}
return val;
}
else if (arguments.length == 3) {
switch (attr) {
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value = Math.max(value, 0);
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr] = value + 'px';
break;
case 'opacity':
if (value < 0) {
value = 0;
}
obj.style.filter = "alpha(opacity:" + value + ")";
obj.style.opacity = value / 100;
break;
case 'transform':
obj.transform = value;
obj.style["transform"] = "rotate(" + value + "deg)";
obj.style["MsTransform"] = "rotate(" + value + "deg)";
obj.style["MozTransform"] = "rotate(" + value + "deg)";
obj.style["WebkitTransform"] = "rotate(" + value + "deg)";
obj.style["OTransform"] = "rotate(" + value + "deg)";
break;
default:
obj.style[attr] = value;
}
return function (attr_in, value_in) { css(obj, attr_in, value_in) };
}
}
function getClass(sClass, obj) {
var aRr = [];
if (obj) {
var aTag = obj.getElementsByTagName('*');
}
else {
var aTag = document.getElementsByTagName('*');
}
for (var i = 0; i < aTag.length; i++) {
var aClass = aTag[i].className.split(" ");
for (var j = 0; j < aClass.length; j++) {
if (aClass[j] == sClass) {
aRr.push(aTag[i]);
}
}
}
return aRr;
}
function byClient(obj, attr) {
if (attr == "width") {
return css(obj, "borderLeft") + css(obj, "borderRight") + css(obj, "paddingLeft") + css(obj, "paddingWidth") + css(obj, "paddingWidth");
}
else if (attr == "height") {
return css(obj, "borderTop") + css(obj, "borderBottom") + css(obj, "paddingTop") + css(obj, "paddingBottom") + css(obj, "paddingHeight");
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
用ReactJS和Python的Flask框架编写留言板的代码示例
近期要在生产环境上使用react,所以,自己学习了一下,写了一个简单的留言板小程序.完整的代码可以到这里下载:message-board Use 前端使用React,然后还有Bootstrap和jQuery,React负责前端展现,jQuery主要是向服务器发送ajax请求. 后端使用Flask和MongoDB,为前端提供数据.这里主要关注前端,对于后端不做过多说明. 使用webpack,对js文件进行打包. About React React是facebook开发一个用于前段交互的Javasc
-
js使用DOM操作实现简单留言板的方法
本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素") 把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元
-
JS+CSS模拟可以无刷新显示内容的留言板实例
本文实例讲述了JS+CSS模拟可以无刷新显示内容的留言板功能.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/
-
JS实现留言板功能[楼层效果展示]
功能实现: 1.发布人和发布内容非空校验 2.编辑删除功能 3.楼层效果展示 4.发布时间展示 效果图 目录 tools.js 时间工具包 function getTime(){ var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; var date = new Date(); var year = date
-
jsp留言板源代码三: 给jsp初学者.
作 者: precom (皮蛋) 2000.12.10reply.jsp ==================================== <html><head> <META content="text/html; charset=gb2312 " http-equiv=Content-Type> <title>张家界电话黄页(网上114)</title></head> <style type=&q
-
js 实现的可折叠留言板(附源码下载)
javaScript 代码如下: $(document).ready(function(){ $(".message_list .message_body:gt(0)").hide(); $(".message_list li:gt(4)").hide(); $(".message_head").click(function(){ $(this).next(".message_body").slideToggle(500) r
-
本人ajax留言板的源程序 不错的应用js
复制代码 代码如下: // JavaScript Document function $(id) { return document.getElementById(id); } function echo(obj,html) { $(obj).innerHTML=html; } function fopen(obj) { $(obj).style.display=""; } function fclose(obj) { $(obj).style.
-
jsp留言板源代码二: 给jsp初学者.
作 者: precom (皮蛋) 2000.12.10 guestbook.jsp =========================== <html><head> <META content="text/html; charset=gb2312 " http-equiv=Content-Type> <title>张家界电话黄页(网上114)</title></head> <style type="
-
jsp留言板源代码一: 给jsp初学者.
jsp留言板源代码一: 给jsp初学者. 作 者: precom (皮蛋) oracle数据表创建. create table guestbook ( lw_title varchar2(100) not null, --留言主题 lw_author varchar2(20) not null, --网上大名 pk author_http varchar2(40) , --主页地址 author_email varchar2(40) not null,--电子信箱 pk expression v
-
JS实现留言板功能
每天一个JS 小demo之留言板.主要知识点:DOM方法的理解和运用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap { width: 400px; margin: 30px au