Aganstrong
Aganstrong
2021-03-06 10:07
采纳率: 32.7%
浏览 89
已结题

实现前端效果,请教一下

  • 点赞
  • 收藏

7条回答 默认 最新

  • wanmeikakaxi
    wanmeikakaxi 2021-03-06 17:22
    已采纳

    给你修改了。

    动态效果图。

    代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>实现前端效果,请教一下</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
      <div class="form-group" style="margin: 100px 100px;">
        <label style="float: left;">请把鼠标指向input框</label>
        <div class="tipbox col-sm-2">
          <input type="text" class="form-control tooltip-show" id="tooltip-show" placeholder="点击输入内容" autocomplete="off">
        </div>
      </div>
    <script>
    
    $(function(){
    
    $("#tooltip-show").on("mouseenter", function () {
    
                        var _this = this;
    
                        $(".tipbox").prepend("<span id='edits' onclick='addedits();' style='cursor:default;z-index:1;position:relative;right:-100px;background:#08d6f8;padding:0px 10px;margin:-35px 0px 0px 0px;color:#fff;float:right;'>点击编辑</span><span class='line' style='position:absolute;width:27px;height:100px;text-indent:5px;background:linear-gradient(145deg,transparent 49.5%,#08d6f8 49.5%,#08d6f8 50.5%,transparent 50.5%);z-index:1;right:-12px;margin:-58px 0px 0px 0px;'></span>");
    
                        $(this).siblings("#edits").on("mouseleave", function () {
    
                            $("#edits, .line").remove();
    
    
                        });
    
                    }).on("mouseleave", function () {
    
    
                        setTimeout(function () {
    
    
                            if (!$("#edits:hover").length) {
    
    
                                $("#edits, .line").remove();
    
                            }
    
    
                        }, 100);
    
    
                    });
    
    
    });
    function addedits() {
    
           $("#tooltip-show").focus();
    
          };
    </script>
    </body>
    </html>
    点赞 1 评论
  • wanmeikakaxi
    wanmeikakaxi 2021-03-06 11:21

    动态效果图

    代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>实现前端效果,请教一下</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
      <div class="form-group" style="margin: 100px 100px;">
        <label style="float: left;">请把鼠标指向input框</label>
        <div class="col-sm-2">
          <input type="text" class="form-control tooltip-show" id="tooltip-show" placeholder="点击输入内容" autocomplete="off">
        </div>
      </div>
    <script>
    $(function(){
            $(".tooltip-show").popover({
                trigger:'manual',
                placement : 'top', 
                html: 'true', 
                content : '<span id="edits" onclick="addedits();" style="cursor:default;">点击编辑</span>', 
                animation: false
            }).on("mouseenter", function () {
                        var _this = this;
                        $(this).popover("show");
                        $(this).siblings(".popover").on("mouseleave", function () {
                            $(_this).popover('hide');
                        });
                    }).on("mouseleave", function () {
                        var _this = this;
                        setTimeout(function () {
                            if (!$(".popover:hover").length) {
                                $(_this).popover("hide")
                            }
                        }, 100);
                    });
    
    	});
    function addedits() {
           $("#tooltip-show").focus();
          }
    </script>
    <div>
    </body>
    </html>
    点赞 1 评论
  • wanmeikakaxi
    wanmeikakaxi 2021-03-07 01:45

    斜线锯齿问题,调整一下就行了

    background:linear-gradient(145deg,transparent 49.5%,#08d6f8 49.5%,#08d6f8 50.5%,transparent 50.5%);

    换成

    background: linear-gradient(145deg,transparent 49%,#08d6f8 50%,#08d6f8 50%,transparent 50.5%);

    点赞 1 评论
  • wanmeikakaxi
    wanmeikakaxi 2021-03-07 01:58

    至于整体阴影发光问题,则如下修改

    “点击编辑”里的style增加

    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);

    “斜线”里的style增加

    filter: blur(0.5px);

    完整代码

    $(".tipbox").prepend("<span id='edits' onclick='addedits();' style='cursor:default;z-index:1;position:relative;right:-100px;background:#08d6f8;padding:0px 10px;margin:-35px 0px 0px 0px;color:#fff;float:right;box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);'>点击编辑</span><span class='line' style='position:absolute;width:27px;height:100px;text-indent:5px;background: linear-gradient(145deg,transparent 49%,#08d6f8 50%,#08d6f8 50%,transparent 50.5%);z-index:1;right:-12px;margin:-58px 0px 0px 0px;filter: blur(0.5px);'></span>");
    点赞 1 评论
  • Aganstrong
    Aganstrong 2021-03-06 15:14

    点个赞,但是我想要的是这样的

    点赞 评论
  • Aganstrong
    Aganstrong 2021-03-06 15:14

    点赞 评论
  • Aganstrong
    Aganstrong 2021-03-06 15:15

    红红那里画上一条连接线

    点赞 评论

相关推荐