精品人人槡人妻人人槡,无码午夜国产视频,日韩精品无码有码视频,国产成人精品日本亚洲成熟

<var id="lf53i"><track id="lf53i"><ins id="lf53i"></ins></track></var>

  • <rp id="lf53i"></rp>
    <var id="lf53i"><track id="lf53i"><ins id="lf53i"></ins></track></var>

    <video id="lf53i"></video>
    <b id="lf53i"><acronym id="lf53i"></acronym></b>

      1. 0712-2888027 189-8648-0214
        微信公眾號

        孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

        當(dāng)前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > Jquery HoverDir響應(yīng)鼠標(biāo)移動方向的懸停效果插件

        Jquery HoverDir響應(yīng)鼠標(biāo)移動方向的懸停效果插件

        時(shí)間:2016-11-03來源:風(fēng)信官網(wǎng) 點(diǎn)擊: 1116次
        Jquery HoverDir插件是一款非常不錯(cuò)的響應(yīng)鼠標(biāo)移動方向的懸停效果工具,移動過渡效果非常的自然,有興趣的朋友可以詳細(xì)的了解一下,以下為代碼詳解截圖及說明。
         
        效果演示地址:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/
        代碼下載地址:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/DirectionAwareHoverEffect.zip
        Jquery HoverDir響應(yīng)鼠標(biāo)移動方向的懸停效果插件
         
        html結(jié)構(gòu):

        <ul id="da-thumbs" class="da-thumbs">
        <li>
        <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
        <img src="images/7.jpg" />
        <div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
        </a>
        </li>
        <li>
        <!-- ... -->
        </li>
        <!-- ... -->
        </ul>
        CSS部分:

        .da-thumbs li {
        	float: left;
        	margin: 5px;
        	background: #fff;
        	padding: 8px;
        	position: relative;
        	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .da-thumbs li a,
        .da-thumbs li a img {
        	display: block;
        	position: relative;
        }
        .da-thumbs li a {
        	overflow: hidden;
        }
        .da-thumbs li a div {
        	position: absolute;
        	background: rgba(75,75,75,0.7);
        	width: 100%;
        	height: 100%;
        }
         
        CSS動畫關(guān)鍵部分,采用css3的動畫效果,以及添加方向的class

        .da-thumbs li a div.da-animate {
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }
        /* 動畫開始階段的class */
        .da-slideFromTop {
            left: 0px;
            top: -100%;
        }
        .da-slideFromBottom {
            left: 0px;
            top: 100%;
        }
        .da-slideFromLeft {
            top: 0px; 
            left: -100%;
        }
        .da-slideFromRight {
            top: 0px;
            left: 100%;
        }
        /* 動畫結(jié)果階段的class: */
        .da-slideTop {
            top: 0px;
        }
        .da-slideLeft {
            left: 0px;
        }
        
         
        動畫的js腳本部分
         
        腳本部分,就是引入jquery文件,引入該插件。然后調(diào)用該插件即可。

        $(function() {
        $(‘#da-thumbs > li’).hoverdir();
        });
         
        該插件支持動畫效果,延遲動畫效果,和反向

        $(‘#da-thumbs > li’).hoverdir( {
        hoverDelay : 50,
        reverse : true
        });
         
        注:hoverDelay是延遲加載時(shí)間,越大時(shí)間越長。reverse是是否反向,true表示反向,默認(rèn)false 插件名jquery.hoverdir.js
        欄目列表
        推薦內(nèi)容
        熱點(diǎn)內(nèi)容
        展開