点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果)
效果:
代码:
<head runat="server">
<title></title>
<style type="text/css">
#div1
{
width: 245px;
height: 150px;
background: red;
margin: 250px;
margin-left: 500px;
position: absolute;
overflow: hidden;
}
#div1 ul li
{
float: left;
width: 44px;
height: 66px;
margin-top: 20px;
margin-right: 5px;
list-style: none;
}
#div1 ul
{
width: 250px;
position: absolute;
padding: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oul = document.getElementsByTagName('ul')[0];
var odiv = document.getElementById('div1');
var ali = document.getElementsByTagName('li');
oul.innerHTML = oul.innerHTML + oul.innerHTML;
oul.style.width = (ali[0].offsetWidth + 5) * ali.length + 'px';
function roll() {
if (oul.offsetLeft <= -oul.offsetWidth / 2) {
oul.style.left = '0';
}
oul.style.left = oul.offsetLeft - 2 + 'px';
}
var timer = null;
timer = setInterval(roll, 30);
odiv.onmouseover = function () {
clearInterval(timer);
}
odiv.onmouseout = function () {
timer = setInterval(roll, 30);
}
};
</script>
</head>
<body>
<div id="div1">
<ul>
<li>
<img src="../Images/Number1/0.jpg" /></li>
<li>
<img src="../Images/Number1/1.jpg" /></li>
<li>
<img src="../Images/Number1/2.jpg" /></li>
<li>
<img src="../Images/Number1/3.jpg" /></li>
<li>
<img src="../Images/Number1/4.jpg" /></li>
</ul>
</div>
</body>
点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果)的更多相关文章
- JS类小功能
工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- 点滴积累【JS】---JS小功能(JS实现匀速运动)
效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> ...
- 点滴积累【JS】---JS小功能(onmousedown实现鼠标拖拽div移动)
效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...
- 点滴积累【JS】---JS小功能(onmousemove鼠标移动坐标接龙DIV)
效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: <head runat="server"> ...
- 点滴积累【JS】---JS小功能(JS实现模仿微博发布效果)
效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...
- 点滴积累【JS】---JS小功能(JS实现多功能缓冲运动框架)
效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...
- 点滴积累【JS】---JS小功能(JS实现隐藏显示侧边栏,也就是分享栏的隐藏显示)
效果: 思路: 首先,利用计时器setInterval实现DIV的隐藏显示功能,然后在进行一个判断,之后在把要移动的相应距离进行一个参数传递,再根据参数判断出移动的方向也就是offsetLeft移动的 ...
- 点滴积累【JS】---JS小功能(createElement和insertBefore添加div下面的节点)
效果: 代码: <head runat="server"> <title></title> <script type="text ...
随机推荐
- ORACLE EBS FORM 二次开发常用小技巧
1.锁住当前行 Set_Item_Instance_Property('main.import_flag', CURRENT_RECORD, UPDATE_ALLOWED, PROPERTY_OFF) ...
- 关停后Bitfinex放贷初探
据说Bitfinex放贷平均日息可达0.1%,现在就此做一番调研: 真的很先进,利率也像牌价一样挂卖: 1.美元利率为0.06%/天 2.美元利率最高,数币较低 参考资料:不买比特币也能赚钱,Bitf ...
- flask使用ajax上传图片或者文件
function upload_cover(){ var cover = new FormData(); var fileObj = document.getElementById('cover'). ...
- KL变换和PCA的数学推导
一些推导的笔记 上面分解成无穷维,大多数时候都不是的吧... 这里的d有限维,应该是指相对小于上面的分解的维度的某个数 参考资料 参考资料,上面是从最小化损失的角度,利用拉格朗日对偶的优化方法求解 p ...
- Newtonsoft.Json.4.5.11使用方法总结---反序列化json字符串
写在开头: 最近项目需求,需要在C#中处理json字符串,毫不犹豫的下载了Newtonsoft.Json 4.5.11(2012.12.17)http://json.codeplex.com/,然后百 ...
- spring的条件装配bean
1 应用程序环境的迁移 问题: 开发软件时,有一个很大的挑战,就是将应用程序从一个环境迁移到另一个环境. 例如,开发环境中很多方式的处理并不适合生产环境,迁移后需要修改,这个过程可能会莫名的出现很多b ...
- Razor语法(五)
约定:客户端代码称C域,服务器端代码称S域 0. 基本原则Razor模板默认是C域(与php.aspx相同)任何C域都可以内嵌S域行内S域不可内嵌C域,多行S域可内嵌任何C域@符号是关键符号,使用@从 ...
- 把mysql的数据导出成txt
把mysql的数据导出成txt select a from b into outfile '/sqlfile/a.txt'; my.ini里需要设置secure_file_priv = d:/sqlf ...
- HDU-2665-Kth number(划分树)
Problem Description Give you a sequence and ask you the kth big number of a inteval. Input The fir ...
- Java 8 Stream 教程
Java 8 Stream Tutorial 本文采用实例驱动的方式,对JAVA8的stream API进行一个深入的介绍.虽然JAVA8中的stream API与JAVA I/O中的InputStr ...