如何用jquery实现点击图片出动画效果?(插件的形式写的)

编程da白菜 发布于 2016/09/25 22:14
阅读 332
收藏 0

html:

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
  <link rel="stylesheet" type="text/css" href="main.css">
  <script type="text/javascript" src="jquery-1.5.2.min.js"></script>

    <script type="text/javascript" src="main.js"></script>

    <script type="text/javascript">
    $(function(){
        $("#t1").jspuzzle();
    });
    </script>
    
    </head>
    <body>
        <table class="table" id="t1">
            <tr>
              <td><img id="i_11" src="_11.png"></td>
              <td><img id="i_12" src="_12.png"></td>
              <td><img id="i_13" src="_13.png"></td>
            </tr>
            <tr>
              <td><img id="i_14" src="_14.png"></td>
              <td><img id="i_15" src="_15.png"></td>
              <td><img id="i_16" src="_16.png"></td>
            </tr>
        </table>
    </body>
</html>



js:

(function ($) {
    $.fn.jspuzzle = function () {
        var p1 = $("#i_11");
        var p2 = $("#i_12");
        var p1_left = p1.offset().left;
        var p2_left = p2.offset().left;
        p1.animate({left:p2_left},1000);
        p2.animate({left:p1_left},1000);
    }
})(jQuery);



我这样写的方法动画出不来?还有就是要实现点击图片才出现动画要怎样实现?刚学js不久,求大神解答,谢谢。

加载中
0
szwx855
szwx855

试试这个吧。至少能动起来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script type="text/javascript" src="../jquery.js"></script>
 
 
    <script type="text/javascript">
    (function ($) {
    $.fn.jspuzzle = function (obj) {
    	$(obj).click(function(event){
    		var p1 = $("#i_11");
        var p2 = $("#i_12");
        var p1_left = p1.offset().left;
        var p2_left = p2.offset().left;
        
        var p1_td = p1.parent();
        var p2_td = p2.parent();
        p1_td.animate({
        	"padding-left":p2_left+'px',
        	},1000);
        p2_td.animate({"padding-left":p1_left+'px'},1000);
    		
    	});
        
    }
	})(jQuery);	
    	
    	
    $(function(){
        $("#t1").jspuzzle();
    });
    </script>
     
    </head>
    <body>
        <table class="table" id="t1">
            <tr>
              <td><img id="i_11" src="a.png"></td>
              <td><img id="i_12" src="b.gif"></td>
              <td><img id="i_13" src="a.png"></td>
            </tr>
            <tr>
              <td><img id="i_14" src="a.png"></td>
              <td><img id="i_15" src="b.gif"></td>
              <td><img id="i_16" src="a.png"></td>
            </tr>
        </table>
    </body>
</html>




编程da白菜
大神,还是没有反应啊?我只是改了图片的src和jq文件,其它都没改。
返回顶部
顶部