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. 想起以前是可以访问的,细想最近改动的配置应该不会涉及到这块啊. 就网上各种百度谷歌,最后终于找 ...
- java并发编程（5）并发程序测试
并发程序测试 一.正确性测试 如:对一个自定义缓存的测试 //自定义的缓存 public class SemaphoreBoundedBuffer <E> { private final ...
- Python——基本的方法（2）
Python内置了很多有用的函数,我们可以直接调用. 要调用一个函数,需要知道函数的名称和参数,可以直接从Python的官方网站查看文档. 常见的方法: 绝对值方法abs(-100),得到100: 最 ...
- Cheatsheet: 2017 07.01 ~ 07.31
Other 8 Key Application Performance Metrics & How to Measure Them The Code Review: The Most Impo ...
- Linux下一个最简单的不依赖第三库的的C程序（1）
如下代码是一段汇编代码,虽然标题中使用了C语言这个词语,但下面确实是一段汇编代码,弄清楚了这个代码,后续的知识点才会展开. simple_asm.s: #PURPOSE: Simple program ...
- express中间件笔记整理
expressexpress概念:express是基于nodejs的HTTPS模块构建出来的一个web应用开发框架,在nodejs之上扩展了 Web 应用所需的基本功能.本质上express应用就是调 ...
- react项目跨域问题
在用知乎写demo的时候碰到了跨域问题 解决跨域如下: 跨域代理解决 "proxy":"https://news-at.zhihu.com", 请求的时候, ...
- React 入门实例教程[阮一峰的网络日志] (分享)
作者: 阮一峰 https://github.com/ruanyf/react-demos 转自:http://www.ruanyifeng.com/blog/2015/03/react.html 对 ...
- 使用nodeJs安装Vue-cli （win10 使用管理员身份）
TIP:win10下安装,使用管理员身份进行,否则会有权限限制. 1,安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下,进行命令行全局安装vue-cli.(n ...
- this keyword details
学生类: package com.itheima_07; /* * 学生类 * * 起名字我们要求做到见名知意. * 而我们现在的代码中的n和a就没有做到见名知意,所以我要改进. * * 如果有局部变 ...