<%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <style> .divTestimional { font-family: Helvetica, Arial, sans-serif; font-size: 16px; cursor: pointer; background-color: hsl(208, 65%, 98%); padding: 10px; } .divLocation { clear: both; padding-top: 5px; margin: 0; overflow: hidden; text-overflow: ellipsis; font-weight: bold; display: inline-block; float: left; padding-right: 85px; background: url("https://www.soldster.com/images/5stars.png") right top no-repeat; } .divText { clear: both; 350px; padding-top: 10px; margin: 0; /*overflow: hidden;*/ text-overflow: ellipsis; height: 100px; } ul, li { list-style: none; } #Marquee_x { overflow: hidden; 100%; margin-top: 50px; } #Marquee_x ul li, #Marquee_x ul li div { float: left; } </style> <script> ; (function ($) { $.fn.jcMarquee = function (options) { var defaults = { 'marquee': 'x', 'margin_bottom': '0', 'margin_right': '0', 'speed': '5' }; var options = $.extend(defaults, options); return this.each(function () { var $marquee = $(this), $marquee_scroll = $marquee.children('ul'); $marquee_scroll.append("<li class='clone'>" + "</li>"); $marquee_scroll.find('li').eq(0).children().clone().appendTo('.clone'); var $marquee_left = $marquee_scroll.find('li'); if (options.marquee == 'x') { var x = 0; $marquee_scroll.css('width', '1000%'); $marquee_left.find('div').css({ 'margin-right': options.margin_right }); $marquee_left.css({ 'margin-right': options.margin_right }); function Marquee_x() { $marquee.scrollLeft(++x); _margin = parseInt($marquee_left.find('div').css('margin-right')); if (x == $marquee_left.width() + _margin) { x = 0 }; }; var MyMar = setInterval(Marquee_x, options.speed); $marquee.hover(function () { clearInterval(MyMar); }, function () { MyMar = setInterval(Marquee_x, options.speed); }); } if (options.marquee == 'y') { var y = 0; $marquee_scroll.css('height', '1000%'); $marquee_left.find('div').css('margin-bottom', options.margin_bottom); $marquee_left.css('margin-bottom', options.margin_bottom); function Marquee_y() { $marquee.scrollTop(++y); _margin = parseInt($marquee_left.find('div').css('margin-bottom')); if (y == $marquee_left.height() + _margin) { y = 0 }; }; var MyMar = setInterval(Marquee_y, options.speed); $marquee.hover(function () { clearInterval(MyMar); }, function () { MyMar = setInterval(Marquee_y, options.speed); }); }; }); }; })(jQuery) $(function () { $('#Marquee_x').jcMarquee({ 'marquee': 'x', 'margin_right': '10px', 'speed': 30 }); }); </script> </head> <body> <form id="form1" runat="server"> <div style=" 1150px; margin: 10px auto;"> <div style=" 100%; margin-top: 30px;"> <div style="height: 20px; display: block"> <a style="float: right; cursor: pointer;" href="https://www.baidu.com/"> >> Review All</a> </div> <div id="Marquee_x"> <ul> <li style="list-style-type: inherit"> <% List<Testimonial> records = GetData(); foreach (Testimonial t in records) { %> <div class="divTestimional"> <b><%=t.Who %></b> <label style="float: right;"><%=t.CreatedAt.ToString("MMM-dd yyyy") %></label> <p class="divLocation"> <%=t.Location %> </p> <p class="divText"> <%=t.Text %> </p> </div> <% } %> </li> </ul> </div> </div> </div> </form> </body> </html>
这是效果图（chrom）：一直往左边滚动 , 具体不解释了,写个博客留作备份。
