点击背景字体显示漂浮效果

最新推荐文章于 2021-06-03 09:58:45 发布

施主请别摸老衲的脸

最新推荐文章于 2021-06-03 09:58:45 发布

阅读量730

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_36591333/article/details/79743133

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>点击背景字体漂浮效果</title>
</head>
<style type="text/css" media="screen">
    .on {border: 2px solid #ffd350;}
    .on span{
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right: 10px solid #ffd350;
    position: absolute;
    top: 40%;
    left: -22px;
}
</style>
<body class="bo">
    <ul>
        <li class="on"><span></span><a href="">阿萨实打实阿斯达所</a></li>
        <li>12312313</li>
        <li>12312313</li>
        <li>12312313</li>
        <li>12312313</li>
        <li>12312313</li>
        <li>12312313</li>
        <li>12312313</li>
        <li>12312313</li>
        <li>12312313</li>
    </ul>

</body>
</html>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8" ></script>
<script>
var a_idx = 0;
$('.bo').on('click', function(e) {
var a = new Array("帅气", "好人","帅哥","风骚","美女");
var n = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
    y = e.pageY;
n.css({
    "z-index":"999999999",
    "top": y - 20,
    "left": x,
    "position": "absolute",
    "font-weight": "bold",
    "color": "#ff6651"
});
$("body").append(n);
n.animate({
    "top": y - 180,
    "opacity": 0
}, 1500, function() {
    n.remove()
});
});

</script>

施主请别摸老衲的脸

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击背景字体显示漂浮效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;点击背景字体漂浮效果&lt;/title&gt;&lt;/head&gt;&lt;style type="text/css&quo
复制链接

扫一扫

专栏目录