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 bug之Code Sign error:Provisioning profile
刚才解决一个版本冲突的bug,记在了博客里,这让我想起了另外一个bug,当时犹豫公司的开发者账号过期了,我打开应用运行时提示Code Sign error:Provisioning profile ...
- RxJS库
介绍 RxJS是一个异步编程的库,同时它通过observable序列来实现基于事件的编程.它提供了一个核心的类型:Observable,几个辅助类型(Observer,Schedulers,Subje ...
- JavaScript中有对字符串编码的三个函数：escape,encodeURI,encodeURIComponent
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...
- 微信WeUI基础
首先引入样式css和js 虽然基础的其实还有weui.min.css,但是为了一些动态效果,也要引入其他的东西. 基本框架 <!DOCTYPE html> <html lang=&q ...
- mysql 登录报错：ERROR 1045 (28000)
公司linux系统的mysql数据库root用户设置过密码,但常常用命令'mysql -u root -p'登录报错,有时又能登录.登录报错信息为: [root@localhost ~]# mysql ...
- 十一、信号量控制Semaphore
一.简介 有时候我们需要对一个资源的访问做线程数控制,以防雪崩等问题. JDK中,信号量可以处理这样的问题:Semaphore JDK文档:http://tool.oschina.net/upload ...
- sql = 和<>遵循的sql-92标准的设置SET ANSI_NULLS ON
说明 SQL-92 标准要求在对空值进行等于 (=) 或不等于 (<>) 比较时取值为 FALSE. 当 SET ANSI_NULLS 为 ON 时,即使 column_name 中包含空 ...
- UVA 455（最小周期）
最小周期可以用%枚举 #include <iostream> #include <string> #include <cstring> #include <c ...
- MyBatis学习(二)---数据表之间关联
想要了解MyBatis基础的朋友可以通过传送门: MyBatis学习(一)---配置文件,Mapper接口和动态SQL http://www.cnblogs.com/ghq120/p/8322302. ...
- Web Service与Apache CXF 框架
一.WebService简介 为了支持跨网络的机器间相互操作交互而设计,用于开发分布式的互操作的应用程序组件. Web Service服务通常被定义为一组模块化的API,它们可以通过网络进行调用,来执 ...