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:"雷军" ...
随机推荐
- 记录一次nginx502/504问题解决过程
最近自己在阿里云购买有段时间的服务器,一访问就出现nginx 504 Gateway Time-out. 想起以前是可以访问的,细想最近改动的配置应该不会涉及到这块啊. 就网上各种百度谷歌,最后终于找 ...
- 常用JS、jquery 命令（不断更新中）
设置用户粘贴板中的文本信息:window.clipboardData.setData('Text', location.href); 获取用户粘贴板中的文本信息: window.clipboardDa ...
- 如鹏网学习笔记（十四）ASP.NET
Asp.net笔记 一.Socket类 进行网络编程的类,可以在两台计算机之间进行网络通讯 过程: 向服务器发送指令: GET /index.html HTTP/1.1 Host:127.0.0.1: ...
- Win7系统下网站发布IIS配置
*本帖为个人收集贴,所有版权归:西门的后花园 http://ons.me* Technorati 标记: IIS,网站,发布,配置 一.首先是安装IIS.打开控制面板,找到“程序与功能”,点进去 二. ...
- [javaSE] 数据结构（二叉树-遍历与查找）
前序遍历:中,左,右 中序遍历:左,中,右 后序遍历:左,右,中 二叉树查找 从根节点进行比较,目标比根节点小,指针移动到左边 从根节点进行比较,目标比根节点大,指针移动到右边 /** * 前序遍历 ...
- 十九、异步任务编排CompletableFuture
一.简介 并发编程中我们经常创建异步线程来执行任务.但是,当异步任务之间存在依赖关系时,使得我们开发过程变得更加复杂.比如: 1.线程2依赖于线程1的执行结果 2.线程3依赖于线程1和线程2执行结果的 ...
- [LeetCode]Generate Parentheses题解
Generate Parentheses: Given n pairs of parentheses, write a function to generate all combinations of ...
- C# 调用C++DLL 类型转换
内容转自网上····这里做 备份··· 原文链接: http://blog.csdn.net/miss_easy/article/details/52470964 /C++中的DLL函数原型为 //e ...
- Effective C++ .47 traits与模板特化
#include <iostream> #include <cstdlib> #include <string> using namespace std; temp ...
- BZOJ4011: [HNOI2015]落忆枫音(dp 乘法原理)
题意 题目链接 Sol 非常妙的一道题 设\(inder[i]\)表示\(i\)号节点的度数 首先如果是个DAG的话,可以考虑在每个点的入边中选一条边作为树形图上的边,这样\(ans = \prod_ ...