首页 > 代码库 > 一个随机上翻的小效果

一个随机上翻的小效果

2024-07-03 15:20:24   224人阅读

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%‘}, function() {
                        numFn();
                        overFn();
                    })
                }, config.upRandomTime);
            }
            new upoverFn();
        }
    }(jQuery))
    $(function() {
        $(".overRandom").overRandom({
            upRandomTime: 3000
        });
        $(".overRandom1").overRandom();
        $(".overRandom2").overRandom();
    })

 


联系
我们