js效果名称（单击时js怎么更改li里的class名称并显示出来应用该类的效果）

本文目录

• 单击时js怎么更改li里的class名称并显示出来应用该类的效果
• JS这种效果叫什么
• 求类似于新浪微博的JS效果

单击时js怎么更改li里的class名称并显示出来应用该类的效果

javascript中className属性可以获取和设置对象的类名，下面进行实例演示：单击li元素，该元素在red类之间切换（即单击一次显示红色，再次单击恢复原来的颜色，如此循环）。

1、HTML结构

《ul》
《li》Glen《/li》
《li》Tane《/li》
《li》John《/li》
《li》Ralph《/li》
《/ul》

2、主要的css类

li{margin:5px;list-style: none;}
.red{color:red !important;}

3、javascript代码

window.onload = function(){
obj_li = document.getElementsByTagName("li"); // 获取li对象数组
for(k in obj_li)
obj_li.onclick=function(){  // 为每个li注册单击事件
this.className = this.className == "red"? "" : "red";    // 如果当前类为red，则取消当前类；否则，为当前元素添加red类
}
}

4、效果展示

JS这种效果叫什么

百度百科里叫sideToolbar

下面是完整的代码，你保存成baidubaike.html，然后再浏览器中打开就可以看到一样的效果了，你要是想实现这种效果，加上动态语言就可以了。css你可以自己下载。

《html》
《head》
《link
href="
type="text/css" rel="stylesheet"》
《/head》
《body》
《div id="sideToolbar"
style="display: block; position: fixed; top: 307px; left: 1000px;"》
《div id="sideCatalog" class="sideCatalogBg"
style="visibility: visible;"》
《div id="sideCatalog-sidebar"》
《div class="sideCatalog-sidebar-top"》《/div》
《div class="sideCatalog-sidebar-bottom"》《/div》
《/div》
《div id="sideCatalog-updown" style="visibility: hidden;"》
《div id="sideCatalog-up" class="sideCatalog-up-disable" title="向上翻页"》《/div》
《div id="sideCatalog-down" class="sideCatalog-down-enable"
title="向下翻页"》《/div》
《/div》
《div id="sideCatalog-catalog"》
《dl style="width: 175px; zoom: 1"》
《dd class="sideCatalog-item1" id="sideToolbar-item--1"》
《span class="sideCatalog-index1"》1《/span》《a href="#1"
class="nslog:1026" title="成长经历" onclick="return false;"》成长经历《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--1_1"》
《span class="sideCatalog-index2"》1.1《/span》《a href="#1_1"
class="nslog:1026" title="早年生活" onclick="return false;"》早年生活《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--1_2"》
《span class="sideCatalog-index2"》1.2《/span》《a href="#1_2"
class="nslog:1026" title="初露锋芒" onclick="return false;"》初露锋芒《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--1_3"》
《span class="sideCatalog-index2"》1.3《/span》《a href="#1_3"
class="nslog:1026" title="曼联新秀" onclick="return false;"》曼联新秀《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--1_4"》
《span class="sideCatalog-index2"》1.4《/span》《a href="#1_4"
class="nslog:1026" title="世界扬名" onclick="return false;"》世界扬名《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item1" id="sideToolbar-item--2"》
《span class="sideCatalog-index1"》2《/span》《a href="#2"
class="nslog:1026" title="运动生涯" onclick="return false;"》运动生涯《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--2_1"》
《span class="sideCatalog-index2"》2.1《/span》《a href="#2_1"
class="nslog:1026" title="俱乐部生涯" onclick="return false;"》俱乐部生涯《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--2_2"》
《span class="sideCatalog-index2"》2.2《/span》《a href="#2_2"
class="nslog:1026" title="国家队生涯" onclick="return false;"》国家队生涯《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item1" id="sideToolbar-item--3"》
《span class="sideCatalog-index1"》3《/span》《a href="#3"
class="nslog:1026" title="技术特点" onclick="return false;"》技术特点《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item1" id="sideToolbar-item--4"》
《span class="sideCatalog-index1"》4《/span》《a href="#4"
class="nslog:1026" title="职业数据" onclick="return false;"》职业数据《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--4_1"》
《span class="sideCatalog-index2"》4.1《/span》《a href="#4_1"
class="nslog:1026" title="俱乐部数据" onclick="return false;"》俱乐部数据《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--4_2"》
《span class="sideCatalog-index2"》4.2《/span》《a href="#4_2"
class="nslog:1026" title="国家队数据" onclick="return false;"》国家队数据《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item1" id="sideToolbar-item--5"》
《span class="sideCatalog-index1"》5《/span》《a href="#5"
class="nslog:1026" title="荣誉记录" onclick="return false;"》荣誉记录《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--5_1"》
《span class="sideCatalog-index2"》5.1《/span》《a href="#5_1"
class="nslog:1026" title="国家队荣誉" onclick="return false;"》国家队荣誉《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--5_2"》
《span class="sideCatalog-index2"》5.2《/span》《a href="#5_2"
class="nslog:1026" title="俱乐部荣誉" onclick="return false;"》俱乐部荣誉《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--5_3"》
《span class="sideCatalog-index2"》5.3《/span》《a href="#5_3"
class="nslog:1026" title="个人荣誉" onclick="return false;"》个人荣誉《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item2" id="sideToolbar-item--5_4"》
《span class="sideCatalog-index2"》5.4《/span》《a href="#5_4"
class="nslog:1026" title="个人记录" onclick="return false;"》个人记录《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item1" id="sideToolbar-item--6"》
《span class="sideCatalog-index1"》6《/span》《a href="#6"
class="nslog:1026" title="场外生活" onclick="return false;"》场外生活《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《dd class="sideCatalog-item1" id="sideToolbar-item--7"》
《span class="sideCatalog-index1"》7《/span》《a href="#7"
class="nslog:1026" title="评价" onclick="return false;"》评价《/a》《span
class="sideCatalog-dot"》《/span》
《/dd》
《/dl》
《/div》
《/div》
《a id="sideCatalogBtn" href="javascript:void(0);"
style="visibility: visible;" class=""》《/a》《a id="sideToolbar-up"
href="javascript:void(0)" style="visibility: visible;"》《/a》
《/div》
《/body》
《/html》

