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:"雷军" ...
随机推荐
- IOS仿微信朋友圈好友展示
前几天小伙伴要帮他做一个群聊功能,里面有好友列表,要求和微信的差不多(见下图),让小伙伴自己实现了下,他将CollectionView放在tableView的tableHead中,可是当添加好友或删除 ...
- [编程] C语言Linux系统编程-等待终止的子进程（僵死进程）
1.等待终止的子进程(僵死进程): 如果一个子进程在父进程之前结束,内核会把子进程设置为一个特殊的状态,处于这种状态的进程称为僵死进程 当父进程获取了子进程的信息后,子进程才会消失. pid_t wa ...
- SpringBoot 初体验
1.Spring Boot 简介 简化Spring应用开发的一个框架 整个Spring技术栈的一个大整合 J2EE开发的一站式解决方案 2.微服务 2014, martin fowler 微服务:架构 ...
- 对JDK、JRE和JVM的一些浅薄理解
JDK:JDK(Java Development Kit),顾名思义是java程序的开发包,任何java程序想要运行都需要相应版本的JDK,可以到oracle下载(下载之后自带JRE和编译工具等,无需 ...
- 局域网内使用ipv6 通信
链路本地地址:用于网段内通信,不能跨路由访问 在ping本地链路地址和全球唯一地址时有点差别,链路本地地址需要加上网络接口号 Linux 查看ipv6链路本地地址:ifconfig linux系统pi ...
- RDCMan之DPI 和 Screen Resolution设置
Customer要求在以下环境验证几个bug DPI setting Minimum resolution 96 / 100% 1024x768 120 /125% 1280x960 144 / ...
- BZOJ P1212 [HNOI2004] L语言
标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D是若干个单词的集合. 我 ...
- css取消双击选中文字
在我们在写前端页面的时候,由于手速过快(当然这都是指的老司机),会经常双击,浏览器就会默认选中你双击的文本,这种感觉有点不太好. 这个时候就用到了 user-select:none; 属性. 因为存在 ...
- javascript的 热点图怎么写
在gis中,你如果用js来写热点图 不借助后台怎么搞,as的话比较容易有相应的类库甚至官方都有.而且用js不借助arcgis发布rest服务,(注:热点图可以借助服务的形式发布,arcgis for ...
- Python爬虫教程-05-python爬虫实现百度翻译
使用python爬虫实现百度翻译功能 python爬虫实现百度翻译: python解释器[模拟浏览器],发送[post请求],传入待[翻译的内容]作为参数,获取[百度翻译的结果] 通过开发者工具,获取 ...