原生JS实现特效留言框
作者：aiguangyuan
这篇文章主要为大家详细介绍了原生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");
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。