零基础学做网站培训介绍

当前位置:

JQUERY控制li栏目项随机顺序显示

通常情况下,我们制作一个网站的列表时,它的顺序是固定的。它的顺序就是按照我们代码的顺序来排列的,如果想让这些固定的栏目项无序排列,就可以通过JQUERY控制li栏目项随机顺序显示。

JQUERY控制li栏目项随机顺序显示

实现固定li栏目进行随机顺序排序,可以使用以下的代码对li栏目进行控制。


<script>
  jQuery(function($){
       var arr = $('ul li').toArray();
       var len = arr.length;
       var rand = parseInt(Math.random()*(len));
       $('ul li').each(function(i){
            $('ul').append($('ul li').eq(rand));
            rand = parseInt(Math.random()*(len));
       });
       
});
</script>

通过这个代码,就可以实现页面刷新一次,li栏目项随机排序一次的效果了。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在自己建网站过程中,由于版面限制,很多内容需要制作成一TAB选项卡,这样在同样一个尺寸的版块,可以显示成倍的内容。TAB选项卡在很多在的大量网站中
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下如何使用一个CSS样式来控制多个DIV。在网页制作过程中,写CSS追求代码简洁,如果多个
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下CSS控制文字水平居中、垂直居中。CSS控制文字水平居中,需要使用text-align属性,其
  • 插件介绍在网站中插入幻灯片可以让网站更加绚丽,例如学做网站论坛首页顶部左侧就是一个幻灯片,这种方式是直接借助js文件,然后嵌入到网站主题中的.
  • 大家都知道Linux主机实现301重定向相对较简单,如果你使用的是Linux主机,那么在设置固定连接的时候,wordpress后台会自动添加以下函数到.htaccess文
  • Wordpress 幻灯片插件-Slider Revolutionr介绍Slider Revolutionr是一个具有视差功能的幻灯片插件,此插件是wordpress上目前为至特别强大的幻灯片插
  • 用wordpress程序建站时,往往很难去设置产品的大小、重量、单价等参数,好在wordpress有一个自定义栏目功能。我们可以通过wordpress自定义栏目给产品
  • dedecms如何添加栏目 图文教程 (115355 次浏览)
    网站栏目是网站的必要部分,它会出现在网站导航上,它将网站的所有内容分类统计显示,引导网站用户浏览。同时他还是网站地图,在后台生成的百度Sitema
  • 在学习DedeCMS教程过程中,调用全站的最新文章时,程序会自动调用网站中所有已发布的文档,如果我们不想调用某个栏目下的文章时,应该如何操作呢?
  • wordpress程序是一个比较高效的网站制作程序,在学员学习如何做网站的时候,可以使用wp程序作为自己的首选建站程序,只要熟练的运用它的网站代码就可
  • 一些个人单页网站制作的学员,要实现每当用户打开单页网站时,随机显示多个二维码中的一个,刷新一次就随机更换一个。并且单页内容中的微信号也跟着自
  • 通常情况下,我们制作一个网站的列表时,它的顺序是固定的。它的顺序就是按照我们代码的顺序来排列的,如果想让这些固定的栏目项无序排列,就可以通过
  • CSS选择器种类在网页设计和网站制作过程中,会使用CSS来控制网页的显示样式,CSS选择器的种类可以分为三大类: 标签名选择器 类选择器 ID选
  • css样式书写顺序 图文教程 (16505 次浏览)
    在自己建网站时,我使用使用CSS样式来控制HTML的显示样式。css样式中有很多的样式属性,在书写css样式时,需要按照一定的Web前端开发规范进行书写,有
  • 插件介绍wordpress的分类目录顺序默认情况下是无法控制的,这就导致了我们在前台调用分类目录时,顺序很难达到我们自己的要求。Taxonomy Order这个
  • 在我们学做网站的过程中,通过图片的后缀名我们很轻松的了解图片是什么格式的,想要替换的时候,很就简单了。但有的同学的电脑里的图片等文件并没
  • 很多同学在模板制作的过程,都有图片调用不出来的现象,其实原因很简单,就是图片路径错误造成的。这里涉及到html和css中的一些路径知识,这个视
  • page页面可以单独使用不同页面模板,这个我们都知道了,那怎么给不同的single文章页面设计不同模板呢?我们有二种方法: 第一种:通过代码来判断