维视文化

竖向滚动的JS图片展示: 时间：2010-3-9 21:02:49 作者：不详 来自：来自网络 浏览：次; <!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 type="text/css">
*{margin:0;padding:0;list-style:none;}
#content{text-align:center;width:100px;position:relative;margin:100px auto;overflow:hidden; background:#000000;}
#wrape{position:relative;height:330px;width:100px;overflow:hidden;z-index:10; margin:10px 0;}
#slid{position:absolute;left:0;top:0; width:100px;}
#slid li{ width:100px; height:100px; margin-bottom:10px; text-align:center;}
#slid img{width:94px;height:94px;padding:2px;border:1px solid #ccc;cursor:pointer;filter:alpha(opacity=50);opacity:0.5;}
#slid img.on{filter:alpha(opacity=100);opacity:1;cursor: auto;}
#pre,#next{width:98px;cursor:pointer; height:20px; line-height:20px; border:1px solid #000; font-size:12px; text-align:center; background:#FFFFFF;}
#next{}
</style>
</head>
<body>
<div id="content">
<p id="pre">
  上一组
</p>
<div id="wrape">
  <ul id="slid">
   <li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651273848S6a_t.jpg" alt="" /></li>
   <li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265126178Wj9r_t.jpg" alt="" /></li>
   <li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265125144i1c0_t.jpg" alt="" /></li>
   <li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124828qrfZ_t.jpg" alt="" /></li>
   <li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124326Jc9z_t.jpg" alt="" /></li>
   <li><img src="http://home.blueidea.com/attachment/201002/2/340113_1265124070F1Ls_t.jpg" alt="" /></li>
   <li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651233291P7P_t.jpg" alt="" /></li>
   <li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651273848S6a_t.jpg" alt="" /></li>
   <li><img src="http://home.blueidea.com/attachment/201002/2/340113_12651273848S6a_t.jpg" alt="" /></li>
  </ul>
</div>
<p id="next">
  下一组
</p>
</div>
<img id="img" src="images/340113_126512769357Z3_t.jpg" alt="" />
<script>
var isMoving = false;
function moveElement(elementID,final_x,final_y,interval) {
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    isMoving = true;
    var elem = document.getElementById(elementID);
    if (elem.movement) {
         clearTimeout(elem.movement);
    }
    if (!elem.style.left) {
       elem.style.left = "0px";
    }
   if (!elem.style.top) {
       elem.style.top = "0px";
   }
   var xpos = parseInt(elem.style.left);
   var ypos = parseInt(elem.style.top);
   if (xpos == final_x && ypos == final_y) {
      isMoving = false;
      return true;
   }
   if (xpos < final_x) {
       var dist = Math.ceil((final_x - xpos)/10);
       xpos = xpos + dist;
   }
   if (xpos > final_x) {
      var dist = Math.ceil((xpos - final_x)/10);
      xpos = xpos - dist;
   }
   if (ypos < final_y) {
       var dist = Math.ceil((final_y - ypos)/10);
       ypos = ypos + dist;
   }
   if (ypos > final_y) {
      var dist = Math.ceil((ypos - final_y)/10);
      ypos = ypos - dist;
   }
   elem.style.left = xpos + "px";
   elem.style.top = ypos + "px";
   var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
        elem.movement = setTimeout(repeat,interval);
   }
</script>
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
}
var height = $('wrape').clientHeight;
var imgs = $('slid').getElementsByTagName('img');
var lis = $('slid').getElementsByTagName('li');
var ulHeight = lis[0].clientHeight*lis.length
$('slid').style.height = ulHeight + 'px';
for(var i =0;i<imgs.length;i++){
imgs[i].onclick = function(){
  var src = this.src;
  removeClassName();
  this.className = 'on';
  $('img').src = src;
}
};
var removeClassName = function(){
for(var i =0;i<imgs.length;i++){
  if(imgs[i].className == 'on'){
   imgs[i].className ='';
  }
};
}
$('pre').onclick = function(){
if(isMoving)return;
var top = parseInt($('slid').style.top) || 0;
if(top < 0){
  moveElement("slid",0,top + height,10);
}
}
$('next').onclick = function(){
if(isMoving)return;
var top = parseInt($('slid').style.top) || 0;
if(-top < ulHeight - height){
  moveElement("slid",0,top - height,10);
}
}
</script>
</body>
</html>; 上一篇：CSS网页布局非常有用的八个技巧
下一篇：网页设计中的对比原则