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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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
使用PHP制作新闻系统的思路
2006/10/09 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
php验证session无效的解决方法
2014/11/04 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
Python中type的构造函数参数含义说明
2015/06/21 Python
python进行文件对比的方法
2018/12/24 Python
Python中print和return的作用及区别解析
2019/05/05 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
Pycharm安装python库的方法
2020/11/24 Python
python中实现词云图的示例
2020/12/19 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
工作过失检讨书
2014/02/23 职场文书
法人代表授权委托书
2014/04/08 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
现役军人家属慰问信
2015/03/24 职场文书
使用JS实现简易计算器
2021/06/14 Javascript