js限定内容的溢出滚动(offset,style.left)
1.
.html:
<div class="test" style="position: relative;">
<ul id="content" style="position: relative;">
<li>test111111111112222</li>
</ul>
</div> .scss:
.test{
overflow: hidden;
width: 200px;
}
ul#content{
list-style-type: none;
font-size: 0px;
white-space: nowrap;
overflow:hidden;
padding:0px;
li{
display: inline-block;
vertical-align: top;
font-size: 13px;
}
} .js:
<script>
$(function() {
var width = window.innerWidth - ;
var content = $('#content').html(); //原内容<li>test111111112222222222</li>
var content_width = $('#content li').width(); //原宽度 $('#content').html(content + content);
var w = $('#content li').length * $('#content li').eq().width(); //w 总长度
$('#content').css('width', w);
var timer;
var el = $('#content')[]; function toRight() {
window.clearInterval(timer);
var timer = window.setInterval(function () {
var offset = el.offsetLeft+; //偏移值 每次相对当前位置偏移10px
if(offset > ){ //第一次进来执行一次,以后为-xx 不再执行
//每次 +10 递增 -160,-150,-140,...,0,10 一旦>0,重置为-165
offset = -el.offsetWidth/;
}
el.style.left = offset+'px';
},)
} function toLeft() {
window.clearInterval(timer);
var timer = window.setInterval(function () {
var offset = el.offsetLeft - ;
if(offset<= -el.offsetWidth/){ // 同理 当向左偏移到一半的时候重置回来
offset = ;
}
el.style.left = offset+'px';
},)
} //如果容器的宽度够显示内容不进行滚动,不够则进行滚动显示
if($('.test').width() > content_width){
$('#content').html(content);
}
else{
toLeft();
}
});
</script>
2.写了后觉得可以优化下
// js部分:
$(function() {
var width = window.innerWidth - ;
var content_width = $('#content li').width();
$('.test').width(width);
if(width < content_width){ //如果内容长度大于显示长度
var timer;
var el = $('#content')[];
var offset = ; //内容的初始位置
var content = $('#content').html();
$('#content').append(content); // 将原内容复制为两条,目的:当向左偏移时,内容前部分消失,在内容的尾部后可以看到内容消失的头部
function toLeft(){
window.clearInterval(timer);
timer = window.setInterval(function () {
offset = el.offsetLeft - ; //每次偏移的量
if(offset < -content_width-){ //如果滚动到底了,重置回来
offset = ;
}
el.style.left = offset+'px'; //执行偏移
},); // 每100毫秒移动一遍
}
toLeft();
console.log(content_width);
}
}); //css:
ul#content{
list-style-type: none;
font-size: 0px;
white-space: nowrap;
padding:0px;
li{
display: inline-block;
vertical-align: top;
font-size: 13px;
padding-left: 20px;
}
}
js限定内容的溢出滚动(offset,style.left)的更多相关文章
- ScrollFix.js:一个 iOS5 溢出滚动的(有限)修复方案
Update: Unfortunately this does not 100% solve the problem, the script falls down when handling touc ...
- js和jquery实现页面滚动监听
js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...
- js函数——倒计时模块+无缝滚动
倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- js原生 + jQuery实现页面滚动字幕
js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...
- 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果
Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...
- js 鼠标左键拖动滚动
鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...
- Headroom.js – 快速响应用户的页面滚动操作
Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...
- js实现车轮的来回滚动
最近喜欢用js做车轮的来回滚动,简单的js动画分享给大家.有什么建议记得说出来大家一起讨论哦!效果图如下: 源代码: <style> #pic1{ width:20px; height:2 ...
- JS基础内容小结(DOM&&BOM)(二)
元素.childNodes:只读 属性 子节点列表集合 元素.nodeType:只读 属性 当前元素下的节点类型 元素.attributes : 只读 属性 属性列表集合 元素.children: 只 ...
随机推荐
- Ubuntu16.04下配置ssh免密登录
Ubuntu16.04下配置ssh免密登录 环境准备:新建两台虚拟机,而且两台虚拟机上都装有Ubuntu16.04的系统,使两台虚拟机之间保持互通状态.分别为两台虚拟机命名为A,B.假设我们要使A虚拟 ...
- Java基础——对象和类
将包含main方法的类称为主类. 变量的作用域是指变量可以在程序中引用的范围. 实例变量和静态变量的作用域是整个类,无论变量是在哪里声明的. 局部变量的声明和使用都在一个方法的内部. 一个类的实例变量 ...
- #Python编程从入门到实践#第四章笔记
#Python编程从入门到实践#第四章笔记 操作列表 1.遍历列表 使用for循环,遍历values列表 for value in values: print(value) 2.数字列表 使 ...
- python3爬取咪咕音乐榜信息(附源代码)
参照上一篇爬虫小猪短租的思路https://www.cnblogs.com/aby321/p/9946831.html,继续熟悉基础爬虫方法,本次爬取的是咪咕音乐的排名 咪咕音乐榜首页http://m ...
- GDOI--DAY2 游记
今天,熬夜不够多,果然,不出所料,爆零了... 第一题,看到数据之大,懵逼了,于是,敲了个二分SPFA,但是!最大的点GG了,呜呜~~~~(>_<)~~~~ ,于是,就不继续做第一题了(虽 ...
- Clion 不能杀死进程
描述 自己使用时发现点了结束按钮后,打开任务管理器,发现刚才运行的程序还在,并没有被杀死. 有时如果一个程序写了死循环,就会出现疯狂占用内存,最后不得不关机重启. 解决方案 这是他的社区有人也有这样的 ...
- centos 6.4安装杀毒软件clamAV 0.98[转]
原文出处: http://dnuser.blog.51cto.com/4863891/1303829 1.查看系统版本 [root@local]# lsb_release -a LSB Versi ...
- Caliburn micro 学习笔记...
页面跳转 LLS 结合 CM 使用方法 事件处理
- elk-logstash: window下指定jdk目录
\bin\logstash.bat文件中, SETLOCAL的后面,CALL "%SCRIPT_DIR%\setup.bat" 的前面增加一行: @echo off SETLOCA ...
- XML转译字符
&(逻辑与) & <(小于) < >(大于) > "(双引号) " '(单引号) ' [/size]