JS小功能(offsetLeft实现图片滚动效果)实例代码


Posted in Javascript onNovember 28, 2013

效果:

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>
Javascript 相关文章推荐
js判断两个日期是否相等的方法
Sep 10 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
angular+webpack2实战例子
May 23 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
基于form-data请求格式详解
Oct 29 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 #Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 #Javascript
javascript打印html内容功能的方法示例
Nov 28 #Javascript
javascript列表框操作函数集合汇总
Nov 28 #Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 #Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 #Javascript
javascript获取元素CSS样式代码示例
Nov 28 #Javascript
You might like
如何选购合适的收音机
2021/03/01 无线电
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
php json相关函数用法示例
2017/03/28 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
浅谈node的事件机制
2017/10/09 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
python http接口自动化脚本详解
2018/01/02 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python读取Excel实例详解
2018/08/17 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
公司年会搞笑主持词
2014/03/24 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
小学班主任教育随笔
2015/08/15 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Django如何与Ajax交互
2021/04/29 Python
Java版 单机五子棋
2022/05/04 Java/Android
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL