Web前端鼠标点击弹出文字


特效如图:

image.png

实现方法:

css样式:

.tagandart_a
{
    border: none;  display: inline-block;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;"><time style="    float: right;
    margin: 0;
    padding-left: 10px;
    color: #999;
    line-height: 24px;    white-space: nowrap;
}

js代码:

<script type="text/javascript">
    document.body.oncontextmenu=document.body.ondragstart= document.body.onselectstart=document.body.onbeforecopy=function(){return false;};
</script>
<script type="text/javascript">
    /* 鼠标特效 */
    var a_idx = 0;
    // jQuery(document).ready(function($) {
    document.ready = function() {
        $(".wrapper").click(function(e) {
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "font-size": "14px",
                "color": "#ff6651"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function() {
                    $i.remove();
                });
        });
    };
</script>

将以上代码放到项目中就可以实现特效


请登陆后在进行评论
  • 随机文章
  • ThinkCMF更新升级到5.0.181231后url无法美化的问题,路由设置了没用的解决办法

    ThinkCMF更新升级到5.0.181231后url无法美化的问题,路由设置了没用的解决办法

    ThinkCMF QQ互联插件教程4——QQ互联插件安装使用

    ThinkCMF QQ互联插件教程4——QQ互联插件安装使用

    ThinkCMF QQ互联插件教程3——QQ互联插件文件配置

    ThinkCMF QQ互联插件教程3——QQ互联插件文件配置

    ThinkCMF QQ互联插件教程2——QQ互联插件文件配置

    ThinkCMF QQ互联插件教程2——QQ互联插件文件配置

    ThinkCMF教程——上传图片添加水印

    ThinkCMF教程——上传图片添加水印

    关于PHPstorm移动网络下不能够连接各大云服务器的解决办法(could not list the contents of folder)

    关于PHPstorm移动网络下不能够连接各大云服务器的解决办法(could not list the contents of folder)