Home > Developer > Web Develop
Recently made a similar to the tarot card flop effect, share to everyone.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"/> <title>Flip</title> <style> *{margin:0;padding:0;}. Content{background:Orange;Height:300px;margin:100px Auto;width:200px;} </style></Head><Body> <Divclass= "Content"></Div></Body></HTML><Scriptsrc= "Jquery.min.js"></Script><Scriptsrc= "Jquery-ui.min.js"></Script><Scriptsrc= "Jquery.flip.min.js"></Script><Script>$(function(){ $('. Content'). Click (function(){ var_this= $( This); _this.flip ({direction:'LR', Content:'Invert the contents after display, invert the contents after display, invert the content displayed after inversion, display the content after reversal', OnEnd:function() {_this.css ({background:'Orange', Color:' White'}). Unbind ('Click'); } }); });});</Script>
Parameter description:
Direction: Rollover direction with a total of 4 values (TB, BT, LR, RL), default TB
Content: Sets what is displayed inside the container after the rollover, can be text, can be HTML, and can even be a jquery object
Color: Sets the background color of the container after flipping
Speed: Set the rollover rate, the lower the value the faster
Onbefore: Set what needs to be done before flipping
Onanimation: Set the content to be executed when flipping to half
ONEND: Set what needs to be done after the rollover is complete
Ps:
jQueryUI JS requires only core and effects core
Website address:flip! A jQuery plugin v0.9.9
Click to download demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