求类似于新浪微博的JS效果

其实它那个只不过是个显示效果而异，这你是只知道，即然数据你获取了，那么只是一个显示出来的问题的。下面是我的网站的一段代码，这段代码的作用就是产品滚动（走马灯效果），但与众不同的是我这个效果可以定时滚动一格（行），跟你要的效果类似。
我的代码可以设置为2秒钟向上磙动一行图片，再2秒继续，你可以跟据你的情况稍做修改，即可使用。
《div style="border:1px solid #BBBBBB;border-bottom-width:0px;border-top-width:0px;"》
《div style="margin:0 10px;line-height:18px;"》
《div id="gu" style="width:760px;height:120px;overflow:hidden;"》
《div id="gu1" style="width:760px;height:240px;"》
《%
OpenRs("Select Top 10 ID,ClassID,ProductName,Pic From Product Where Recommend=1 Order By ID Desc")
If Rs.Eof Then
Rw "暂时没有任何推荐产品数据！"
Else
Col=0
Do While Not Rs.Eof
%》
《div style="float:left;width:143px;"》
《div style="width:100px;height:100px;border:1px solid #D5E8FB;margin-top:0px;margin-left:21px;"》
《a href="Product.asp?ClassID=《%=Rs("ClassID")%》&ID=《%=Rs("ID")%》" target="_blank" title="点击查看详细信息"》《img src="《%=Rs("Pic")%》" width="100" height="100" border="0"》《/a》
《/div》
《div style="height:20px;text-align:center;"》
《a href="Product.asp?ClassID=《%=Rs("ClassID")%》&ID=《%=Rs("ID")%》" target="_blank"》《span style="font-size:13px;color:#FF6633;font-weight:bold;" title="点击查看详细信息"》《%=strLeft(Rs("ProductName"),20)%》《/span》《/a》
《/div》
《/div》
《%
Rs.MoveNext
Loop
End If
CloseRs()
%》
《/div》
《div style="clear:both;"》《/div》
《div id="gu2" style="width:760px;height:240px;"》
《/div》
《/div》
《script language="javascript"》
var seep=24;
var gu=$("gu");
var gu1=$("gu1");
var gu2=$("gu2");
gu2.innerHTML=gu1.innerHTML;
function MarGun()
{
if (gu.scrollTop==120){Pause();}
else if (gu.scrollTop==240){Pause();}
if(gu.scrollTop》=gu1.offsetHeight)
gu.scrollTop=0;
else{gu.scrollTop++}
}
var MyMars
Pause();
function Pause()
{
clearInterval(MyMars);
setTimeout(’Contin()’,2500);
}
function Contin()
{
gu.scrollTop++;
MyMars=setInterval(MarGun,seep);
}
《/script》
《/div》
下面的JS代码看似没多少，但很另人头痛，我不知费了多少脑细胞改写出来，（大型网站已有这种效果，但我不想抄别人的，我想偿试自己动手写，经过一下午努力，被我写出来了。）