雲南雲豹網絡科技股份有限公司

爲企業創品牌·從營銷型網站建設開始·互赢懂(dǒng)技術·更懂(dǒng)品牌營銷

24小時(shí)熱(rè)線

159 7210 9576027-89992189

您的(de)位置:首頁 > 新聞資訊 > 行業百科 > 技術百科

使用(yòng)jquery.hoverdir.js實現圖片懸停效果

作者:龍 時(shí)間:2018-07-17 浏覽:

簡介

鼠标滑動圖懸停遮罩層的(de)效果,鼠标從那個(gè)方向來(lái),遮罩層從那個(gè)方向滑入,類似jquery.sHover.js效果,在有的(de)場(chǎng)合使用(yòng)起來(lái)還(hái)是很炫酷的(de);

使用(yòng)方法

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--引入jqury-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <!--modernizr,這(zhè)個(gè)庫不引入時(shí)發現報錯,hoverdir源碼中有Modernizr變量-->
    <script src="js/modernizr.js"></script>
    <!--核心庫hoverdir-->
    <script src="js/jquery.hoverdir.js"></script>

代碼演示

<!--css-->
        body {
            padding-top: 80px;
        }
        
        div[class*='col-'] {
            margin-bottom: 20px;
        }
        
        div[class*='col-'] a {
            display: block;
            width: 100%;
            position: relative;
            background: skyblue;
            border-radius: 8px;
            padding: 12px;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        .content {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .inner {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            background: rgba(180, 180, 180, .6);
            text-align: center;
            color: #fff;
            padding: 12px;
            box-sizing: border-box;
            background-clip: content-box;
            border-radius: 8px;
        }
        
        img {
            width: 100%;
            border-radius: 8px;
            display: block;
        }
        
        
    <!--html-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-md-12">
                <a href="#">
                    <img src="img/g-1.jpg" alt="">
                    <div class="inner">
                        <h3>汽車0</h3>
                        <p>簡介</p>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-md-12">
                <a href="#">
                    <img src="img/g-2.jpg" alt="">
                    <div class="inner">
                        <h3>汽車1</h3>
                        <p>簡介</p>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-md-12">
                <a href="#">
                    <img src="img/g-3.jpg" alt="">
                    <div class="inner">
                        <h3>汽車2</h3>
                        <p>簡介</p>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-md-12">
                <a href="#">
                    <img src="img/g-4.jpg" alt="">
                    <div class="inner">
                        <h3>汽車3</h3>
                        <p>簡介</p>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-md-12">
                <a href="#">
                    <img src="img/g-5.jpg" alt="">
                    <div class="inner">
                        <h3>汽車4</h3>
                        <p>簡介</p>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-md-12">
                <a href="#">
                    <img src="img/g-6.jpg" alt="">
                    <div class="inner">
                        <h3>汽車5</h3>
                        <p>簡介</p>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-md-12">
                <a href="#">
                    <img src="img/g-7.jpg" alt="">
                    <div class="inner">
                        <h3>汽車6</h3>
                        <p>簡介</p>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 col-md-12">
                <a href="#">
                    <img src="img/g-8.jpg" alt="">
                    <div class="inner">
                        <h3>汽車7</h3>
                        <p>簡介</p>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!--JS-->
    $(function() {
        $('.row>div').each(function() {
            $(this).hoverdir();
        });

    });
    

同時(shí)在調用(yòng)hoverdir()方法時(shí)也(yě)可(kě)以傳參,實現一些自定義的(de)效果,參數以josn的(de)形式傳入,如:

        $(function() {
            $('.row>div').each(function() {
                $(this).hoverdir({
                    hoverDelay: 50,
                    reverse: true
                });
            });

        });
<!--注:hoverDelay是延遲加載時(shí)間,越大(dà)時(shí)間越長(cháng)。reverse是是否反向,true表示反向,默認false-->


最新動态

常見問題百寶箱

全國服務熱(rè)線

027-89992189

掃一掃關注微信

Copyright 2013-2020 All Rights Reserved 雲南雲豹網絡科技股份有限公司

獲取品牌營銷方案

快(kuài)速填寫

馬上獲取

互聯網低成本創名牌從此開始!