2013-01-17 73 views
0

我想加入我的list.Everytime为图像按钮淡入淡出和效果我的鼠标在标签div的当前标签div的图像下面 2个按钮应淡入淡出,当我离开时,他们应该淡出。我写了第一个标签div的JQuery效果。如何使它适用于所有图像?我使用php 5.5和heidsql。JQuery的影响不能正常工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<?php 
session_start(); 
if(!isset($_SESSION['name'])) 
{ 
    die("To access this page, you need to <a href='index.php'>LOGIN</a>"); 
} 
else 
    { 
    include('../conect.php'); 


        error_reporting (E_ALL^E_NOTICE); 
        $allowedExts = array("jpg", "jpeg", "gif", "png"); 
        $parts = explode('.', $_FILES["file"]["name"]); 
        $extension = end($parts); 
        if ((($_FILES["file"]["type"] == "image/gif")|| ($_FILES["file"]["type"] == "image/jpeg")|| ($_FILES["file"]["type"] == "image/png")|| ($_FILES["file"]["type"] == "image/pjpeg"))&& ($_FILES["file"]["size"] < 1000000)&& in_array($extension, $allowedExts)){ 



           if ($_FILES["file"]["error"] > 0){ 
            $mesaj= "Return Code: " . $_FILES["file"]["error"] . "<br />"; 
           } 

           $nume= $_FILES["file"]["name"]; 

           if (file_exists("../admin/upload/" . $_FILES["file"]["name"])){ 
            $mesaj= $_FILES["file"]["name"] . " already exists. "; 

           } 

           else{ 
             move_uploaded_file($_FILES["file"]["tmp_name"], 
             "../admin/upload/" . $_FILES["file"]["name"]); 
             $mesaj= "Stored in: " . "admin/upload/" . $_FILES["file"]["name"]; 

             mysql_query("INSERT INTO imagini (nume) VALUES ('$nume')"); 

            } 

         } 



    } 

?> 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Lista imagini</title> 
<meta name="viewport" content="width=device-width"> 
<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" /> 
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" /> 
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Economica&subset=latin,latin-ext'type='text/css'> 
<link rel="stylesheet" href="/css/megamenu.css"type="text/css" /> 
<link rel="stylesheet" href="/css/admin_tools.css" type="text/css" /> 



<script type="text/javascript" src="/javascript/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="/javascript/jquery-ui-1.8.18.custom.min.js"></script> 
<script type="text/javascript" src="/javascript/jquery.smooth-scroll.min.js"></script> 
<script type="text/javascript" src="/javascript/lightbox.js"></script> 
<script type="text/javascript" src="/javascript/megamenu.js"> </script> 
<script type="text/javascript" > 

//initializare megamenu 
    ddmegamenu.docinit({ 
     menuid:'solidmenu', 
     dur:200 
    }) 
//initializare lightbox 
jQuery(document).ready(function($) { 
     $('a').smoothScroll({ 
     speed: 1000, 
     easing: 'easeInOutCubic' 
     }); 

     $('.showOlderChanges').on('click', function(e){ 
     $('.changelog .old').slideDown('slow'); 
     $(this).fadeOut(); 
     e.preventDefault(); 
     }) 


     $("#tag1").mouseenter(function(){ //add the fadein effect for the buttons of the first picture 
      $("#Btag1").fadeIn(); 

     }); 
    $("#tag1").mouseleave(function(){ //add the fadeOut effect for the buttons of the first picture 
      $("#Btag1").fadeOut(); 
     }); 


    }); 

    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-2196019-1']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 




