<%@ 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. UI设计---初来乍到

    2019.12.1   今天学习两节 实现自己既定的目标,必须能耐得住寂寞单干. PS下载 给大家分享一个2019ps教程,提取码:ywnl 或扫描二维码 迅捷思维导图:使用" Enter  ...

  2. 挑战10个最难回答的Java面试题（附答案）

    译者:Yujiaao segmentfault.com/a/1190000019962661 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计模式内容 ...

  3. 平时代码中用不到设计模式？Are you kidding me?

    引子 平时我是个反应非常慢的人.有多慢呢?大概是两年前有次团队内部开会时,我听到同学说平时代码中用不到设计模式,我当时没有回答.两年后我终于反应过来了:“Are you kidding me?我每天都 ...

  4. BeanUtils.populate()空字符串转换日期的解决办法

    我们在使用beanutils.populate()封装参数时,如果封装的字符串是空,在转换成date时会出现以上异常,此时可以在工具类中添加静态代码块即可解决:注意导入beanutils 包 impo ...

  5. DBUtils框架的使用(上)

    昨天做了这么多的铺垫,当然就是为了引出今天的DBUtils框架了,它的实现原理跟我们编写的简易框架是类似的. 话不多说,进入正题. commons-dbutils 是 Apache 组织提供的一个开源 ...

  6. 2019 DevOps 必备面试题——代码版本控制篇

    原文地址:https://medium.com/edureka/devops-interview-questions-e91a4e6ecbf3 原文作者:Saurabh Kulshrestha 翻译君 ...

  7. Linux日志中出现大量dhclient mesage浅析

    最近检查发现一台Linux服务器,发现其日志里面有大量下面信息,其中部分信息做了脱敏处理.其中一个地址A(192.168.AAA.AAA) 为DNS服务器地址,地址B(192.168.BBB.BBB) ...

  8. mac环境下Python虚拟环境的安装和配置

    虚拟环境(virtualenv) 安装:在终端输入 pip install virtualenv 如果没安装pip会出现 pip: command not found,此时需要进行 sudo easy ...

  9. Attaching an entity of type 'xxx' failed because another entity of the same type already has the same primary key value.

    问题的详细描述: Attaching an entity of type 'xxxxx' failed because another entity of the same type already ...

  10. (办公)访问其他系统接口httpClient,异步访问

    访问其他系统接口httpClient,但是都是同步的,同步意味当前线程是阻塞的,只有本次请求完成后才能进行下一次请求;异步意味着所有的请求可以同时塞入缓冲区,不阻塞当前的线程; httpClient请 ...