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 相关文章推荐
Augularjs-起步详解
Jul 08 Javascript
js格式化时间的简单实例
Nov 27 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
react antd实现动态增减表单
Jun 03 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
css图片自适应大小
2007/11/28 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
Cookies 和 Session的详解及区别
2017/04/21 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
详解python中@的用法
2019/03/27 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
荷兰手表网站:Watch2Day
2018/07/02 全球购物
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
公证书样本
2014/04/10 职场文书
大学生学习计划书
2014/09/15 职场文书
领导班子整改措施
2014/10/24 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python