js实现类似新浪微博首页内容渐显效果的方法
本文实例讲述了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程序设计有所帮助。
相关推荐
-
Js仿新浪微博首页内容滚动
然后在新浪微博首页仍然在使用哦,可能我写的代码还不是最佳优化状态,但是我觉得这已经不错了. 仿新浪微博首页内容滚动 body{background:#efc;} ------------------------------------- --------------------------------------- --------------------------------------- /*--------------新鲜事滚动----------------*/ var _num=_n
-
javascript实现在下拉列表中显示多级树形菜单的方法
本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法.分享给大家供大家参考.具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS控制输出,如果你有更好的办法不用JS来显示,那最好了,因为像这种菜单用JS来实现,多多少少有点麻烦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
-
js 新浪的一个图片播放图片轮换效果代码
核心代码 复制代码 代码如下: function slide(src,link,text,target,attr,desc) { this.desc = desc this.src = src; this.link = link; this.text = text; this.target = target; this.attr = attr; if (document.images) { this.image = new Image(); } thi
-
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam
-
javascript 新浪背投广告实现代码
今天查看了下新浪的js代码,发现一个背投的广告类代码,不论是从学习角度还是使用角度都是不错的,但发现了一个问题,会被屏蔽的.下面是具体的js类代码 复制代码 代码如下: /* 轮播背投类 RotatorPB v3.1 Update by Dakular <shuhu@staff.sina.com.cn> 2008-8-25 格式:new RotatorPB(广告数组) 说明:第一次访问随机出现,以后访问顺序轮播:自动过滤过期广告:cookie时间24小时:商业广告数量不足时不显示 */ if(
-
javascript简单实现滑动菜单效果的方法
本文实例讲述了javascript简单实现滑动菜单效果的方法.分享给大家供大家参考.具体如下: 整个javascript代码共42行,其中主要函数Slide代码26行,可以改进哦! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&
-
javascript实现类似于新浪微博搜索框弹出效果的方法
本文实例讲述了javascript实现类似于新浪微博搜索框弹出效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
js实现的仿新浪微博完美的时间组件升级版
这个时间组件以前发过一次,上次那个很烂,这次有时间了,把这个升级了,性能更好,完美兼容所有浏览器,ie6下拉select档不住的问题 也解决了.总之,差不多也算一个完美的时间组件, 在线demo nothingDemo 突然发现下面的代码里面有个运行代码可以看在线demo,就再最下面 然后贴出源码,只有一点简单的说明 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht
-
仿新浪微博登陆邮箱提示效果的js代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8
-
js实现类似新浪微博首页内容渐显效果的方法
本文实例讲述了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,因为高度
-
jquery实现通用的内容渐显Tab选项卡效果
本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果.分享给大家供大家参考.具体如下: 这是一款网页常用的TAB选项卡功能,无鼠标操作的时候它可以自动轮换,美化一般,看上去有些粗糙,有兴趣使用的朋友可以进行细致修饰,相信会更漂亮的. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-info-tab-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X
-
JS实现仿新浪微博发布内容为空时提示功能代码
本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本功能让人感觉网页很智能,在和你对话一样,很人性化.本特效引用了一个外部了JS封装类,你可下载到本地使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fsina-info-submit-empty-style-codes/ 具体代码如下:
-
js实现九宫格图片半透明渐显特效的方法
本文实例讲述了js实现九宫格图片半透明渐显特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>九宫格图片半透明渐显效果</title> <body> <STYLE type=text/css>.invisible { FILTER: alpha(opacity=0) } </STYLE> <SCRIPT language=JavaScript1.2> <!-- f
-
C#实现类似新浪微博长URL转短地址的方法
本文实例讲述了C#实现类似新浪微博长URL转短地址的方法.分享给大家供大家参考.具体如下: 一.前台判断用户输入URL的JS代码如下. function CheckInput() { var $txtLength = $("#inp_text").val().length; if ($txtLength > 10) { var url = $("#inp_text").val(); var xx = url.match(RegExp("((news|
-
jQuery实现的感应鼠标悬停图片色彩渐显效果
本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
-
JS实现类似51job上的地区选择效果示例
本文实例讲述了JS实现类似51job上的地区选择效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>地区选择效果</title></head> <meta http-equiv="Content-Type" content="text/html;
-
jQuery实现带渐显效果的人物多级关系图代码
本文实例讲述了jQuery实现带渐显效果的人物多级关系图.分享给大家供大家参考.具体如下: 这里演示jQuery实现带渐显效果的人物多级关系图,setQuestPose:function中的n代表共几个对象 r代表周长 i代表第几个对象 w代表外面对象的宽带 h代表外面对象的高度 d代表其实角度,测试时请注意,如果右下角提示有错误,请重新刷新页面即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-gxt-style-d
-
jquery简单实现带渐显效果的选项卡菜单代码
本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码.分享给大家供大家参考.具体如下: 带渐显效果的选项卡菜单,使用了jQuery共同完成的效果,鼠标点击选项卡之后,出现渐变(淡入淡出效果),让网页看上去更生动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-cha-style-tab-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T