Question

<?php

    if (intval(mysql_num_rows($req2)) == 0) {
        $html = '(No Reply)';
    } else {
        $reps = $dn2['reps'] - 1;
        $html = '(' .  htmlspecialchars($reps) . 'time reply)';
    }

    echo $html;
?>

我想滚动这些图片而不使用html的选框标签...请帮助我。我使用过css关键帧但我没有得到我想要的东西。这些图像位于索引页底部。这是客户标识从左到右或从右到左滚动....提前感谢。

Answer 1

/*download .js file from here and include it in ur project */
http://technicalpixel.com/post%20sample%20code/Continous%20Horizontal%20JQuery%20Image%20Marquee/assets/js/crawler.js


<head> 
      <script src="assets/js/crawler.js" type="text/javascript" ></script>
 </head>

 /* add id to ur div tag */
<div id="marquee">
        <div class="client">
           <img src="images/c1.png"/>
        </div>
         <div class="client">
           <img src="images/c2.png"/>
        </div>
         <div class="client">
           <img src="images/c3.png"/>
        </div>
         <div class="client">
           <img src="images/c4.png"/>
        </div>
        <div class="client">
           <img src="images/c5.png"/>
        </div
        ><div class="client">
           <img src="images/c6.png"/>
        </div
        ><div class="client">
           <img src="images/c7.png"/>
        </div>
</div>

/* Add this script in ur project in head tag*/
marqueeInit({
                   uniqueid: 'marquee',
                   style: {

                   },
                   inc: 5, //speed - pixel increment for each iteration of this marquee's movement
                   mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
                   moveatleast: 2, 
                   neutral: 150,
                   savedirection: true,
                   random: true
                });

Answer 2

请试试这个：

<style type="text/css">
/* Make it a marquee */
.marquee {
    width: 450px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
}

.marquee:hover {
    animation-play-state: paused
}

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}

/* Make it pretty */
.microsoft {
    padding-left: 1.5em;
    position: relative;
    font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

/* ::before was :before before ::before was ::before - kthx */
.microsoft:before, .microsoft::before {
    z-index: 2;
    content: '';
    position: absolute;
    top: -1em; left: -1em;
    width: .5em; height: .5em;
    box-shadow: 1.0em 1.25em 0 #F65314,
                1.6em 1.25em 0 #7CBB00,
                1.0em 1.85em 0 #00A1F1,
                1.6em 1.85em 0 #FFBB00;
}

.microsoft:after, .microsoft::after {
    z-index: 1;
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2em; height: 2em;
    background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0));
}

/* Style the links */
.vanity {
    color: #333;
    text-align: center;
    font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.vanity a, .microsoft a {
    color: #1570A6;
    transition: color .5s;
    text-decoration: none;
}

.vanity a:hover, .microsoft a:hover {
    color: #F65314;
}

/* Style toggle button */
.toggle {
    display: block;
    margin: 2em auto;
}

</style>
<p class="microsoft marquee"><img src="https://s-media-cache-ak0.pinimg.com/236x/a2/4b/48/a24b48e465e666fffd4cbcaa79107c7c.jpg"  /></p>
<button class="toggle">Toggle Beautification</button>
<script type="application/javascript">
$(".toggle").on("click", function () {
    $(".marquee").toggleClass("microsoft");
});
</script>

http://jsfiddle.net/jonathansampson/XxUXD/

如何在不使用选框标记的情况下滚动图像？ Javascript，jquery或css什么的

2 个答案: