 |
Create a page peel effect with jQuery
|
 |
#3854 |
|
Kaan
User is:
  Posts: 2772
Ülke:
 İstanbul - 34Meslek: Serbest Meslek
Age: 43
|
Create a page peel effect with jQuery
 The includes In order for this to work we will need to include the jQuery library and the pagePeel plugin itself in the HEAD section of our HTML document. Kod: <head> <script type="text/javascript" src="/jquery.js"></script> <script type="text/javascript" src="/pp/jQuery.pagePeel.js"></script> </head> Here jquery.js is in the same directory as our html file and jQuery.pagePeel.js is in the pp directory. We have to include them in that order. After that we have to create a DIV, that is going to be converted to our page corner. It is best that the DIV is positioned in at the bottom of the <body> section, before the closing </body> tag. Kod: ........... <div id="pagePeel"></div> </body> </html> The code Now that we have all the java script files necessary we need to write the code that is going to create our page peel effect. The code should be positioned in the head section, after the included files. Kod: <script type="text/javascript"> $(document).ready(function() { $('#pagePeel').pagePeel({ bigAd: '/images/bloggy_page_peel_light.gif', bigSWF: '/pp/page-peel-big.swf', adLink: 'http://www.stepinto.net', adLinkTarget: '_blank' }); } </script> $(document).ready is a special jQuery method that allows us to have code executed after the page has loaded. Inside, on line 2 we have the special method, .pagePeel that was included in the page with the pagePeel library. We are basically converting the DIV with an id of pagePeel into the page corner animation. The method takes an object as a parameter and you can see from line 3 to line 6 that we have used several properties. bigAd for the background image of the ad, bigSWF is the address of the default swf flash file that comes with the plugin (it creates the page peel effect), adLink for the address that the animation leads to and adLinkTarget is for the target (in this case it opens in a new window). You maybe wonder where do we specify the size and the position? The default size is 500?500 pixels and we don?t need to specify it additionally (only if we want a different size). For the purpose you can add the following properties: smallWidth and smallHeight (for the small, inactive version) and bigWidth and bigHeight for the full version. There also more interesting properties for which you can refer to at the plugin?s homepage. You can change the background graphic anyway you like. It is important that it is the same size as the size of the full version of the animation. Bu mesaj Kaan tarafından 2011-04-18 17:34 GMT, 5520 Gün önce düzenlendi. |
Emlak, Oto Galeri, Rent A Car, ?iir, Edebiyat Script Sipari?lerinizi Verebilirsiniz. Detaylar ??in: kaan@ntka.org Seditio 170 ?ndir Capte M?zik ?ndir Seditio Toolbar ?ndir |
 |
 |
