仿win8的磁铁效果

阅读更多

最近做了一个仿win8的磁铁效果
使用seajs封装模块，，并且通过传参做到通用。

js代码如下：

//@charset "utf-8"
define(function(require,exports,module){

function initCt(wrapSelectStr,wrapInner,topValue,into)
{

$(wrapInner).mouseover(function(){
$(this).attr("notMoveFlag", 1);
$(this).find(into).show();
});
$(wrapInner).mouseout(function(){
$(this).attr("notMoveFlag", 0);
$(this).find(into).hide();
});


// 设置每一秒随机移动某个磁贴
setInterval(function(){
// 随机获取某个class=wrap的div
var wrap = $(wrapSelectStr);
var wrapLen = $(wrapSelectStr).length;
var index = Math.floor(Math.random() * wrapLen);
var randomWrap = wrap.eq(index);
// 调用移动事件
tileMove(randomWrap,wrapInner,topValue);
}, 1000); 
}

function tileMove(wrap,wrapInner,topValue)
{
var wrapInner = wrap.find(wrapInner);
// 获取wrapInner的高度
var wrapInnerHeight = wrapInner.height();
// 不移动磁贴标签不为1的时候才移动
if (wrapInner.attr("notMoveFlag") != 1) {
// 如果top为auto，则设置移动一个磁贴的高度
if (wrapInner.css("top") == 'auto') {
var top = "-" + topValue + "px";
} else {
// 如果移到了最后一个磁贴，移动到第一个磁贴
if (wrapInnerHeight <= -parseInt(wrapInner.css("top")) + topValue) {
var top = "0px";
// 移动一个磁贴
} else {
var top = (parseInt(wrapInner.css("top")) - topValue) + "px";
}
}
//使用animate事件使得磁贴向上移动
wrapInner.animate({
top : top
}, 500);
}
}

exports.initCt=initCt;

});

 

html结构：
页面调用seajs

 

        

            
            
投资机会深度挖掘
                
明星分析师随时待命，不再错过任何热点！
            
点击进入
            
            
            
投资机会深度挖掘
                
美国白宫向三一重工下了总计285亿美元的水稻收
割机订单...
            
点击进入
            
        
        
        

        

            
            
投资策略报告
                
同花顺首席分析师
亲自撰写每周一期，
让您投资不再迷茫！
            
点击进入
            
            
            
投资策略报告
                
同花顺首席分析师
亲自撰写每周一期，
让您投资不再迷茫！
            
点击进入
            
        
        

 

css部分代码：
主要的这些：

.adv-out{width:290px; height:130px; float:left; margin-right:8px; margin-top:20px; display:inline; overflow:hidden; position:relative;}
.adv-list{ position:relative; top:0;  overflow:hidden; z-index:10; }
.adv-pic{ position:relative; width:290px; height:130px; display:block; overflow:hidden; z-index:99;}