2016-02-19 97 views
-12

我在jquery中有閃光效果,但閃光在背景上工作無論如何,我都可以在圖像上獲得那些閃光,而不是在背景上。jquery閃光效果不起作用

這裏是我的代碼:

(function() { 
 
    var sparkle = new Sparkle(); 
 
    sparkle.init('.summs'); 
 
})();
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} 
 
\t \t body{margin:0} 
 
\t \t article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block} 
 
\t \t a{background:transparent} 
 
\t \t a:active,a:hover{outline:0} 
 
\t \t h1{font-size:2em;margin:.67em 0} 
 
\t \t img{border:0} 
 
\t \t svg:not(:root){overflow:hidden} 
 
\t \t code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em} 
 
\t \t b,strong,optgroup{font-weight:700} 
 
\t \t pre,textarea{overflow:auto} 
 

 
\t \t html { 
 
\t \t \t height: 100%; 
 
\t \t } 
 

 
\t \t body { 
 
\t \t \t color: #AAA; 
 
\t \t \t background-color: #000; 
 
\t \t \t line-height: 1.4; 
 
\t \t \t margin: 50px; 
 
\t \t } 
 

 
\t \t h1 { 
 
\t \t \t color: #FFF; 
 
\t \t } 
 

 
\t \t h2 { 
 
\t \t \t padding: 10px 0; 
 
\t \t \t border-bottom: 1px solid #444; 
 
\t \t } 
 

 
\t \t a { 
 
\t \t \t color: inherit; 
 
\t \t } 
 

 
\t \t em { 
 
\t \t \t font-family: monospace; 
 
\t \t \t font-size: 16px; 
 
\t \t \t font-style: normal; 
 
\t \t \t background-color: #333; 
 
\t \t \t border-radius: 3px; 
 
\t \t \t padding: 3px 5px; 
 
\t \t } 
 

 
\t \t pre { 
 
\t \t \t color: #FFF; 
 
\t \t \t background-color: #444; 
 
\t \t \t padding: 0 25px; 
 
\t \t \t border-radius: 3px; 
 
\t \t } 
 

 
\t \t #wrapper { 
 
\t \t \t width: 20%; 
 
\t \t \t margin: auto; 
 
\t \t \t border:red solid 1px 
 
\t \t } 
 
\t \t div.summs { 
 
    background: rgba(0, 0, 0, 0) url("https://custom.cvent.com/9BC2D0988F874B5C8C15E9D14B6E2F3B/pix/21abaeaeb5d94c73b6814e90cf55d240.jpg") no-repeat scroll center top; 
 
    height: 516px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    text-align: center; 
 
    top: -40px; 
 
    width: 1000px; 
 
}
<script src="https://s3-us-west-1.amazonaws.com/creative-event/sparkle-effect/sparkle.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="summs"> 
 
    <div class="onslide2"> 
 
     <h1 class="bold"><strong>Sparkling Beauty&nbsp;Sparkling Service</strong></h1> 
 
     <br> 
 
     <br> 
 
     <h1 class="l2">GALA DINNER<br> 
 
      Sparkling Dior Ambassadress</h1> 
 
     <h1 class="l3">26<sup>th</sup> May 2016<br> 
 
      JW Marriott Hotel, Macau</h1> 
 
     <h1 class="l4">Dress Code: Rose Gold and Champagne&nbsp;</h1> 
 
     <h2>Remember to bring your sparkling outfit.<br> 
 
      There will be a prize for best-dressed.</h2> 
 
    </div> 
 
</div>

Fiddle

對不起,我不知道如何使這裏的鏈接。請求您複製網址並粘貼。

需要幫助

+6

問題尋求幫助調試必須包括必要的重現它最短的代碼**在問題本身NB ** - **請不要濫用代碼塊來解決這個需求** 。 –

回答

1

我自己創造了這個。如果你使用這個功能,如果你在某處給了我點數,會很好。但是,嘿,你做你想做的。

https://jsfiddle.net/virginieLGB/mL6uf3xm/5/

你只需要改變的是

mySparkle.init($(".summs") , 150); 

我猜你會想留住的元素,但是你可以用任何數量的你想星辰變「150」。

玩得開心

+0

對於那些只想嘗試一下的人來說,更清潔的小提琴:https://jsfiddle.net/virginieLGB/mL6uf3xm/6/ – VirginieLGB

+0

偉大的貢獻!謝謝。 – user1477388