请问css下拉自动缓冲是怎么实现的?

html-css021

请问css下拉自动缓冲是怎么实现的?,第1张

看你的描述 ,应该是lazyload

只能用javascript实现

如jquery的lazyload插件能实现图片的延迟载入

原理:将html中所有img标签的src属性都替换空,把src的存到自定义的属性中,当页面滚动到img标签位置时再载入进来。

加个变量,每点击一次,给这个变量赋值一次。

然后再判断一下是第几次点击,这样就可以每点击一次,执行一个函数。

这样,不只是再走一段,就是变成其它样式,甚至让其它元素运动起来都是可以的。

比如,简单修改一下你上面的代码:

<!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-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style>

#div1{width:100pxheight:100pxbackground:redposition:absolute}

</style>

<script>

window.onload = function()

{

    var oDiv = document.getElementById('div1')

    var oBtn= document.getElementById('btn')

    oBtn.onclick = move

}

  var i=0

  var timer = null

function move()

{  

  clearInterval(timer)

    i++

   if(i%2==1){

   timer = setInterval(function()

  {

        var oDiv = document.getElementById('div1')

        var speed = (80-oDiv.offsetLeft)/8

        speed = speed > 0?Math.ceil(speed) : Math.floor(speed)

        oDiv.style.left = oDiv.offsetLeft + speed + 'px'

   },30)

 }

   else{

    timer=setInterval(function()

  {

        var oDiv = document.getElementById('div1')

        var speed = (0-oDiv.offsetLeft)/8

        speed = speed > 0?Math.ceil(speed) : Math.floor(speed)

        oDiv.style.left = oDiv.offsetLeft+speed + 'px'

},30)

   }

      

    }

</script>

</head>

<body>

<input type="button" value="move" id="btn"/>

<div id="div1"></div>

</body>

</html>

(这个思想我一开始就想到了,但是,一直忘了关定时器,所以,想要的效果一直没做出了,找人帮忙后才搞定!!)

因为IE6的兼容性问题,所以这不考虑用fixed,代码如下,用了js的滚动事件

<html>

<head>

<meta charset="utf-8" />

<!-- CSS部分,宽度各100,红色背景,加了定位属性。 -->

<style>

  *{margin:0padding:0}

  #div1{width:100pxheight:100pxbackground:#F00position:absolutetop:100pxleft:0}

</style>

</head>

  <body style="width:5000pxheight:500pxbackground:#F7F7F7">

    <div id="div1">我是固定的</div>

  </body>

  <!-- js控制 开始 -->

  <script>

    //添加滚动事件

    window.onscroll=function(){

      //获取横向滚动距离的值

      var nWidth=document.documentElement.scrollLeft||document.body.scrollLeft

      //获取div标签对象

      var oDiv=document.getElementById('div1')

      //将div的left值更改为横向滚动值,从而达到固定位置的目的

      oDiv.style.left=nWidth+'px'

    }

  </script>

  <!-- js控制 结束 -->

</html>

原理已在注释中说明,例子不算很完美(滚动过快会闪烁,需要额外增加缓冲效果解决),仅供参考。