国产免费又爽又刺激在线观看,免费一级毛片在线播放放视频,最近日本免费观看高清视频,亚洲无码视频观看

<ruby id="cmmwe"></ruby>

  • <var id="cmmwe"></var>
    <b id="cmmwe"></b>
    <source id="cmmwe"><track id="cmmwe"><ins id="cmmwe"></ins></track></source>

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

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

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

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

        時間:2016-11-03來源:風(fēng)信官網(wǎng) 點擊: 1116次
        Jquery HoverDir插件是一款非常不錯的響應(yīng)鼠標移動方向的懸停效果工具,移動過渡效果非常的自然,有興趣的朋友可以詳細的了解一下,以下為代碼詳解截圖及說明。
         
        效果演示地址:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/
        代碼下載地址:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/DirectionAwareHoverEffect.zip
        Jquery HoverDir響應(yīng)鼠標移動方向的懸停效果插件
         
        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是延遲加載時間,越大時間越長。reverse是是否反向,true表示反向,默認false 插件名jquery.hoverdir.js
        欄目列表
        推薦內(nèi)容
        熱點內(nèi)容
        展開