前端jQuery开发 图片遮罩hover翻转效果

爱鲜峰 招聘前端开发|前端软件开发招聘要求|web前端开发的图形插件 基于jquery遮罩图片hover翻转效果。这是一款基于jquery+css3实现的鼠标经过遮罩图片翻转特效。效果图如下: ####在线预览 源码下载实现的代码。 html代码:
<div class=”index_hd”>
    <div class=”fr hd_r major-list-outer”>
        <ul class=”major-list”>
            <li class=”major-item”>
                <a href=”http://www.w2bc.com/”>
                    <span class=”txt-hide front-face”>
                        <img src=”images/1413775760-7544.jpg” width=”294″ height=”267″>
                    </span>
                    <span class=”back-face to-left”></span>
                </a>
            </li>
            <li class=”major-item”>
                <a href=”http://www.w2bc.com/”>
                    <span class=”txt-hide front-face”>
                        <img src=”images/1400684346-4329.jpg” width=”294″ height=”267″>
                    </span>
                    <span class=”back-face to-right”></span>
                </a>
            </li>
            <li class=”major-item”>
                <a href=”http://www.w2bc.com/”>
                    <span class=”txt-hide front-face”>
                        <img src=”images/1413775714-2418.jpg” width=”294″ height=”267″>
                    </span>
                    <span class=”back-face to-top”></span>
                </a>
            </li>
            <li class=”major-item”>
                <a href=”http://www.w2bc.com/”>
                    <span class=”txt-hide front-face”>
                        <img src=”images/1411890878-8918.jpg” width=”294″ height=”267″>
                    </span>
                    <span class=”back-face to-top”></span>
                </a>
            </li>
            <li class=”major-item”>
                <a href=”http://www.w2bc.com/”>
                    <span class=”txt-hide front-face”>
                        <img src=”images/1413775714-2418.jpg” width=”294″ height=”267″>
                    </span>
                    <span class=”back-face to-top”></span>
                </a>
            </li>
            <li class=”major-item”>
                <a href=”http://www.w2bc.com/”>
                    <span class=”txt-hide front-face”>
                        <img src=”images/1400684434-4609.jpg” width=”294″ height=”267″>
                    </span>
                    <span class=”back-face to-top”></span>
                </a>
            </li>
            <li class=”major-item”>
                <a href=”http://www.w2bc.com/”>
                    <span class=”txt-hide front-face”>
                        <img src=”images/1428032296-8158.jpg” width=”294″ height=”267″>
                    </span>
                    <span class=”back-face to-top”></span>
                </a>
            </li>
            <li class=”major-item”>
                <a href=”http://www.w2bc.com/”>
                    <span class=”txt-hide front-face”>
                        <img src=”images/1405250374-3685.jpg” width=”294″ height=”267″>
                    </span>
                    <span class=”back-face to-top”></span>
                </a>
            </li>
        </ul>
    </div>
</div>
web开发前端技术总结|前端开发怎么样?|开发微信公众平台是前端做的
» 本文来自:前端开发者 » 《前端jQuery开发 图片遮罩hover翻转效果》
» 本文链接地址:https://www.rokub.com/5251.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!