Gallery -- 横向不断滚动 demo
<%@ 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 %>
</p>
<p class="divText">
<%=t.Text %>
</p>
</div>
<%
}
%>
</li>
</ul>
</div>
</div>
</div> </form>
</body>
</html>
这是效果图（chrom）：一直往左边滚动 , 具体不解释了,写个博客留作备份。
Gallery -- 横向不断滚动 demo的更多相关文章
- 无限滚动 --demo
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- swiper4实现的拥有header和footer的全屏滚动demo/swiper fullpage footer
用swiper4实现的拥有header和footer的全屏滚动demo, <!DOCTYPE html> <html lang="en"> <head ...
- 可以左右移动横向无缝滚动的JS图片展示代码
在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...
- scrollLeft的相关问题（js横向无缝滚动）
<div id="demo"> <div id="innerdemo"> <div id="demo1"> ...
- 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 ...
- Android 列表使用(ListView GridView Gallery图片计时滚动)
ListView 作用: 1.将数据填充到布局. 2.处理用户的选择点击等操作. 根据列表的适配器类型,列表分为三种,ArrayAdapter,SimpleAdapter和SimpleCursorAd ...
- Android TextView文字横向自动滚动(跑马灯)
TextView实现文字滚动需要以下几个要点: 1.文字长度长于可显示范围:android:singleLine="true" 2.设置可滚到,或显示样式:android: ...
- 嵌套滚动demo
https://github.com/luv135/NestedScrollingDemo https://github.com/ggajews/nestedscrollingchildviewdem ...
- fullpagejs实现的拥有header和foooter的全屏滚动demo/fullpage footer
fullpagejs实现的拥有header和foooter的全屏滚动, 技术要点:给section元素加fp-auto-height类, <!DOCTYPE html> <html ...
随机推荐
- ueditor设置
1: 2:
- 关于使用宏将csv批量转换成xls的分享
最近在使用遇到一个问题需要把csv格式的文件转成xls,随便新建一个excel,然后打开,选择“开发工具”,找到下图“宏”,如果跟下图一样的话就需要先启用宏,启用之后可以直接把下面的代码直接复制到代码 ...
- C#_.NetFramework_Web项目_NPOI_EXCEL数据导入
[推荐阅读我的最新的Core版文章,是最全的介绍:C#_.NetCore_Web项目_EXCEL数据导出] 项目需要引用NPOI的Nuget包: B-2--EXCEL数据导入--NPOI--C#获取数 ...
- (转)Python- sklearn之最小二乘法
最小二乘法:https://baike.baidu.com/item/%E6%9C%80%E5%B0%8F%E4%BA%8C%E4%B9%98%E6%B3%95/2522346?fr=aladdin ...
- css知识笔记：垂直居中（别只看，请实操！！！）
css实现元素的垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的, ...
- bay——安装_Oracle 12C-RAC-Centos7.txt
★★★____★☆★〓〓〓〓→2019年6月26日10:29:42 bayaim-RAC ——搭建第4次VMware vSphere Client6.0 ----------------------- ...
- 表单生成器(Form Builder)之表单数据存储结构mongodb篇
从这篇笔记开始,记录一下表单生成器(Form Builder)相关的一些东西,网上关于他的介绍有很多,这里就不解释了. 开篇说一下如何存储Form Builder生成的数据.
- [PHP] stream_set_blocking非阻塞模式影响fgets fread函数
当设置socket为非阻塞时,fread或者fgets函数会立即返回结果,而不需要等待有输入,测试过程可以使用vscode的debug模式来进行当不设置这一项时,如果客户端没有输入会一直阻塞在这里等待 ...
- Linux：搭建samba服务器
samba服务器的搭建 修改防火墙设置 firewall-cmd --permanent --add-service=samba //设置防火墙 firewall-cmd --reload //重新加 ...
- CentOS安装docker-compose
一.compose简介 compose是一个定义和运行多容器的docker应用的工具.compose 通过yaml文件配置应用服务,然后仅需一个命令就可以创建和运行所有配置中的服务. 二.compos ...