您有可能没有见过这么美的JavaScript 百叶窗代码了吧 - 信息发布软件,b2b软件,广告发布软件

<title>JS实现百叶窗</title>

<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
#ul1,#ul2{ width:300px; height:auto; float:left; border-top:1px #000000 solid; margin:20px;}
li{ width:100%; height:30px; overflow:hidden; position:relative; border-bottom:1px #333333 dashed; line-height:30px;}
li div{ position:absolute; top:-30px;}
li div p { height:30px;}
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload = function(){
var oUl = document.getElementById('ul1');
var oUl2 = document.getElementById('ul2');

//两秒延迟后，对右侧UL标签实行百叶窗效果；
setTimeout(function(){
      toShow(oUl2);
},2000);  ࡣ

//实现百叶窗函数
function toShow(obj){
      var aDiv = obj.getElementsByTagName('div');
      var iNow = 0;//共有的内容行数；
      var timer = null;//setInterval的返回值，用于clearInterval；
      var bBtn = true;
      //UL定时每4秒变换1次
      setInterval(function(){

         toChange();

      },4000);

      //UL变换1次
      function toChange(){
         //通过setInterval来对每一个li依次改变
         timer = setInterval(function(){
         //如果UL的每个li都变换过了，则停止，等待外层toShow（）再次调用toChange（）函数；
            if(iNow==aDiv.length){
                  clearInterval(timer);
                  iNow = 0;
                  bBtn = !bBtn;//用于从上往下信息滚完了，再从下往上回滚；
            }
            else if(bBtn){
                  startMove(aDiv[iNow],{top:0});
                  iNow++; //为了下次定时执行时变为操作下一条内容的变换
            }
            else{
                  startMove(aDiv[iNow],{top:-30});
                  iNow++;
            }

         },100);

      }

}

};
</script>

在桌机上新建文本文档，命名为晓博JavaScript特效测试.txt，在文本文档里中入HTML文档的基本元素如下，并保存。
<html>
<head>
<title>晓博JavaScript特效测试</title>
</head>
<body>
<div id="zy">
  <div id="login"></div>
  <div id="daohang">
  <ul>
  <li><a href="index.html">首页</a></li>
  <li><a href="jianjie.html">七夕简介</a></li>
  <li><a href="#">七夕节传说</a></li>
  <li><a href="#">七夕节习俗</a></li>
  <li><a href="#">诗词& 歌谣</a></li>
  <li><a href="#">七夕节寄语</a></li>
  </ul>
  </div>
</div>
</body>
</html>
2

第一步:把如下代码加入<head>区域中
<style>

</style>
3

第二步:把如下代码加入<body>区域中 ,并重名文档为HTML文件
<div id="i1" class="intro"></div><div id="i2" class="intro"></div><div id="i3"
class="intro"></div><div id="i4" class="intro"></div><div id="i5" class="intro"></div><div id="i6" class="intro"></div><div id="i7" class="intro"></div><div id="i8" class="intro"></div>
<SCRIPT language=javascript>
</SCRIPT>
4

用IE浏览器打开晓博JavaScript特效测试.html文件，可以看到图片跟随鼠标移动特效，如下图
5

我们把段代码加入到我们做成的网页中做为特效，这样我们的网页就可以有页面百叶窗效果
了，如下图