html
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html; charset=uft-8"> <meta name="keywords" content=""> <meta name="description" content=""> <script src="js/jquery.js" type="text/javascript"></script> <title></title> <base target="_blank"> </head> <body> <div class="overRandom"> <div class="oRunit"> <a href="#"> <img src="http://dimgcn2.s-msn.com/imageadapter/w150/wscont2.apps.microsoft.com/winstore//1x/7fb16910-2148-4bb6-b91c-4b517e9da4be/AppTile.1.277209.278332.png"> <div class="oRuContent"></div> </a> </div><div class="oRunit"> <a href="#"> <img src="http://dimgcn4.s-msn.com/imageadapter/w150/wscont2.apps.microsoft.com/winstore//1x/34c7cefc-e358-4d2e-bd5a-32669052108b/AppTile.1.102582.107518.png"> <div class="oRuContent"></div> </a> </div><div class="oRunit"> <a href="#"> <img src="http://dimgcn4.s-msn.com/imageadapter/w150/wscont2.apps.microsoft.com/winstore//1x/02b665ae-5c18-4292-994a-c445f6861ee8/AppTile.1.267086.268135.png"> <div class="oRuContent"></div> </a> </div> </div> <div class="overRandom1"> <div class="oRunit"> <a href="#"> <img src="http://dimgcn2.s-msn.com/imageadapter/w150/wscont2.apps.microsoft.com/winstore//1x/7fb16910-2148-4bb6-b91c-4b517e9da4be/AppTile.1.277209.278332.png"> <div class="oRuContent"></div> </a> </div><div class="oRunit"> <a href="#"> <img src="http://dimgcn4.s-msn.com/imageadapter/w150/wscont2.apps.microsoft.com/winstore//1x/34c7cefc-e358-4d2e-bd5a-32669052108b/AppTile.1.102582.107518.png"> <div class="oRuContent"></div> </a> </div> </div><div class="overRandom2"> <div class="oRunit"> <a href="#"> <img src="http://dimgcn2.s-msn.com/imageadapter/w150/wscont2.apps.microsoft.com/winstore//1x/7fb16910-2148-4bb6-b91c-4b517e9da4be/AppTile.1.277209.278332.png"> <div class="oRuContent"></div> </a> </div><div class="oRunit"> <a href="#"> <img src="http://dimgcn4.s-msn.com/imageadapter/w150/wscont2.apps.microsoft.com/winstore//1x/02b665ae-5c18-4292-994a-c445f6861ee8/AppTile.1.267086.268135.png"> <div class="oRuContent"></div> </a> </div><div class="oRunit"> <a href="#"> <img src="http://dimgcn4.s-msn.com/imageadapter/w150/wscont2.apps.microsoft.com/winstore//1x/34c7cefc-e358-4d2e-bd5a-32669052108b/AppTile.1.102582.107518.png"> <div class="oRuContent"></div> </a> </div> </div> </body> </html>
css:
.overRandom, .overRandom1, .overRandom2 { width: 1000px; margin: 20px auto 0; padding-bottom: 20px; overflow: hidden; border-bottom: #7b337e dashed 2px;} .oRunit { width: 100px; height: 100px; position: relative; margin:0 10px 0 0; _display:inline; float: left; background: #7b337e; overflow: hidden;} .oRunit img { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; display: block;} .oRuContent { position: absolute; background: #7b337e; top: 100%; left: 0; z-index: 101; width: 100%; height: 100%;}
jquery:
(function($) { $.fn.overRandom = function(config) { var element = $(this); var defaults = { control: '.oRunit', //每个单元 controlCon: '.oRuContent', //每个单元上翻的层 upAllTime: 500, //滑过上翻时间 upRandomTime: 1000, //随机上翻时间 upoverHeight: 30 //随机上翻height }; var config = $.extend(defaults, config); var _unitLg = element.find(config.control).length; function upoverFn() { this.create(); this.randomFn(); element.find(config.control).mouseenter(this.elementNumOver).mouseleave(this.elementNumOut); } upoverFn.prototype.create = function() { var that = this; var num, t = 0; that.elementNumOver = function() { var _this = this; num = $(this).index(); that.fnc = function() { that.fn = setTimeout(function() { t+=1; that.fnc(); if(t>0) { $(_this).find(config.controlCon).animate({top: 0}); } }, config.upAllTime); } that.fnc(); } that.elementNumOut = function() { var _this = this; t = 0; clearTimeout(that.fn); setTimeout(function() { $(_this).find(config.controlCon).animate({top: '100%'}); }, config.upAllTime) } } upoverFn.prototype.randomFn = function() { var that = this; var _index = ''; function numFn() { _index = parseInt(Math.random()*_unitLg); function numberFn() { _index = parseInt(Math.random()*_unitLg); if (element.find(config.control).eq(_index).attr('data') == '1') { numberFn(); } } numberFn(); element.find(config.control).removeAttr('data'); element.find(config.control).eq(_index).attr('data', 1); } function overFn() { var overFnCss = { top: $(config.control).outerHeight() - config.upoverHeight } element.find(config.control).eq(_index).find(config.controlCon).animate(overFnCss); }
setInterval(function() {
element.find(config.control).eq(_index).find(config.controlCon).animate({top: '100%'});
numFn();
return overFn();
}, config.upRandomTime);
} new upoverFn(); } }(jQuery)) $(function() { $(".overRandom").overRandom({ upRandomTime: 3000 }); $(".overRandom1").overRandom(); $(".overRandom2").overRandom(); })