闲扯 Javascript 04 滚动条
<style>
*{ margin:0px; padding:0px;}
#div1{ width:712px; height:108px; margin:100px auto; position:relative; background:#F00; overflow:hidden;}
#div1 ul{ position:absolute; left:0px; top:0px; }
#div1 ul li{ float:left; list-style:none; width:178px; height:108px;}
</style>
<script> window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var oLi=oDiv.getElementsByTagName('li'); oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
var num=-2; function move()
{
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0';
}
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px'; //当oUl.style.left>0 也就是left 到达右边，后面跟着出现红色，此时只需把它的宽度拉到offsetWidth的中段(oUl的宽度)即可
}
oUl.style.left=oUl.offsetLeft+num+'px';
} timer=setInterval( move
,30)
oDiv.onmouseover=function ()
{
clearInterval(timer);
}; oDiv.onmouseout=function ()
{
timer=setInterval(move, 30);
}; document.getElementsByTagName('a')[0].onclick=function ()
{
num=-2;
}
document.getElementsByTagName('a')[1].onclick=function (){ num=2;} }; </script>
</head> <body>
<a href="#">向左走</a>
<a href="#">向右走</a>
<div id="div1">
<ul> <li> <img src="data:images/1.jpg"/></li>
<li> <img src="data:images/2.jpg"/></li>
<li> <img src="data:images/3.jpg"/></li>
<li> <img src="data:images/4.jpg"/></li> </ul>
</div>
</body>
闲扯 Javascript 04 滚动条的更多相关文章
- javascript自定义滚动条插件，几行代码的事儿
在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...
- 原声JavaScript实现滚动条·改1
修正了获取元素相对视口左距离的逻辑问题(之前的函数实际获取的是相对于页面左距离).去除了调试时忘记删除的mouseleave事件.将创建滚动条的功能单独列为一个函数. 添加了鼠标点在滚动条什么位置,就 ...
- javascript实现 滚动条滚动 加载内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转】Selenium 利用javascript 控制滚动条
http://luyongxin88.blog.163.com/blog/static/92558072011101913013149/ < xmlnamespace prefix =" ...
- javascript 获取滚动条高度+常用js页面宽度与高度
/******************** * 取窗口滚动条高度 ******************/function getScrollTop(){ var scrollTop=0; ...
- 原生JavaScript实现滚动条
没事找事,明明overflow:scroll|auto就可以,只是难看点(实际上css也能设置).只当练习写拖拽.监听事件.位置检测了. 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根 ...
- javascript 获取滚动条高度+常用js页面宽度与高度（转）
/******************** *获取窗口滚动条高度 ******************/ function getScrollTop() { var scrollTop=0; if(d ...
- 闲扯 Javascript 01 实现选项卡
javascript 实现选项卡 今天下午的两节课,在机房闲来没事 ,就学习了javascript 怎么获取HTML的标签,改变CSS样式,资料来源 智能社! <script> windo ...
- 闲扯 Javascript 00
引言 Javascript 的作用在此就不阐述了,相信你已经知道它的用途!那我说点什么呢? 不如就和大家先扯一把,后面的工作 随后后展开吧! 首先声明:我个人对Javascript 认识,我只知道它 ...
随机推荐
- HDU 3746 Cyclic Nacklace KMP
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=3746 KMP算法—— AC代码: #include <iostream> #include ...
- cocos2d-x新手学习之Helloworld(第三篇)[版本号:cocos2d-x-3.1.1]
上篇中,能够正常执行NDK中的样例.可是由cocos2d-x生成的项目,不能编译成功.上一篇戳这里: http://blog.csdn.net/xjjjjjjjjjjj/article/details ...
- Android的电源管理框架
Android的电源管理框架 Android通过锁和定时器来切换系统的状态,使系统的功耗降至最低,整个系统的电源管理框架分成五个部分:应用层,framework层,JNI层,HAL层和内核层.电源管理 ...
- linux进程间通信之信号
1.wait()函数 原型:pid_t wait(int *status) 子进程退出时,它向父进程发送一个SIGCHLD信号,默认情况是总是忽略SIGCHLD信号,此时进程状态一直保留在内存中,因 ...
- c 输入两个数，第一个数决定一个nXn的矩阵，第二个数决定从1开始赋值，赋值的上限 (MD花了半天时间,思路不对害死人)
输入两个数,第一个数决定一个nXn的矩阵,第二个数决定从1开始赋值,赋值的上限 比如: 输入: 输出: 输入: 输出: #include<stdio.h> int main(void) { ...
- swiper，animate使用方法
1.先链接css和js文件 <link rel="stylesheet" type="text/css" href="css/swiper-3. ...
- 字符串匹配算法（KMP）
字符串匹配运用很广泛,举个简单例子,我们每天登QQ时输入账号和密码,大家有没有想过账号和密码是怎样匹配的呢?登录需要多长时间和匹配算法的效率有直接的关系. 首先理解一下前缀和后缀的概念: 给出一个问题 ...
- Yii2归档安装法
打开dos 操作命令 1.先把init.bat 拖到dos命令窗口 打开 (如果拖过去没打开 可以回车Enter一下) 这里需要注意一下 下图红圈中是两种环境 0->开发环境 1-&g ...
- CURL采集
<?php $url='';//输入'网址 $ch = curl_init(); $timeout = 5;//超时时间 curl_setopt ($ch, CURLOPT_URL, $url) ...
- Python网络编程——修改套接字发送和接收的缓冲区大小
很多情况下,默认的套接字缓冲区大小可能不够用.此时,可以将默认的套接字缓冲区大小改成一个更合适的值. 1. 代码 # ! /usr/bin/env python # -*- coding: utf-8 ...