js图片无缝滚动

<html>
    <head>
        <title>图片滚动</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style>
            #demo {
                background:#fff;
                overflow: hidden;
                width:500px;
                border: 1px solid #ccc;
            }
            #demo img {
                border:3px solid #f2f2f2;
            }
            #indemo {
                float:left;
                width:800%;
            }
            #demo1 {
                float:left;
            }
            #demo2 {
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="demo">
            <div id="indemo">
                <div id="demo1">
                    <a href="#"><img src="../resources/images/1.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/2.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/3.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/4.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/5.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/6.jpg" border="0" /></a>
                </div>
                <div id="demo2"></div>
            </div>
        </div>
        <script type="text/javascript">
            var speed = 5;
            var obj = $(‘demo‘);
            var obj1 = $(‘demo1‘);
            var obj2 = $(‘demo2‘);
            obj2.innerHTML = obj1.innerHTML;
            function marquee() {
                if(obj2.offsetWidth - obj.scrollLeft <= 0) {
                    obj.scrollLeft -= obj1.offsetWidth;
                } else {
                    obj.scrollLeft++;
                }
            }
            var myMar = window.setInterval(marquee,speed);
            obj.onmouseover = function() {
                window.clearInterval(myMar);
            }
            obj.onmouseout = function() {
                myMar = window.setInterval(marquee,speed);
            }
            function $(id) {
                return document.getElementById(id);
            }
        </script>
    </body>
</html>

js属性

网页可见区域高:document.body.clientHeight;

网页可见区域宽:document.body.offsetWidth(包括连线的宽);

网页可见区域高: document.body.offsetHeight (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

屏幕可用工作区宽度:window.screen.availWidth;

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

时间: 2024-10-09 20:26:41

js图片无缝滚动的相关文章

js图片无缝滚动代码

想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,

js 图片无缝循环

<html> <head> <title>Js图片无缝滚动</title> <style type="text/css"> body{ background:gray; } #wrap{ width:810px; height:200px; border:1px solid black; position:relative; left:50%; top:50%; margin-left:-410px; margin-top:-

js多组图片无缝滚动

原文:js多组图片无缝滚动 源代码下载地址:http://www.zuidaima.com/share/1550463717608448.htm

JavaScript学习笔记5 之 计时器 &amp; scroll、offset、client系列属性 &amp; 图片无缝滚动

一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行一次相应的函数(不重复) 清除计时器: clearInterval( ); clearTimeout( ); 当计时器调用执行完毕时,它将返回一个timer ID, 如果将该ID传递给clearInterval,便可以终止代码的执行. 实例: 页面布局: <div id="wrap"

jquery图片无缝滚动特效

jquery图片无缝滚动插件制作左右无缝滚动图片和上下无缝滚动图片,一款简单的jQuery无缝滚动代码.JS代码 <script type="text/javascript"> //图片滚动 调用方法 imgscroll({speed: 30,amount: 1,dir: "up"}); $.fn.imgscroll = function(o){ var defaults = { speed: 40, amount: 0, width: 1, dir:

jquery图片无缝滚动代码左右 上下无缝滚动图片

<!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"> <head> <meta http-equiv="Content-

javascript实现图片无缝滚动(scrollLeft的使用方法介绍)

<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> .piczhanshi{width:976px;height:167px;border:1px #999999 solid;

javascript实现图片无缝滚动-------Day 27

今天感冒变严重了,鼻涕止不住啊,一卷卫生纸就这样报废了,还是不想吃药,熬熬总能熬过去吧,状态不是很好,看这么个小应用竟然看了很久的时间,到最后才像猛的明白了一样,而且查着好像有好几种做法的,今天先说说这种吧,比较好理解额. 所谓"图片无缝滚动",我们可以这样来理解,如果只用marquee,则需要尾部也离开容器了,头部才能从头部另一端出现,重新进行滚动,如是进行循环,而无缝滚动,就是说一种首尾相连的效果,头部是咬在尾部上的,尾部全部漏出来后,后面紧挨着显示头部的部分,这样首尾相连进行的滚

第41天:匀速、缓动运动和图片无缝滚动

一.匀速运动和缓动运动 缓动运动公式:leader=leader+(target-leader)/10;//leader为初始值0,target为结束值,10可以改变,值越大,速度越慢 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>运动</title> 6 <style>