<%@ 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(, %, %);

padding: 10px;

}

.divLocation {

clear: both;

padding-top: 5px;

margin: ;

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;

width: 350px;

padding-top: 10px;

margin: ;

/*overflow: hidden;*/

text-overflow: ellipsis;

height: 100px;

}

ul, li {

list-style: none;

}

#Marquee_x {

overflow: hidden;

width: %;

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': '',

'margin_right': '',

'speed': ''

};

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().children().clone().appendTo('.clone');

var $marquee_left = $marquee_scroll.find('li');

if (options.marquee == 'x') {

var x = ;

$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 =  };

};

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 = ;

$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 =  };

};

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':  });

});

</script>

</head>

<body>

<form id="form1" runat="server">

<div style="width: 1150px; margin: 10px auto;">

<div style="width: 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 %>&nbsp;

</p>

<p class="divText">

<%=t.Text %>

</p>

</div>

<%

}

%>

</li>

</ul>

</div>

</div>

</div>

</form>

</body>

</html>

这是效果图（chrom）：一直往左边滚动 , 具体不解释了,写个博客留作备份。

Gallery -- 横向不断滚动 demo的更多相关文章

  1. 无限滚动 --demo

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  2. swiper4实现的拥有header和footer的全屏滚动demo/swiper fullpage footer

    用swiper4实现的拥有header和footer的全屏滚动demo, <!DOCTYPE html> <html lang="en"> <head ...

  3. 可以左右移动横向无缝滚动的JS图片展示代码

    在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...

  4. scrollLeft的相关问题（js横向无缝滚动）

    <div id="demo"> <div id="innerdemo"> <div id="demo1"> ...

  5. CSS3+HTML5特效4 - 横向无缝滚动

    先看例子 This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This ...

  6. Android 列表使用(ListView GridView Gallery图片计时滚动)

    ListView 作用: 1.将数据填充到布局. 2.处理用户的选择点击等操作. 根据列表的适配器类型,列表分为三种,ArrayAdapter,SimpleAdapter和SimpleCursorAd ...

  7. Android TextView文字横向自动滚动(跑马灯)

    TextView实现文字滚动需要以下几个要点:   1.文字长度长于可显示范围:android:singleLine="true"   2.设置可滚到,或显示样式:android: ...

  8. 嵌套滚动demo

    https://github.com/luv135/NestedScrollingDemo https://github.com/ggajews/nestedscrollingchildviewdem ...

  9. fullpagejs实现的拥有header和foooter的全屏滚动demo/fullpage footer

    fullpagejs实现的拥有header和foooter的全屏滚动, 技术要点:给section元素加fp-auto-height类, <!DOCTYPE html> <html ...

随机推荐

  1. dict继承关系

    from collections.abc import Mapping, MutableMapping#dict属于mapping类型, MutalbelMapping继承Mapping a = {} ...

  2. ETCD:系统限制

    原文地址:System limits 请求大小限制 etcd被设计用来处理小键值对典型的如元数据.较大的请求数据也起作用,但可能会增加其他请求的延迟.默认情况下,任意的请求最大的空间为1.5MiB,这 ...

  3. halcon 算子功能查找大全中文版（可直接下载）

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11543364.html haicon算子中文查找大全百度云链接 链接:https://pan. ...

  4. Oracle 事务ACID的特性

    1.事务对数据库控制操作 事务(Transaction)是用户定义的一个数据库操作序列,是不可分割的一部分的整体.这些操作要么做,要么不做(原子性).事务是对数据库对进行操作的最基本的逻辑单位,他可以 ...

  5. Git - Git版本库相关操作

    创建Git版本库 如下命令实现在“E:\GitCode\01_TestGit”路径下,01_TestGit项目的Git版本库. $ cd E: #将当前目录转到E盘下 $ cd GitCode    ...

  6. Go-数据类型以及变量,常量

    一.数据类型 1.字符串类型 string 2.数字类型 有符号整型: int: int 在32位机器上是int32 在64位机器是int64 int8: int8 表示数字范围是 正负2的7次方减1 ...

  7. WePy框架的使用

    基本示例 import wepy from 'wepy';//引入wepy框架说明 // 通过继承自wepy.page的类创建页面逻辑 export default class Index exten ...

  8. GO 使用静态链接库编译 生成可执行文件 使用第三方 .a 文件，无源码构造

    go build 和 go install 都需要使用源码来进行编译.但是有时候我们只有.a或者.so文件.并不能获取到第三方库的源码,这时我们需要静态链接库编译的技巧: 上图是实验前的文件分布. 使 ...

  9. 高通lk屏幕向kernel传参

    LK把相关参数报存到cmdline上: 在Bootable\bootloader\lk\dev\gcdb\display\gcdb_display_param.c上gcdb_display_cmdli ...

  10. Codeforces Round #601 (Div. 2)

    传送门 A. Changing Volume 签到. Code /* * Author: heyuhhh * Created Time: 2019/11/19 22:37:33 */ #include ...