首页 > 建站教程 > JS、jQ、TS >  纯js图片倒影代码正文

纯js图片倒影代码

        纯js写的兼容IE6的图片倒影效果。其实,就是在图片的下面加个ul,在ul中加入高度为1,宽度和图片一样宽的li,li里面用js循环,背景为图片,只不过每次只显示1像素的高,再用背景定位,第一个li,就显示图片最底下的1像素,第二个li显示图片从底部开始的第2像素的内容,以此类推,最后一个li显示图片最顶部的1像素高的内容,也就是图片有多高,就有多少个li,用js循环很好实现,最后用js将循环的li加入ul。

        效果图如下:

纯js图片倒影代码

        js代码如下:
var ul = document.getElementById("box");
var li = "";
for(var i=0;i<128;i++){
	li += "<li style='background-position:0 "+ (i-128) +"px;'> </li>";
}
ul.innerHTML  = li; 
          运行下面的代码,查看js倒影效果的实现:


提示:您可以先修改部分代码再运行