jquery.sliphover.min.js鼠标悬停显示文字效果js插件


jquery.sliphover.min.js鼠标悬停显示文字效果插件

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.sliphover.min"], function() {
                $('#container').sliphover();
            });
        });
    </script>
    <style>
        #container {
            width: 900px;
            margin: 0 auto;
        }
        #container li {
            display: inline-block;
            list-style-type: none;
        }
        #container li img {
            height: 200px;
            margin: 5px;
            border: 3px solid #fff;
        }
    </style>
</head>
<body>
    <div class="menu">
        <p class="menuc">
            <span></span>
            <a class="cur" href="index.html">1、默认</a>
            <a href="index2.html">2、遮罩高度</a>
            <a href="index3.html">3、HTML data属性</a>
            <a href="index4.html">4、动画时间</a>
            <a href="index5.html">5、字体颜色</a>
            <a href="index6.html">6、背景颜色</a>
            <a href="index7.html">7、反向</a>
            <a href="index8.html">8、文字排版</a>
            <a href="index9.html">9、禁用链接</a>
        </p>
    </div>
    <div class="main">
        <div class="mianc">
            <h1>默认</h1>

            <div id="container">
                <ul>
                    <li>
                        <a href="#">
                            <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" title="这是一个标题或描述">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" title="这是一个标题或描述">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" title="这是一个标题或描述">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" title="这是一个标题或描述">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" title="这是一个标题或描述">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" title="这是一个标题或描述">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" title="这是一个标题或描述">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" title="这是一个标题或描述">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" title="这是一个标题或描述">
                        </a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</body>
</html>


立即下载jquery.sliphover.min.js查看所有js插件

网友评论0

程序员在线工具箱