这篇文章主要介绍了 js 实现类似新浪微博首页内容渐显效果的方法, 实例分析了渐显效果的实现要点与方法, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: