Question

所以，我有下面的代码片段，我想添加一个锚链接。不幸的是，没有关于如何的信息。那么，如何在data-marquee属性中添加链接？

<div class="marquee marquee-speed-normal" data-marquee="Some text **I want to have a link in here** Some text"> </div>

Answer 1

好的吉姆，远射

我这就是你想要做的事吗？

    <!DOCTYPE html> <html>

<head>
    <meta charset="UTF-8">
    <title>jQuery Marquee Plugin Example</title>

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js'></script>

    <style>
        .marquee {
            width: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            background: #ccc;
        }
    </style>


</head>

<body>
    <div class="marquee"><a href="#1">This is my link</a></div>
    <script src="js/index.js"></script> </body>

</html>

<强> index.js

$(".marquee").marquee({
  //speed in milliseconds of the marquee
  duration: 5000,
  //gap in pixels between the tickers
  gap: 50,
  //time in milliseconds before the marquee will start animating
  delayBeforeStart: 0,
  //'left' or 'right'
  direction: "left",
  //true or false - should the marquee be duplicated to show an effect of continues flow
  duplicated: true
});

Answer 2

看看这个......

在大多数情况下，锚可以像这样放置。有很多信息，很少找到它们。

<!DOCTYPE html>
<html>

<head>
    <title>HTML marquee Tag</title>
</head>

<body>
    <marquee direction="right" scrolldelay="300">
        <a href="https://www.tutorialspoint.com/html/html_marquees.htm">This link will take you to a page with what you need to know</a>
    </marquee>
    <marquee direction="right" scrolldelay="300">
        <a href="https://www.w3.org/TR/html5/obsolete.html#the-marquee-element-0">And this is why you should try not to use it.</a>
    </marquee>
</body>

</html>

Answer 3

然后尝试一下。从我所看到的，最简单的方法是将整个选框转变为如下所示的链接。原因似乎是数据字幕打印数据并且不代表任何其他内容。

看看除了那个之外是否还有另一种方法可以在选框内显示链接，这将是非常酷的。

<a href="#1">
    <h1 class="marquee marquee-direction-alternate" data-marquee="HTML5 marquee"></h1>
</a>

Answer 4

如果你不对，我也发现这非常有用。在这里我用CSS做了同样的事情。这仍然得到广泛支持。

*/The behavior is determined with CSS*/
<style>
        .scroll-slow {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: yellow;
            color: orange;
            border: 1px solid orange;
        }

        .scroll-slow p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            /* Starting position */
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            /* Apply animation to this element */
            -moz-animation: scroll-slow 25s linear infinite;
            -webkit-animation: scroll-slow 25s linear infinite;
            animation: scroll-slow 25s linear infinite;
        }
        /* Move it (define the animation) */

        @-moz-keyframes scroll-slow {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }

        @-webkit-keyframes scroll-slow {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }

        @keyframes scroll-slow {
            0% {
                -moz-transform: translateX(100%);
                /* Browser bug fix */
                -webkit-transform: translateX(100%);
                /* Browser bug fix */
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                /* Browser bug fix */
                -webkit-transform: translateX(-100%);
                /* Browser bug fix */
                transform: translateX(-100%);
            }
        }
    </style>

*/ And then the anchor is done as follows */
    <div class="scroll-slow">
          <p><a href="#1">This is my link</a></p>
     </div>

如何在数据选框中添加锚点href

4 个答案: