链接如下:
http://v.360.cn/360影视首页的焦点图,没有操作css,而是靠scrollLeft来实现,求实现思路,尤其是圆点按钮的mouseover事件函数。
http://v.360.cn/360影视首页的焦点图,没有操作css,而是靠scrollLeft来实现,求实现思路,尤其是圆点按钮的mouseover事件函数。
解决方案 »
- javascript与UTF-8编码问题
- js 离奇的问题....
- 如何给iframe添加事件
- javascript页面跳转IE支持,firefox不支持
- jquery vs prototype 总结
- IE中JS cloneNode的问题,是不是一个bug呢?
- 在html中js引用另一个js中的变量?
- 请帮忙看看这段代码,要的效果是当鼠标经过button时,弹出菜单,请帮忙
- 急急急,请问一般的网页链接里面的加密的参数是怎么实现的?
- 在文本框后有一按鈕點后是一個tree view的目錄,選擇目錄后,文本框的value 是所選的value
- 在网页中插入音频有什么好的办法吗?兼容ie7以上的
- JS 开发常用 PDF 和 CHM 汇总,附下载地址!
var slider = {
init: Function //初始化入口
wrapper: DOM //焦点图的容器
curItem: Number //当前正在显示的序号
itemWidth: Number //项的宽度
totalItem: Number //一共有几项要滚动
next: Function //下一个
prev: Function //上一个
goto: Function //跳转到第几个
onAfterTransition Event//每次滑动结束的事件
onBeforeTransition Event//每次滑动开始之前的事件
}基本就这些属性和方法就足够了,可以考虑写成类,把方法挂到prototype上。
实现goto方法就行,利用当前序号和要跳转到的序号,计算要偏移的像素,scrollLeft也好,left值也好,都无所谓。prev和next都可以直接调用goto去完成。
至于动画,建议用jQ或者其他tween动画插件,愿意的话自己setTimeout去实现也未尝不可,不过自己手动setTimeout要出现变速动画就麻烦了。什么?圆点按钮的mouseover事件?
事件内部获取当前mouseover的圆点是第几个(用jQ的话直接index()就能返回当前元素在兄弟节点中数老几),然后调用goto(n)就行了。
关键就在于goto函数的思路~
比如说,当前正在显示的图片为第2张,当触发第6个圆形按钮的mouseover时候:
(1)一般的滚动会从第2张快速的依次经过第3、4、5张,最后一直滚到第6张停下来;
(2)而这个焦点图的滚动呢,是从第2张直接滚动到第6张,没有经过3、4、5;如果说从2直接到6是靠改变节点顺序实现的话,那打乱后的节点如何在下一次滚动时按正确的顺序进行显示?
和一般滚动在具体实现上还是有些出入的~~,动画应该是一样的,不过在滚动之前的设置应该有所不同~~~切换前进行了位置的调整,用firebug监控就知道了
和一般滚动在具体实现上还是有些出入的~~,动画应该是一样的,不过在滚动之前的设置应该有所不同~~~切换前进行了位置的调整,用firebug监控就知道了
不太容易调~~
刚刚找到源码http://www.jiaoben8.cn/Specia-id266.html,类库果然是自己写的。。
关键就在于goto函数的思路~
比如说,当前正在显示的图片为第2张,当触发第6个圆形按钮的mouseover时候:
(1)一般的滚动会从第2张快速的依次经过第3、4、5张,最后一直滚到第6张停下来;
(2)而这个焦点图的滚动呢,是从第2张直接滚动到第6张,没有经过3、4、5;如果说从2直接到6是靠改变节点顺序实现的话,那打乱后的节点如何在下一次滚动时按正确的顺序进行显示?
是的,这是一个问题。经研究,它确实是打乱了顺序。所以,要解决这个问题,必须用一个映射表来记录实际的顺序和实际的DOM结构中的顺序。以下代码纯手敲的,基本逻辑肯定没问题,有bug的话耐心调试调试slider = {
...
indexMap: [0,1,2,3,4,5,6,7,8,9], //初始化0-9
goto: function(n) {
if(n < 0 && n > this.totalItem) return;
//触发beforeTransiton事件,传递n过去,如果返回false,则表示该动作被阻止了
if(this.emit("beforeTransition",n) === false) return; if(n > curItem){
//往右滑
//以下两步将第n个插入到第curItem个的后面
var li = this.wrapper.find("ul").find("li");
li.eq(this.indexMap[curItem]).after(li.eq(this.indexMap[n])); //以下代码用于修正map数组,使之映射不出问题
var target = this.indexMap[n];
//从n到curItem,将map数组往后移
for(var i=n-1, i>curItem; i--) {
this.indexMap[i+1] = this.indexMap[i];
}
this.indexMap[curItem-1] = target; //现在第n个(实际是第this.indexMap[n]个)移动到curItem后面了
//加一个动画,就ok了
this.wrapper.find("ul").animate({scrollLeft:"+="+this.itemWidth},800,$.proxy(function(){
this.emit("afterTransition",this.curItem); //触发after事件
},this));
this.curItem = n;
} else {
....
....
//else的代码我就不写了
}
}
...
}