jquery不循环 图片滚动一屏,最后一步不够一屏幕怎么滚动剩余的li的距离,不留空白。

jquery不循环 图片滚动一屏,最后一步不够一屏幕怎么滚动剩余的li的距离,不留空白。,第1张

<!DOCTYPE HTML>

<html>

<head>

<meta charset=UTF-8>

<title>Nothing</title>

<style type="text/css">

 {

margin: 0;

padding: 0;

font-size: 14px;

list-style: none;

}

box {

width: 1000px;

margin: 50px auto;

height: 100px;

overflow: hidden;

background: #ccc;

position: relative;

}

l {

width: 50px;

height: 50px;

background: #f60;

position: absolute;

left: 0;

top: 25px;

}

r {

width: 50px;

height: 50px;

background: #f60;

position: absolute;

right: 0;

top: 25px;

}

box1 {

margin: 0 auto;

height: 100px;

overflow: hidden;

width: 800px;

background: #f00;

position: relative;

}

list {

width: 2000em;

position: absolute;

left: 0;

top: 0;

}

list li {

width: 260px;

height: 100px;

background: #333;

float: left;

margin-right: 10px;

font-size: 20px;

color: #fff;

line-height: 100px;

text-align: center;

}

</style>

<script type="text/javascript" src="jquery-180minjs"></script>

<script type="text/javascript">

var MOVE = 0, EACH = 3;

    $ (function ()

    {

    var list = $ ("divbox1 ul");

    var lis = listfind ("li");

    var width = liswidth () + parseFloat (liscss ("margin-right"));

    var all = Mathceil (lislength / EACH);

    $ ("divl")click (function ()

    {

    if (MOVE == 0)

    {

    return false;

    }

    liststop ()animate (

    {

    left : -width  (MOVE - EACH) + "px"

    }, "slow", function ()

    {

    MOVE -= EACH;

    });

    });

    

    $ ("divr")click (function ()

    {

    var tmp = MOVE + EACH;

    var other = lislength - tmp;

    if (other <= 0 || lislength <= EACH)

    {

    return false;

    }

    tmp = other < EACH  MOVE + other : MOVE + EACH;

    liststop ()animate (

    {

    left : -width  tmp + "px"

    }, "slow", function ()

    {

    MOVE += EACH;

    });

    });

    });

</script>

</head>

<body>

<div class="box">

<div class="l"></div>

<div class="r"></div>

<div class="box1">

<ul class="list">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

</div>

</div>

</body>

</html>

先了解一下对象的几个的属性: innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度 上无缝滚动 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; height: 100px; text-align: center; float: left; } #demo img { border: 3px solid #F2F2F2; display: block; } --> </style> 向上滚动 <div id="demo"> <div id="demo1"> <a href="#"><img src=" >

代码:\x0d\•$(function(){\x0d\\x0d\•//获取要定位元素距离浏览器顶部的距离\x0d\\x0d\•var navH = $("nav")offset()top;\x0d\\x0d\•//滚动条事件\x0d\\x0d\•$(window)scroll(function(){\x0d\\x0d\•//获取滚动条的滑动距离\x0d\\x0d\•var scroH = $(this)scrollTop();\x0d\\x0d\•//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定\x0d\\x0d\•if(scroH>=navH){\x0d\\x0d\•$("nav")css({"position":"fixed","top":0});\x0d\\x0d\•}else if(scroH回答于 2022-11-16

你好,实现如下,请现在 body 加一定的 br 出现上下滚动条 够长。不懂请追问。

希望采纳!!

<script src=">

以上就是关于jquery不循环 图片滚动一屏,最后一步不够一屏幕怎么滚动剩余的li的距离,不留空白。全部的内容,包括:jquery不循环 图片滚动一屏,最后一步不够一屏幕怎么滚动剩余的li的距离,不留空白。、如何在不改动html的情况下用jq实现图片的无缝滚动ps:图片已经实现了向左的滚动。、使用js或jq控制一个div,当滚动到页面顶部的时候固定在顶部,离开可继续滚动吗等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9398439.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-27
下一篇2023-04-27

发表评论

登录后才能评论

评论列表(0条)

    保存