2010-11-15 67 views
-1

我最近臨到規定使用顏色框或 類似jQuery的燈箱插件作爲鼠標的jQuery懸停事件發射功能 jQuery的懸停顏色框圖像採集覆蓋

這似乎是使用$ .colorbox的好地方()並傳遞 集合作爲REL參數,但我不能得到這個工作..

http://colorpowered.com/colorbox/

.hover和顏色框不工作時,我通過HREF PARAM .. 但僅限於一個畫面

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset=utf-8 /> 
    <title>ColorBox Examples</title> 
    <style type="text/css"> 
     body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;} 
     a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;} 
     h2{font-size:13px; margin:15px 0 0 0;} 
    </style> 
    <link media="screen" rel="stylesheet" href="colorbox.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script src="./jquery.colorbox.js"></script> 
    <script> 
    $(document).ready(function(){ 

     $("[rel='example3']").hover( 
      function() { 
       $.colorbox({rel:"example3",width:"800",height:"800"}); 
       }, 
      function() { 
       } 
      ); 

    }); 
    </script> 
</head> 
<body> 

<h2>No Transition + fixed width and height (75% of screen size)</h2> 
<p><a href="./content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee 1.">Grouped Photo 1</a></p> 
<p><a href="./content/ohoopee2.jpg" rel="example3" title="Me and my grandfather on the Ohoopee 2.">Grouped Photo 1</a></p> 

<p><a href="./content/ohoopee3.jpg" rel="example3" title="Me and my grandfather on the Ohoopee 3.">Grouped Photo 1</a></p> 

回答

1

對不起這個問題..當我改變了我的想法吧..答案變得清晰的方式..顏色框與點擊鼠標懸停或當然的偉大工程.. 。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset=utf-8 /> 
    <title>ColorBox Examples</title> 
    <style type="text/css"> 
     body{font:12px/1.2 Verdana, Arial, san-serrif; padding:0 10px;} 
     a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;} 
     h2{font-size:13px; margin:15px 0 0 0;} 
    </style> 
    <link media="screen" rel="stylesheet" href="colorbox.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script src="./jquery.colorbox.js"></script> 
    <script> 
    $(document).ready(function(){ 

    $('.example3').colorbox({rel:'example3',width:'75%',height:'75%'}).mouseover(function(){ $(this).click(); }); 

    }); 
    </script> 
</head> 
<body> 

<h2>No Transition + fixed width and height (75% of screen size)</h2> 
<p><a href="./content/ohoopee1.jpg" rel="example3" class="example3" title="Me and my grandfather on the Ohoopee 1.">Grouped Photo 1</a></p> 
<p><a href="./content/ohoopee2.jpg" rel="example3" class="example3" title="Me and my grandfather on the Ohoopee 2.">Grouped Photo 1</a></p> 
<p><a href="./content/ohoopee3.jpg" rel="example3" class="example3" title="Me and my grandfather on the Ohoopee 3.">Grouped Photo 1</a></p> 

</body> 
</html