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 ...
随机推荐
- mitmproxy的使用
一.介绍 中间人代理可以理解成和中间件差不多 mitmproxy工程工具包,主要包含了3个组件 mitmproxy:拦截的http(s)记录控制台显示 [window不支持] mitmdump:命令行 ...
- IDEA中新建SpringBoot项目时提示:Artifact contains illegal characters
场景 一步一步教你在IEDA中快速搭建SpringBoot项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/87688277 ...
- .netcore 文件上传转为base64位字符串
.netcore文件上传Api接口,和正常的webForm提交类似,只是用postman测试接口时,记得给form表单命名,否则获取上传文件数量一直为0 后端代码 using System; usin ...
- OpenCV:图像的裁剪
import cv2 import matplotlib.pyplot as plt def show(image): plt.imshow(image) plt.axis('off') plt.sh ...
- 【Gradle】Android Gradle 高级自定义
Android Gradle 高级自定义 使用共享库 Android的包,如android.app,android.content,android.view,android.widget等,是默认包含 ...
- Saltstack_使用指南13_runner的job和manage与execution的saltutil
1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...
- Zookeeper学习(一)
shell角度 API角度 Zookeeper可单节点,可分布式 作用: distributed coordination(分布式协调) 同一时间只有一个对外提供服务,另外的就是standy. 当ac ...
- 30-学容器必须懂 bridge 网络
Docker 安装时会创建一个 命名为 docker0 的 linux bridge.如果不指定--network,创建的容器默认都会挂到 docker0 上. apt-get install bri ...
- PHP 自带的验证函数 FILTER_VAR()
常见的用法 检查邮箱的格式是否合法 if (filter_var('bob@example.com', FILTER_VALIDATE_EMAIL)) { } 更多相关的 过滤参数: ID 名称 描述 ...
- XOR加密作业
思路 -1.对需要加密的内容进行MD5加密 -2.随机生产32位的十六进制密钥 -3.对密钥和MD5加密内容进行异或运算. 主要问题: -1.如何实现MD5加密 -2.如何随机生成32位16进制密钥 ...