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 相关文章推荐
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jquery插件格式实例分析
Jun 16 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
原生js实现照片墙效果
Oct 13 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
ajax php 实现写入数据库
2009/09/02 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
使用Python下载Bing图片(代码)
2013/11/07 Python
Python 加密与解密小结
2018/12/06 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
倩碧英国官网:Clinique英国
2018/08/10 全球购物
高三家长寄语
2014/04/03 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
个人德育工作总结
2015/03/05 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
Python创建SQL数据库流程逐步讲解
2022/09/23 Python