这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现模仿微博发布效果实例代码,有需要的朋友可以参考一下
效果:
思路:
利用多功能浮动运动框架实现微博效果,首先,将 textarea 中的属性添加到新创建的 li 里面然后,再将 li 添加到 ul 里面,再利用浮动运动框架将数据动态的显示出来。
代码:
- <head runat="server">
- <title></title>
- <style type="text/CSS">
- *
- {
- margin: 0;
- padding: 0;
- }
- #ul1
- {
- width: 300px;
- height: 300px;
- border: 1px solid black;
- margin: 10px auto;
- overflow: hidden;
- }
- #ul1 li
- {
- list-style: none;
- padding: 4px;
- border-bottom: 1px #999 dashed;
- overflow: hidden;
- opacity: 0;
- }
- </style>
- <script type="text/javascript">
- window.onload = function () {
- var btn = document.getElementById('btn');
- var txt = document.getElementById('t1');
- var oUl = document.getElementById('ul1');
- btn.onclick = function () {
- var cLi = document.createElement('li');
- cLi.innerhtml = txt.value; //将数据添加到li里面
- txt.value = '';
- if (oUl.children.length > 0) { //判断是否已经有li,如果有那么就插入,如果没有那么就新建
- oUl.insertBefore(cLi, oUl.children[0]);
- } else {
- oUl.appendChild(cLi);
- }
- var iHeight = cLi.offsetHeight; //获得li的高度
- cLi.style.height = '0';
- move(cLi, { height: iHeight }, function () { //然后利用浮动运动将数据显示出来
- move(cLi, { opacity: 100 });
- });
- }
- }
- //------------------------------------------------------------------------------------
- //获取非行间样式
- function getStyle(ojb, name) {
- if (ojb.currentStyle) {
- return ojb.currentStyle[name];
- }
- else {
- return getComputedStyle(ojb, false)[name];
- }
- }
- //缓冲运动json的应用
- //json{attr,finsh}
- //json{width:200,height:200}
- function move(obj, json, fnName) { //obj是对象,Json是对象的属性, fnName是函数
- clearInterval(obj.timer); //关闭之前的计时器
- obj.timer = setInterval(function () {
- var timeStop = true; //记录属性是否都已经执行完成
- for (var attr in json) { //遍历json中的数据
- var oGetStyle = 0;
- if (attr == 'opacity') { //判断透明度
- oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //透明度取整,然后转换完后赋值
- }
- else {
- oGetStyle = parseInt(getStyle(obj, attr));
- }
- var speed = (json[attr] - oGetStyle) / 5; //求速度
- speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整
- if (oGetStyle != json[attr])
- timeStop = false;
- if (attr == 'opacity') { //透明度
- obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; //给透明度赋值
- obj.style.opacity = (oGetStyle + speed) / 100;
- }
- else {
- obj.style[attr] = oGetStyle + speed + 'px'; //移动div
- }
- }
- if (timeStop) { //如果所有属性都已经执行完成,那么就关闭计时器
- clearInterval(obj.timer);
- if (fnName) { //当关闭计时器后要执行的函数
- fnName();
- }
- }
- }, 30)
- }
- //------------------------------------------------------------------------------------
- </script>
- </head>
- <body>
- <textarea id="t1"></textarea>
- <input type="button" id="btn" value="发布" />
- <ul id="ul1">
- <li style="display: none;"></li>
- </ul>
- </body>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/277853.html