仿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

<script src="dist/sea.js"></script>

<script type="text/javascript">
seajs.use("./js/tile.js",function(ex){
ex.initCt(".adv-out",".adv-list","130",".into");
});

</script>

 

<div class="adv-out">
        <div class="adv-list">
            <a href="#" class="adv-pic chance">
            <h2 class="adv-title yahei">投资机会深度挖掘</h2>
                <p class="adv-text">明星分析师随时待命，不再错过任何热点！</p>
            <div class="into yahei">点击进入</div>
            </a>
            <a href="#" class="adv-pic chance2">
            <h2 class="adv-title yahei">投资机会深度挖掘</h2>
                <p class="adv-text">美国白宫向三一重工下了总计285亿美元的水稻收<br />割机订单...</p>
            <div class="into yahei">点击进入</div>
            </a>
        </div>
        </div>
        <div class="adv-out">
        <div class="adv-list">
            <a href="#" class="adv-pic report">
            <h2 class="adv-title yahei">投资策略报告</h2>
                <p class="adv-text">同花顺首席分析师<br />亲自撰写每周一期，<br />让您投资不再迷茫！</p>
            <div class="into yahei">点击进入</div>
            </a>
            <a href="#" class="adv-pic report2">
            <h2 class="adv-title yahei">投资策略报告</h2>
                <p class="adv-text">同花顺首席分析师<br />亲自撰写每周一期，<br />让您投资不再迷茫！</p>
            <div class="into yahei">点击进入</div>
            </a>
        </div>
        </div>

 

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;}