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 ...
随机推荐
- Linux下shell脚本实现mongodb定时自动备份
MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功 ...
- Navicat Premium连接mongodb基本使用和介绍
Navicat premium是一款数据库管理工具,是一个可多重连线资料库的管理工具, 它可以让你以单一程式同时连线到 MySQL.SQLite.Oracle 及 PostgreSQL,mongodb ...
- linux安装GD库
首先我们检查GD库是否安装 php -i | grep -i --color gd 安装GD库 yum install php-gd* 安装完成之后配置php.ini文件 extension=gd.s ...
- Java方法之参数传递机制
目录 Java方法之参数传递机制 基本数据类型 引用数据类型 综合练习 总结 Java方法之参数传递机制 Java方法中如果声明了形参,在调用方法时就必须给这些形参指定参数值,实际传进去的这个值就叫做 ...
- 三行Jquery代码实现简单的选项卡
今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE h ...
- RabbitMQ与Spring的框架整合之Spring Boot实战
1.RabbitMQ与Spring的框架整合之Spring Boot实战. 首先创建maven项目的RabbitMQ的消息生产者rabbitmq-springboot-provider项目,配置pom ...
- requeests模块请求常用参数的写法整理
主要是针对写法 一.requests.get requests.get是调用了requests.request('get', url, params=params, **kwargs) 1.url 协 ...
- Java中的“浅复制”与“深复制”
复制 将一个对象的引用复制给另一个对象,一共有三种方式.第一种方式是直接赋值,第二种方式是浅复制,第三种方式是深复制. 1.直接赋值 在Java中,A a1 = a2,这实际上复制的是引用,也就是说 ...
- PostgreSQL 表字段起别名
使用Postgreq Sql 表字段起别名时注意要用双引号,使用单引号会出现语法错误,执行结果如图
- Go--实现两个大数相乘
----- import ( "bufio" "fmt" "os" "strings" ) func multi(str ...