<%@ 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. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1

    CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...

  2. java 与 iOS 平台概念比较

    java oc/swift jvm iphone jre runtime? jdk ios SDK spring xcode 生成的应用模版 服务器(tomcat) 系统的事件调度派发部分 class ...

  3. Blazor入坑指南

    一 为什么用Blazor 原本就是后端程序员, 技术栈基于C#, 懂一点前端jQuery/Html 不管是webAssembly还是ServerSide, 就是想方便地做单页应用, 能wasm自然更好 ...

  4. 使用文件流与使用缓冲流完成文件的复制操作性能对比，文件流 FileInputStream FileOutputStream 缓冲流: BufferedInputStream BufferedOutputStream

    package seday06; import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOExc ...

  5. 清新简约风格毕业论文答辩PPT模板推荐

    不管是学生还是老师,应该经常会需要学生答辩的PPT模板,今天给大家推荐织梦58的学生答辩ppt模板. 模版来源:http://ppt.dede58.com/gongzuohuibao/26494.ht ...

  6. 【C#】学习笔记(3) 关于Events使用的小Demo

    关于Events事件的简单Demo. 目录结构: Program.cs using System; namespace EventsDemo { class Program { static void ...

  7. [转]Outlook 2016 will not display Web linked images

    本文转自:https://community.spiceworks.com/topic/1952626-outlook-2016-will-not-display-web-linked-images ...

  8. SharePoint PowerShell 创建网站栏

    前言 最近,有这么个需求,需要使用PowerShell为网站集创建网站栏,好吧,直接看代码吧. Add-PSSnapin Microsoft.SharePoint.PowerShell -ErrorA ...

  9. 20个常用的JavaScript字符串方法

    摘要: 玩转JS字符串. 原文:JS 前20个常用字符串方法及使用方式 译者:前端小智 Fundebug经授权转载,版权归原作者所有. 本文主要介绍一些最常用的JS字符串函数. 1. charAt(x ...

  10. linux下关闭selinux

    找到 /etc/sysconfig/selinux 文件 修改 SELINUX=enable 使之 SELINUX=disable 重启 reboot