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>

赞 (0)

相关推荐

  • JS实现的相册图片左右滚动完整实例

    本文实例讲述了JS实现的相册图片左右滚动效果.分享给大家供大家参考,具体如下: 执行左移右移函数: var $get = function(id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = s

  • 原生javascript实现图片滚动、延时加载功能

    原生javascript实现图片滚动、延时加载功能

    实现效果:下拉滚动条时,图片出现在可见区域时,才开始加载 思路: (1)img标签,把真实的图片地址,放在自己设置的属性里面,如 lazy-src (2)获取img离页面的高度(在JQ里是offset().top),原生是: img.getBoundingClientRect().top + document.body.scrollTop||document.documentElement.scrollTop (3)判断img出现的位置是否在可见区域里: .在浏览器的可见区域,justTop>s

  • js实现鼠标经过时图片滚动停止的方法

    本文实例讲述了js实现鼠标经过时图片滚动停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • js+div实现图片滚动效果代码

    横向 <div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();" onmouseout="doscroll()"> <div id="demo1" style="white-space:nowrap;padding:0;"

  • 解析javascript瀑布流原理实现图片滚动加载

    解析javascript瀑布流原理实现图片滚动加载

    先科普下瀑布流吧 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像美丽说.淘宝网都有使用. 这是我实现的一个效果,就是怎么滚动都加载不玩.就跟瀑布一样流啊流! 这里的实现方式我们只说Js实现方法 实现原理: 对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度  3 最小列数 ,得到列数

  • js实现网站首页图片滚动显示

    复制代码 代码如下: <div id="demo"> <div id="indemo"> <div id="demo1"> <asp:Repeater ID="Pro_List" runat="server"> <ItemTemplate> <a href="/Product/html/<%#Eval("id&quo

  • js图片滚动效果时间可随意设定当鼠标移上去时停止

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

  • JavaScript实现简单图片滚动附源码下载

    昨晚德国和葡萄牙的焦点之战你看了吗?北京时间凌晨的比赛中,C罗领衔的葡萄牙0-4德国被完灭--他是金球奖得主.欧洲金靴.欧冠冠军核心,在葡萄牙队--9张图 C罗告诉你什么叫欲哭无泪 复制代码 代码如下: <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

  • JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析

    淘宝图片处理讨论 淘宝网页面很大,但是打开速度很快.其对图片处理是运用了滚动加载,就是滚动轴滚到哪里,图片在哪里加载.但是你想查看他的源代码,那要费九牛二虎之力吧,因为他们代码压缩合并做的很好!因为图片是滚动加载的,初始化的时候图片不加载,那么当你在页面底部刷新页面的时候,底部的页面通常不会加载出来,淘宝网的做法貌似是(因为我没有看他们的源代码,只是凭操作),刷新让页面回到顶部. 模仿淘宝,做滚动图片加载 这里想到了三种方法: 1.javascript懒加载之可视区域加载 <!DOCTYPE h

  • js实现按钮控制带有停顿效果的图片滚动

    本文实例使用js实现带有停顿效果的图片滚动,受按钮控制,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动2</title> <style> #warp{ width: 1250px; height: 300px; overflow: hidden; margi

  • JS简单的轮播的图片滚动实例

    [javascript]  复制代码 代码如下: var forimg = function (foritem, hoverStop, defaultfor) {          var _foritem = foritem.constructor == jQuery ? foritem : $(foritem);          var imgarr = [              { "z-index": 1, "width": 100, "he

  • wap图片滚动特效无css3元素纯js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所以下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面 问题根源主要是不能判断是点击还是拖动,手机

随机推荐