zl程序教程

您现在的位置是:首页 >  后端

当前栏目

推荐js实现商品分类到搜索栏友好提示(人机交互)

JS搜索 实现 推荐 分类 提示 商品 友好
2023-06-13 09:13:56 时间
中间的表格代表搜索表单,要实现的是点商品分类后有一个方框指向到搜索栏,用以清楚地告诉用户:点商品分类后是哪里改变了
转载请注明出处blueidea


方框移动
笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电

呵呵,效果很棒,不过在ff下有些小问题,已经改了。加精

方框移动
笔记本 小家电 电冰箱 波比娃娃 小家电 小家电 笔记本 小家电 电冰箱 波比娃娃 小家电 小家电


给加了个鼠标提示
改成div后
方框移动
    笔记本 小家电 电冰箱 波比娃娃 小家电 小家电
    笔记本 小家电 电冰箱 波比娃娃 小家电 小家电


var left=10;//方框左位置
var top=20;//方框上位置

不知道这2个定义的具体的用途是什么?
在严格认证下面,不论怎么调整都是相差了10个PX左右的位差,不知何故?
貌似改过大小之后对效果没有影响。

方框移动
    笔记本 小家电 电冰箱 波比娃娃 小家电 小家电
    笔记本 小家电 电冰箱 波比娃娃 小家电 小家电


加了渐变背景色后速度慢了:


方框移动
rerererer 爱老虎油 野火寒烟 剑气凌人 火焰楼兰 萧萧小雨 筷子一根 心灵鼓手 心开风神 中国丫头 波比娃娃 乱世狂闪 红心男孩


原理:
pixelTop和offsetTop是不一样的,pixelTop实际上是style.top的数字形式。而offsetTop是该对象实际上的偏移量。

而在一开始,这个fk对象的top是undefined的,未定义,所以pixelTop为0,而offsetTop由于body的margin的存在而不是0,实际上就是margin的值。

你如果有看我修改的pj的菜单代码,你也会看到类似的针对原来pixelTop的hack:
http://bbs.blueidea.com/thread-2722578-1-1.html