热门:网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置:.Net中文社区>> AJAX编程>>正文内容

jquery实现图片翻转效果

发布时间:2009年09月30日点击数: 未知

<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>

本站热点业务

更多模板/案例展示

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作