代码改变世界

jquery图片翻转

2009-09-29 14:36  cnb_mtime  阅读(1214)  评论(0)  编辑  收藏  举报
Boss看见人家的网站的图片是那种反转效果的，就叫我也做一个，真无奈，那是flash啊，我哪会。。。
幸亏有jquery，要不我还真弄不出来 。。。（先记下来，省得以后忘了，很简单的。。。）
<script type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript">

$(document).ready(function(){
      setInterval('autoimgs(".olddm img")',3000);
      autoimg();
});

function autoimg(){
    $(".olddm img").hover(function(){aaa(this)},function(){bbb(this)}); 
     var aaa = function(obj){
     autoimgs(obj)
    }
  var bbb = function(obj){  
   }   
}
function autoimgs(obj){
 $(obj).animate({width:"0"},{queue:true,duration:800})
    .animate({width:"135px"},{queue:true,duration:800})
}
</script>

<style type="text/css">
 *{
  margin:auto;
  font-size:12px;
 }
</style>

</head>
<body>
<div align="center" style=" width:506px; height:249px; margin:auto;">
 <div class="olddm" align="center" style="width:160px; height:214px; margin:auto; margin-top:33px; margin-left:5px; float:left;">
       <div style=" width:135px; height:176px;"><img src="1.gif" width="135" height="176" /></div>
        <div>2</div>
        <div align="center"><a href="/show/?id=14" target="_blank">09年8月直投刊</a></div>
  </div>
    <div class="olddm" align="center" style="width:160px; height:214px; margin:auto; margin-top:33px; margin-left:5px; float:left;">
        <div style=" width:135px; height:176px;"><img src="2.gif" width="135" height="176" /></div>
        <div>2</div>
        <div align="center"><a href="/show/?id=14" target="_blank">09年8月直投刊</a></div>
    </div>
    <div class="olddm" align="center" style="width:160px; height:214px; margin:auto; margin-top:33px; margin-left:5px; float:left;">
     <div style=" width:135px; height:176px;"><img src="3.jpg" width="135" height="176" /></div>
        <div>2</div>
        <div align="center"><a href="/show/?id=14" target="_blank">09年8月直投刊</a></div>
    </div>
</div>

只要是img的就ok了，上面的我没删。