安静
PHP技术博客

131104 discuz 会员头像展示 – jquery 代码

jquery的使用级别 我一直停留在简单应用,是非常大的弱项,很可悲。
特别是 div 层的图片滚动的计算 。 写这个只是为了赞美 某强大 的JS工程师 桃子 .

discuz会员头像展示主要功能:
将一组A标签 以6个为单位分割 并且组建新的div 进行互换展示 支持鼠标的停留

discuz会员头像展示效果图片:

jsxiaoguo

discuz会员头像展示代码:

lewaStar=function(){
		var targetArea=$("#fly_stars");
		alert(targetArea);
		var elems = $('.lewabbs-star'), parts = [],i=0;
		do{
			parts[i] = elems.splice(0,6);
			$('<div class="star-block"></div>').append(parts[i]).appendTo(targetArea);
			i++;
		}while(elems.length>0);
		var objs = $('.star-block');
		var t,	 time = 200, delay = 4000, curr = 0,call_x = function(){
			$(objs[curr]).fadeOut(time, call_y);
		}, call_y = function(){
			curr ++;
			if(curr >= objs.length) curr=0;
			$(objs[curr]).fadeIn();
			t = setTimeout(call_x, delay);
		};
		objs.mouseover(function(){
			if(t) clearTimeout(t);
		});
		objs.mouseout(function(){
			t = setTimeout(call_x, delay);
		});
		call_x();
	}

discuz会员头像展示主要过程:

1:timer 定时器的 触发轮换
2:鼠标的 onmouse 和mouseout 处理
3:jquery [object Object] 和 jquery [object HTMLDivElement] 的处理

附加一篇关于 jquery [object Object] 和 jquery [object HTMLDivElement] 的处理 的文章 :

来源:
http://www.cnblogs.com/daisuki/archive/2013/04/04/2999745.html

在使用jQuery时,发现有两种对象,一个是[object Object],另一个是就像[object HTMLDivElement]

前者是jQuery对象,通过jQuery的选择器$(‘selector’)获得;
后者是DOM元素,为 javascript中的getElementById, getElementsByTagName等方法的返回类型。

只有jQuery对象才能使用jQuery的一系列方法,DOM元素是不能用的。 其实,jQuery对象就类似一个数组,它包含了一个或多个与jQuery选择器匹配的DOM元素。

//一个js获取的标签为li的元素数组
var normalArray = document.getElementsByTagName('li');  

//相当于上面的,但是是一个jQuery对象
var jQueryArray = $('li');

//如果是由元素Id获得DOM元素的话,则jQuery对象就像一个长度为1的数组。
//比如,以下三个alert的结果是相同的
alert(document.getElementById('myID'));
alert($('#myID')[0]);
alert($('#myID').get(0));

//*** jQuery对象与DOM元素之间的转换 ***

//返回与 jQuery 选择器匹配的DOM元素的数量
jQueryArray.length;
jQueryArray.size();

//从jQuery对象获得普通的DOM集合,[<li id="foo">, <li id="bar">]
jQueryArray.get();
jQueryArray.toArray();

//根据index获取数组中的某个元素
jQueryArray.get(index);
jQueryArray[index];

//当index是-1时,由于负数index是从数组最后开始算,所以返回数组的最后一个元素
jQueryArray.get(-1);

//当从一个jQuery对象获得一个DOM元素后,把该元素再转变成一个jQuery对象,以便调用jQuery的方法
$(jQueryArray[0]);
赞(0) 打赏
未经允许不得转载:AJ's Blog » 131104 discuz 会员头像展示 – jquery 代码
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    感谢楼主分享

    外教6年前 (2013-11-14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