<%@ 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. javascript es6 Promise 异步同步的写法(史上最简单的教程了)

    1 来个简单的例子 var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.lo ...

  2. Python 爬虫从入门到进阶之路（一）

    通用爬虫和聚焦爬虫 根据使用场景,网络爬虫可分为 通用爬虫 和 聚焦爬虫 两种. 通用爬虫 通用网络爬虫 是 捜索引擎抓取系统(Baidu.Google.Yahoo等)的重要组成部分.主要目的是将互联 ...

  3. Spring MVC的注解二

    概述 Spring从2.5版本开始引入注解,虽然版本不断变化,但是注解的特性一直被延续下来并不断进行扩展,这里就来记录一下Spring MVC中常用的注解,本文承接前文继续记录@PathVariabl ...

  4. vscode解决nuget插件不能使用的问题

    错误提示 使用vscode安装nuget插件之后出现错误: "Versioning information could not be retrieved from the NuGet pac ...

  5. echarts 饼图 + 全屏显示

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. layui省市区三级联动城市选择

    基于layui框架制作精美的省市区下拉框三级联动菜单选择, 支持三级联动城市选择,点击提交获取选中值代码. 示例图如下: 资源链接: https://pan.baidu.com/s/1s6l8iDBE ...

  7. iOS11自定义tabBar重影问题

    转载自:(主链接)https://www.jianshu.com/p/1be90349fdb4 https://www.cnblogs.com/coderYu/p/5859638.html 很实用,有 ...

  8. Oracle 备份数据库

    [目录] ①备份数据库(https://www.cnblogs.com/xqz0618/p/oracle_backup.html) ②定时备份数据库(https://www.cnblogs.com/x ...

  9. NSURLSession的文件上传

    文件上传的步骤: (1)确定上传路径 (2)创建“可变”请求对象 (3)修改请求方法为POST  --设置请求头信息,告诉服务器这是一个文件上传请求  --按照固定的格式拼接数据 (4)设置请求体信息 ...

  10. leetcode——动态规划

    立志要熟练动态规划,加油! 最长回文子串给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 思路:设dp[l][r]表示s[l……r]是否回文,枚举右边界r,然后 ...