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 相关文章推荐
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
Angular2数据绑定详解
Apr 18 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
Vue实现todo应用的示例
Feb 20 Vue.js
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
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php遍历CSV类实例
2015/04/14 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
php session 写入数据库
2016/02/13 PHP
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
python局域网ip扫描示例分享
2014/04/03 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
安全生产责任书范本
2014/04/15 职场文书
高中生班主任评语
2014/04/25 职场文书
对教师的评语
2014/04/28 职场文书
食品安全承诺书
2014/05/22 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
邀请函的格式
2015/01/30 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
golang 实现时间戳和时间的转化
2021/05/07 Golang
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python