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 ...
随机推荐
- Yii2 中常用的增删改查操作总结
一.新增 1.使用save() $model = new User(); $model->name = 'test'; $model->phone = '13000000000'; $mo ...
- HTML51-清除浮动overflow、网易注册界面基本结构搭建
一.overflow:hidden;作用 (1)可以将超出标签范围的内容裁剪掉 (2)清除浮动 .box1{ background-color: red; /*border:1px white sol ...
- linux命令-挂载命令
一.挂载命令 1.mount 命令基本格式 linux 所有存储设备都必须挂载使用,包括硬盘 命令名称:mount 命令所在路径:/bin/mount 执行权限:所有用户 [root@localhos ...
- synchronized&volatile
synchronized(JVM实现的锁) 通过这两个关键字,我们可以很容易的实现同步多个任务的行为,可以实现同一时刻,只能有一条线程去访问共享资源 一: 修饰普通方法 多个线程,共同去竞争访问,方法 ...
- Maven 教程之 pom.xml 详解
作者:dunwu https://github.com/dunwu/blog 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计模式内容聚合 4. My ...
- Kubernetes的三种探针
k8s支持存活livenessProbe和就绪readinessProbe两种探针 两种探针都支持以下三种方式 1.exec 通过执行shell命令的方式,判断退出状态码是否是0 示例 exec: c ...
- C# webclient progresschanged downlodfileCompleted
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 原生js对cookie的增删改查
一.增 document.cookie = cname + "=" + cvalue + ";expires=" + expires + ";path ...
- docker 私有registry harbor安装
一,harbor安装: 参考:Installation and Configuration Guide 1,安装docker 2,安装docker compose sudo curl -L " ...
- ramdisk配置、解压、创建rootfs、启动简单分析
关键词:ramdisk.rdint..init.ramfs.__initramfs_start.__initramfs_size.rootfs.ramfs.populate_rootfs().gzip ...