zoukankan      html  css  js  c++  java
  • jquery图片翻转

    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({"0"},{queue:true,duration:800})
        .animate({"135px"},{queue:true,duration:800})
    }
    </script>

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

    </head>
    <body>
    <div align="center" style=" 506px; height:249px; margin:auto;">
     <div class="olddm" align="center" style="160px; height:214px; margin:auto; margin-top:33px; margin-left:5px; float:left;">
           <div style=" 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="160px; height:214px; margin:auto; margin-top:33px; margin-left:5px; float:left;">
            <div style=" 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="160px; height:214px; margin:auto; margin-top:33px; margin-left:5px; float:left;">
         <div style=" 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了,上面的我没删。

  • 相关阅读:
    创建聚合工程的子工程时 webapp文件变灰色问题
    redis的各大数据类型
    webpack整合Vue
    springboot的介绍
    C# 4.0 新对象ExpandoObject
    Customer Data Import for AX2012
    【转】Javascript中最常用的55个经典技巧
    Sample for Integration G2 To MSCRM
    Connector for Microsoft Dynamics 安装配置(一)
    第二节 HTML5通用接口介绍
  • 原文地址:https://www.cnblogs.com/pipizhu/p/1576366.html
Copyright © 2011-2022 走看看