jq封装-无缝滚动效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
*{
margin:0;
padding: 0;
}
.outer{
position: relative;
margin:30px auto;
border:1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.outer1{
width: 300px;
height: 100px;
}
.outer1 ul{
width: 100%;
}
.outer1 li{
margin-bottom: 10px;
}
.outer ul{
position: absolute;
top: 0;
list-style: none;
overflow: auto;
}
li{
line-height: 20px;
text-align: center;
word-break: break-all;
}
.outer2{
width: 80%;
height: 20px;
line-height: 20px;
white-space: nowrap;
}
.outer2 li{
float: left;
margin-right: 30px;;
height: 100%;
vertical-align: top;
}
</style>
</head>
<body>
<div class="outer outer1">
<ul>
<li>1111111111111111111111111111111111111111111111111111111111111111111111111</li>
<li>222</li>
<li>333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</li>
<li>44444</li>
<li>5555</li>
<li>666</li>
<li>77777777777777777777777777777777777777777777777777777777777777777777777777</li>
<li>888888</li>
</ul>
</div>
<div class="outer outer2">
<ul>
<li>11111111111111111111111111</li>
<li>222222222222222222222222222222222</li>
<li>3333333333333333333333333</li>
<li>44444</li>
<li>5555</li>
<li>666666666666666666666666666666666666666666666666666666666666</li>
<li>777777777777777</li>
<li>888888</li>
</ul>
</div>
</body>
<script src="../../../js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
/* var $outer=$(".outer1"),$ul=$(".outer1>ul"),$h=$ul.height(),$outerH=$outer.height(),step=0,timer=null;
function move(){
var top = $ul.position().top,$li=$ul.find("li").eq(0),hei=$li.height();
if(top==-hei){
var origin = $li.detach();
$ul.append(origin).css("top",top+hei);
}
$ul.css("top",--$ul.position().top);
timer=window.setTimeout(move,20);
}
function clear(){
clearTimeout(timer);
timer=null;
}
move();
$outer.hover(function(){
clear();
},function(){
move();
});*/
$.fn.scroll=function(opt){
var timer;
function move(){
var range,_val,origin,$li=opt.list.find("li").eq(0);
if(opt.direction == "top"){
range=opt.list.position().top;
_val=parseFloat($li.height())+parseFloat($li.css("marginTop"))+parseFloat($li.css("marginBottom"));
if(range==-_val){
origin = $li.detach();
opt.list.append(origin).css("top",range+_val);
}
if(opt.el.height() <= opt.list.height()){
opt.list.css("top",--opt.list.position().top);
}
}else{
var lenTotal = 0;
opt.list.find("li").each(function () {
lenTotal += parseFloat($(this).width()) + parseFloat($(this).css("marginRight")) + parseFloat($(this).css("marginLeft"))
});
opt.list.css("width", lenTotal);
range=opt.list.position().left;
_val=parseFloat($li.width())+parseFloat($li.css("marginRight"))+parseFloat($li.css("marginLeft"));
if(range==-_val){
origin = $li.detach();
opt.list.append(origin).css("left",range+_val);
}
if(opt.el.width() <= opt.list.width()){
opt.list.css("left",--opt.list.position().left);
}
}
timer=window.setTimeout(move,opt.time);
}
function clear(){
clearTimeout(timer);
timer=null;
}
move();
opt.el.hover(function(){
clear();
},function(){
move();
});
};
//el表示容器。
//list表示容器中的列表ul
//direction表示方向 top为竖向滚动 left为横向滚动
// time表示滚动时间 一般为10 20 30较为合适
//横向无缝滚动 如果li必须要设置为inline-block 则最好结尾符不要换行 否则会有跳动效果
$.fn.scroll({el:$(".outer1"),list:$(".outer1>ul"),direction:'top',time:20});
$.fn.scroll({el:$(".outer2"),list:$(".outer2>ul"),direction:'left',time:10});
})
</script>
</html>
jq封装-无缝滚动效果的更多相关文章
- liMarquee演示12种不同的无缝滚动效果
很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 信息无缝滚动效果marquee
横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
- javascript小例子：實現四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...
- js 无缝滚动效果学习
<!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...
- jQery无缝滚动效果
思路: 赋值所有li,添加到ul末尾,重新计算ul宽度 每次移动一个固定的值,当超出一半时,将ul拉回原位 以下代码 <!DOCTYPE html> <html> <he ...
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- vue实现消息的无缝滚动效果
export default { data() { return { animate:false, items:[ {name:"马云"}, {name:"雷军" ...
随机推荐
- height百分比失效
heigh:100%失效 解决方案: 第一种 html, body { height: 100%; } 第二种 div { height: 100%; position: absolute; } 非定 ...
- yii2 页面加载警告框
在视图页面代码如下 <?php use kartik\alert\Alert; echo Alert::widget([ 'type' => Alert::TYPE_INFO, 'titl ...
- PL/SQL之包
1.包的定义 一个包由两个独立的部分组成--包头和包体.给部分被单独地存放在数据字典中. .1定义包头 语法: CREATE [OR REPLACE] PACKAGE [schema.] packag ...
- C# 相对路径指定详解
1. 根目录 .\\ 或者直接给出文件名称,是找根目录的路径. 如:path = "gs.mdb" 与 path = ".\\gs.mdb"是一个意思. 2. ...
- 【转】redis windows环境搭建
一.下载redis windows压缩包 地址参考: https://github.com/ServiceStack/redis-windows/tree/master/downloads https ...
- Cookie，Sesstion，Application 缓存。
Cookie客户端缓存. 1.引言 随着浏览器的处理能力不断增强,越来越多的网站开始考虑将数据存储在「客户端」,那么久不得不谈本地存储了. 本地存储的好处: 一是避免取回数据前页面一片空白,如果不需要 ...
- [linux] shell脚本编程-ubuntu创建vsftpd服务
1. useradd -s /bin/bash -m 用户名 , 创建用户,自动创建家目录 , 设置登录shell 2. echo 用户名:密码 | chpasswd ,非交互式设置密码 3. ...
- UNIX 网络编程笔记-CH2：TCP、UDP概貌
好久不读不用又忘得差不多了,还是感叹Richard Stevens真是太刁,25年前第一版. "Tcp state diagram fixed new" by Scil100. L ...
- python学习之老男孩python全栈第九期_day028知识点总结——面向对象进阶、hashlib
一. 面向对象进阶与实例 dic = {'k': 'v' } 对象:存储 属性 和 调用方法 dic['k'] = 'v' class Foo: def __init__(self, name, ag ...
- Python之正则表达式模块
正则表达式符号: . ^ $ * + ? {} () | [] .一个点代表一个字符 ^代表开头 $代表结尾 *代表有0到无数个 [0,+00] ?代表有0到1个 [0,1] +代表有1到无 ...