打印

[求助] 帮忙分析下淘宝商城的类表页面得:hover效果

帮忙分析下淘宝商城的类表页面得:hover效果
淘宝还是蛮有些技术含量得啊,搞了一天没有研究出他具体是怎么在实现得
效果地址:http://list.mall.taobao.com/1343/g-s-----40-0--1343.htm
希望高手能指点下啊。

a:hover{
...
}
你看了没有啊
就简单的加了个JS的嘛

下面有个预加载的信息
<div class="other-info"></div>

再在<div class="pic"></div> 或者"pic" 下面的<a>便签上加个鼠标移上去的事件,定位"other-info" 就那么回事。。。。

其实直接用a:hover tag{ } 也可以实现.....

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
我做得IE6没有效果啊

TOP

.pic:hover在IE6是行不通得啊
我就郁闷在这里了啊~

TOP

如果你抛开IE6不管已经完成了那个效果的话,那就OK了,提示你一下。
看页面源代码中有一行这样的js来专门针对IE6对hover伪类的支持。
复制内容到剪贴板
代码:
<script type="text/javascript" src="http://assets.mall.taobao.com/assets/j/ie6hover.js?t=20080422.js"></script>
看一下这个javascript的代码,大致的思路是:在IE6下用javascript的onmouseover和onmouseout来弥补ie6对hover的不支持。

[ 本帖最后由 jxdawei 于 2008-5-13 20:36 编辑 ]

TOP

http://assets.mall.taobao.com/assets/j/ie6hover.js?t=20080422.js
复制内容到剪贴板
代码:
TB.namespace("ark.ie6hover");TB.ark.ie6hover=(function(){var A=function(B){B.onmouseover=function(){$D.addClass(this,"hover")};B.onmouseout=function(){$D.removeClass(this,"hover")}};return{init:function(){if(TB.bom.isIE6){var E=$D.getElementsByClassName("ark:list");if(!E){return }for(var D=0;D<E.length;D++){var C=E[D].getElementsByTagName("li");for(var B=0;B<C.length;B++){if(C[B].parentNode!=E[D]){continue}A(C[B])}}}}}})();$E.onDOMReady(function(){TB.ark.ie6hover.init()});
崔凯加油: www.uicss.cn

TOP

啊!  大伟已经回复啦?
崔凯加油: www.uicss.cn

TOP

原来是用JS弄得啊谢谢了啊~
研究了一天IE6了
感谢感谢~~~

一直以为用hack解决,原来走错路了

晕,这段JS怎么用啊~

大伟修改说明:有话一气说完,别一帖帖地顶,还有,不要说脏话,我已经去掉了部分不文雅字眼!

TOP

复制内容到剪贴板
代码:
TB.namespace
看这个就知道,你光用这个js还是不够的,它使用的应该是YUI和淘宝自己的javascript框架。整体性的。
你可以根据这个思路自己去编写一个简单的js。
注意在html中有一个这样的class:
复制内容到剪贴板
代码:
<ul class="product-list ark:list">....</ul>
再看这段js,就能发现首先:
复制内容到剪贴板
代码:
getElementsByClassName("ark:list");//这个getElementsByClassName()方法不是javascript自带的,是自己补充的。
来获取目标,然后:
复制内容到剪贴板
代码:
for (){
//循环遍历列表子项,逐个添加onmouseover、onmouseout事件
}

TOP

爱死你了版主,这样写明白多了,虽然可以丢给程序处理,但我还是喜欢自己研究下。

TOP

老早看国外有个HTC版的
可以应用在地图标注、多级菜单等常用功能上

TOP

高手能把这个效果的JS放出来吗? 我喜欢收集这些效果但自己不会写...

TOP

给一个简单的demo:
http://www.iwcn.net/demo/ie6hover/

其实jQuery中已经有专门的针对hover处理的了,看上边的代码!

TOP

这东西不用js也能办到啊,用伪类的子类选择器啊!但是可能要牺牲标签的标准化

TOP

TOP

引用:
原帖由 jxdawei 于 2008-5-13 21:16 发表
TB.namespace
看这个就知道,你光用这个js还是不够的,它使用的应该是YUI和淘宝自己的javascript框架。整体性的。
使用的是YUI框架,TBra只是用YUI对淘宝一些常用的效果和某些扩展进行了补充。
个人Blog:PlanABC   团队Blog:淘宝UED  专注Web前端技术!

TOP

引用:
原帖由 dowhatyouwant 于 2008-6-16 15:21 发表
看这里:D
http://5key.net/demo/image-mouseover/
这样的结构是不推荐的,强烈不推荐内联元素包含块级元素。
从另外一个角度来看:当IE6没人使用的时候,你是否需要更改你的结构代码呢?因为那是非A元素已经支持hover。
个人Blog:PlanABC   团队Blog:淘宝UED  专注Web前端技术!

TOP