</script> 
</head> 
<body id="lista_imagini"> 
<?php include('menu_admin_panel.php') ?> 
<div id="lista_imagini_content"> 

     <div id="imagine"> 
      <form action="<?php $_PHP_SELF ?>" method="post" enctype="multipart/form-data"> 
      <label for="file">Poza</label><input type="file" name="file" /> 
      <input type="submit" value="Adauga imagine" class="buton_imagine" onchange="call" /> 
      </form> 
     </div>  

     <div id="mesaj_eroare"> 
       <span>Lista Imagini</span> 
     </div> 

     <div class="imageRow"> 
      <div class="set"> 

       <?php 
        $result=mysql_query("SELECT * FROM imagini"); 
        $result2=mysql_num_rows($result); 
        $i=1; 
        while($data=mysql_fetch_row($result)){ ?> 
            <div id=<?php echo'"tag'.$i.'" '; ?> style="z-index:500;background-color:green;"> 
              <div class="single"> 


                <a href="../admin/upload/<?php echo $data[1];?>" rel="lightbox[plants]"> <img src= "../admin/upload/<?php echo $data[1];?>" /></a> 

                 <div id=<?php echo'"Btag'.$i.'" ';$i++; ?> style="display:none;"> 
                  <div id="buton_slide" > 
                   <a href="delete.php?id_imagini=<?php echo $data[0];?>&nume_imagini=<?php echo $data[1]?>" class="buton">Sterge</a></td> 
                  </div> 

                  <div id="buton_slide2" > 
                   <a href="imagine_noua.php?id_imagini=<?php echo $data[0];?>" class="buton">Editare</a></td> 
                  </div>        

                 </div> 
              </div>  

            </div> 

      <?php } ?>   

      </div> 
     </div> 
</div> 







<?php mysql_close($con);?> 
</body> 
</html> 
+4

难道我们想在你的代码发布到搜索相关的代码? –

+0

上次得到错误的答案,如“你没有包含javascript文件”只是因为我没有发布整个代码,只包含代码的相关部分,所以我想避免再次出现这种情况 – Johny

回答

1

尝试使用类而不是ID。 下面的示例代码。

$(".tagDiv").mouseenter(function(){ //add the fadein effect for the buttons of the first picture 
      $(this).find(".BtagBtns").fadeIn(); 

     }); 


<div class="imageRow"> 
    <div class="set"> 

     <?php 
      $result=mysql_query("SELECT * FROM imagini"); 
      $result2=mysql_num_rows($result); 
      $i=1; 
      while($data=mysql_fetch_row($result)){ ?> 
          <div class="tagDiv" id=<?php echo'"tag'.$i.'" '; ?> style="z-index:500;background-color:green;"> 
            <div class="single"> 


              <a href="../admin/upload/<?php echo $data[1];?>" rel="lightbox[plants]"> <img src= "../admin/upload/<?php echo $data[1];?>" /></a> 

               <div class="BtagBtns" id=<?php echo'"Btag'.$i.'" ';$i++; ?> style="display:none;"> 
                <div id="buton_slide" > 
                 <a href="delete.php?id_imagini=<?php echo $data[0];?>&nume_imagini=<?php echo $data[1]?>" class="buton">Sterge</a></td> 
                </div> 

                <div id="buton_slide2" > 
                 <a href="imagine_noua.php?id_imagini=<?php echo $data[0];?>" class="buton">Editare</a></td> 
                </div>        

               </div> 
            </div>  

          </div> 

    <?php } ?>   

    </div> 
</div> 
+0

谢谢你,它的工作 – Johny

0

我没有检查你的整个代码,只是复制了js,并做了一个非常简单的例子,它工作正常。 你可以在这里看到: http://jsfiddle.net/RqKkz/

$(document).ready(function(){ 

    $("#hoverme").mouseenter(function(){ //add the fadein effect for the buttons of the first picture 
    $(".button").fadeIn(); 
    }); 
    $("#hoverme").mouseleave(function(){ //add the fadeOut effect for the buttons of the first picture 
    $(".button").fadeOut(); 
    }); 
}); 

只是正常工作。如果你想要做的,你可以给图像需要的类别,而不是一个ID,使之成为所有这些工作类似的事情。

+0

是的第一张图片,但是什么我问的是如何使所有图像工作,因为我不想手动添加所有图像的淡入淡出效果。和我不能使用类的原因,然后当我将鼠标悬停在一个图像上,它显示所有图像上的按钮 – Johny

+0

首先http://jsfiddle.net/RqKkz/1/正在工作。只显示2个按钮。如果你有每个按钮的特定按钮(总共超过2),你可以简单地使用$(this).find(“。button”)而不是$(“。button”)... – gulty

-1

我面临同样的问题,但得到有效解决,当我改变

$(function() {}) 

jQuery(document).ready(function($) {}) 
+0

他已经在使用'jQuery(document).ready(function($){})' –