js实现类似新浪微博首页内容渐显效果的方法


Posted in Javascript onApril 10, 2015

本文实例讲述了js实现类似新浪微博首页内容渐显效果的方法。分享给大家供大家参考。具体分析如下:

要点一:

if(list_li.length>=1){
list.insertBefore(li,list_li[0]);
}else{
list.appendChild(li);
}

从在前面插入新内容,如果没有新内容,就是在后面插入新内容。

要点二:

var height=li.offsetHeight;
li.style.height='0';

取得li的高度,然后再li的高度设置为0,因为高度的变化是从0到现有高度。

要点三:

startrun(li,"height",height,function(){
startrun(li,"opacity","100");
})

先是高度变化,再是透明度变化

最后,上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
<!--
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
#list{width:400px; margin:10px auto;}
#list li{list-style:none; padding:5px 0 ;
overflow:hidden; border-bottom:1px dotted #ccc;
filter:alpha(opacity:0); opacity:0; vertical-align:middle;}
-->
</style>
<script>
<!--
window.onload = function(){
 var btn = document.getElementById("btn");
 var con = document.getElementById("con");
 var list = document.getElementById("list");
 var list_li = list.getElementsByTagName("li");
 btn.onclick = function(){
  var li = document.createElement("li");
  li.innerHTML = con.value;
  con.value='';
  if(list_li.length>=1){
   list.insertBefore(li,list_li[0]);
  }else{
   list.appendChild(li);
  }
  var height=li.offsetHeight;
  li.style.height='0';
  startrun(li,"height",height,function(){
   startrun(li,"opacity","100");
  })
 }
}
function getstyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 }else{
  return getComputedStyle(obj,false)[name];
 }
}
function startrun(obj,attr,target,fn){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
  var cur = 0;
  if(attr == "opacity"){
   cur = Math.round(parseFloat(getstyle(obj,attr))*100);
  }else{
   cur = parseInt(getstyle(obj,attr));
  }
  var speed = (target-cur)/8;
  speed = speed>0?Math.ceil(speed):Math.floor(speed);
  if(cur == target){
   clearInterval(obj.timer);
   if(fn){
    fn();
   }
  }else{
   if(attr == "opacity"){
    obj.style.filter = "alpha(opacity="+(cur+speed)+")";
    obj.style.opacity = (cur+speed)/100;
   }else{
   obj.style[attr] = cur + speed + "px";
   }
  }
 },30)
}
//-->
</script>
</head>
<body>
<textarea id="con" cols="50" rows="5"></textarea>
<input id="btn" name="" type="button" value="发布">
<ul id="list">
</ul>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
用js做一个小游戏平台 (一)
Dec 29 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 #Javascript
js简单的点击返回顶部效果实现方法
Apr 10 #Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 #Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 #Javascript
JavaScript 变量、作用域及内存
Apr 08 #Javascript
JavaScript Function函数类型介绍
Apr 08 #Javascript
JavaScript 模块化编程(笔记)
Apr 08 #Javascript
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
php实现留言板功能
2017/03/05 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
浅谈django orm 优化
2018/08/18 Python
python能开发游戏吗
2020/06/11 Python
Unix如何在一行中运行多个命令
2015/05/29 面试题
大学军训感言
2014/01/10 职场文书
大学校庆邀请函
2014/01/11 职场文书
户籍证明的格式
2014/01/13 职场文书
关于廉洁的广播稿
2014/01/30 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
设计师求职信
2014/07/01 职场文书
创先争优个人承诺书
2014/08/30 职场文书
怎样写离婚协议书
2014/09/10 职场文书
先进党组织事迹材料
2014/12/26 职场文书
新兵入伍决心书
2015/09/22 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书