使用Jquery设计列表

亦凉 2024-02-17 18:44 50阅读 0赞

1、**截取文字内容**实现控制列表宽度

使用的技术

1、 jQuery的ready（）函数—文档加载完成  
2、 jQuery的each（）函数—遍历jQuery对象  
3、 jQuery的text（）函数—所有匹配元素的内容

$(document).ready(function())\{  
$(“.list”).each(function()\{  
Var inText=$(this).text();//获取<span>中的文字内容  
if(inText.length>10)  
\{  
$(this).text(inText.substr(0,10)+”…”)  
\}  
\})  
\});

2、修改层的宽度控制列表的宽度

可以把所有列表项所在的层设置为长度相同，这样截取出来的列表项宽度就一致了。

功能实现：  
1、 先使用 ready()函数加载整个页面  
2、 在function()内部使用each函数遍历列表项  
3、 判断每个列表项的整体宽度是否DAU预定宽度  
4、 如果大于，计算出列表项第一部分需要的长度并设置  
5、 适当调整每个列表项的高度

$( function()\{

var linelen=120;

$.each($(“.list”),function(i)

If(($(“.suone:eq(“+i+”)”).width()+$(“.subtwo:eq(“+i+”)”).width())>linelen())

)

(太复杂，自行百度)

\})

3、控制列表项符号图片  
利用jQuery与css控制列表项符号图片  
原理：利用jQuery为 每个列表项动态加载CSS样式背景图片，并把原有的列表项符号隐藏  
  
jQueryde addClass函数—添加样式类的选择

语法：addClass(class|fn)  
例：

4、列表项的滚动  
让静态列表滚动起来，出现滚动新闻的效果。  
列表项滚动一般适用于实时更新的网站内容标题  
使用jQuery产生滚动列表的原理是两个动作：隐藏与添加。  
步骤：  
1、 先需要取得列表的滚动区间  
2、 使用jQuery的hover函数分别响应鼠标的悬停与离开事件  
3、 在鼠标悬停时间中获取滚动内容的第一列表项，将隐藏的第一列表项添加到整个列表的结尾  
4、 设定滚动间隔，及滚动过程中的动画持续事件  
$(function()  
\{  
var area=$('ul.scorllline');//取得滚动区域  
var timespan=1000;//定义滚动时间间隔  
var timeID;//需要清除的动画  
area.hover(  
function()\{  
clearInterval(timeID);//当鼠标在滚动区域中停止滚动，移出事件处理  
\},  
function()  
\{//悬停事件处理  
timeID=setInterval(function()\{//设置滚动时间间隔及滚动动作  
var moveline=area.find('li:first');  
var lineheight=moveline.height();//获取每次滚动的高度  
moveline.animate(\{marginTop:-lineheight+'px'\},500,  
function()\{  
moveline.css('marginTop',0).appendTo(area);  
\})  
  
\},timespan)  
\}).trigger('mouseleave');  
  
\});  
  
  
  
  
14.4图片列表  
大小不一的图片实现图片大小统一规则摆放  
原理：为每张图片设定一个相同大小的显示区域，并把这些显示区域通过列表的形式规则摆放。  
.imglist\{float: left;width: auto;list-style: none\}  
.imglist li\{float:left;width: auto;margin: 3px;text-align: center\}  
.imglist li .area\{height: 250px;width: 200px;display: block\}  
  
  
14.5 列表的显示与收缩  
页面加载完成后 ，某一部分只显示大的标题。当把鼠标移动到标题上，会在标题下动态的出现列表的信息项。  
使用ready(),hover(),或者toggle()、slideDown()、slideUp()  
  
  
14.6 列表项的动态排序  
使用的函数ready(),get(),text(),each(),append(),javascript函数sort()  
  
  
1、 jQuery函数get()—获取匹配元素集合  
语法：object.get()  
2、 jQuery函数text（）--获取和设置元素的内容  
语法：object.text(\[val|fn\])  
3、 jQuery函数append()—向元素末尾追加内容  
object.append(\[content|fn\])  
  
  
javascript函数sort()—元素排序  
arrayObject.sort(\[sortby\])  
  
  
实现无序列表排序功能如下  
1、 获取所有的列表项，并将其装入数组  
2、 对数组对象进行排序  
3、 将排好序的数组重新填充到无序列表中  
  
  
  
  
ready(function()\{  
var items=$(“.orderobj li”).get();//获取所有排序li装如数组item  
items.sort(function(a,b)\{  
var one=$(a).text();  
var two=$(b).text();  
if(one>two) return 1;  
else return -1;  
  
  
\})  
Var ul=$(“.oorderobj”);  
$.each(items,function(i,li)  
\{  
ul.append(li);  
\})  
\})