效果:

代码:

 <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实现图片滚动效果)的更多相关文章

  1. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  2. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  3. 点滴积累【JS】---JS小功能(JS实现匀速运动)

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> ...

  4. 点滴积累【JS】---JS小功能(onmousedown实现鼠标拖拽div移动)

    效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...

  5. 点滴积累【JS】---JS小功能(onmousemove鼠标移动坐标接龙DIV)

    效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: <head runat="server"> ...

  6. 点滴积累【JS】---JS小功能(JS实现模仿微博发布效果)

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...

  7. 点滴积累【JS】---JS小功能(JS实现多功能缓冲运动框架)

    效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...

  8. 点滴积累【JS】---JS小功能(JS实现隐藏显示侧边栏,也就是分享栏的隐藏显示)

    效果: 思路: 首先,利用计时器setInterval实现DIV的隐藏显示功能,然后在进行一个判断,之后在把要移动的相应距离进行一个参数传递,再根据参数判断出移动的方向也就是offsetLeft移动的 ...

  9. 点滴积累【JS】---JS小功能(createElement和insertBefore添加div下面的节点)

    效果: 代码: <head runat="server"> <title></title> <script type="text ...

随机推荐

  1. 通过修改VHD文件的位置来提升性能

    昨天用VHD装了一个Win 10的预览版体验了一下,感觉磁盘操作非常慢,便用HD Tune测试了一下,发现速度只有物理硬盘的一半都不到.          这个倒大出我意料之外,由于VHD的便利性,我 ...

  2. EF 通用数据层类

    EF 通用数据层父类方法小结 转载:http://www.cnblogs.com/yq-Hua/p/4165344.html MSSql 数据库 数据层 父类 增删改查: using System; ...

  3. Java并发包之闭锁/栅栏/信号量(转)

    本文转自http://blog.csdn.net/u010942020/article/details/79352560 感谢作者 一.Java多线程总结: 描述线程的类:Runable和Thread ...

  4. Android显示GIF动画 GifView

    android中显示gif动画原生态一般支持的不是很好,故找了一个开源的项目,现简单介绍如下: GifView 是一个为了解决android中现在没有直接显示gif的view,只能通过mediapla ...

  5. luci范例

    转自:http://www.cnblogs.com/souroot/p/4511760.html LuCI (Lua Configiration Interface) 是OpenWRT 的Web 管理 ...

  6. H5 manifest离线缓存

    请跳转我的有道云笔记查看: http://note.youdao.com/noteshare?id=caaf067c6e38820ba8f87b212c2327a9&sub=23E0F8F7A ...

  7. iOS:LKDBHelper实体对象映射数据库-第三方框架(在FMDB的基础上进行二次封装)

    一 插件简介: 其github地址:https://github.com/li6185377/LKDBHelper-SQLite-ORM 全面支持 NSArray,NSDictionary, Mode ...

  8. 【Python】解决Django Admin管理界面样式表(CSS Style)丢失问题

    配置Django Admin,关于如何启用请参考Django官方文档<Activate the admin site>.但是我在配置过程中登录http://example.com/admi ...

  9. Lidgren.Network – an introduction to networking in C# games

    Lidgren.Network – an introduction to networking in C# games http://genericgamedev.com/tutorials/lidg ...

  10. Web Services 指南之:Web Services 综述

    在本系列指南中.我们学习了怎样使用 Web Services.可是一个 web service 还包含可以使它活跃的组件.诸如 WSDL.UDDI 以及 SOAP.接下来我们了解一下 WSDL.UDD ...