| 本文给大家分享一个用原生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"); }}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
原生JS实现实时钟表
React Native JSI实现RN与原生通信的示例代码 |
