jquery implémente un magnifique code publicitaire pliable

jquery implémente un magnifique code publicitaire pliable_jquery

WBOY

Libérer： 2016-05-16 15:40:58

original

1269 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation jquery du code publicitaire pliable. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un code publicitaire pliable. Vous l'avez peut-être déjà vu. Cet effet peut également être observé sur certains sites Web portails. Utilisez la souris pour glisser sur le bord plié pour créer un effet déroulant.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-css-zd-adv-stylee-codes/

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery页面顶部折角图片撕开效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#pageflip").hover(function(){
  $("#pageflip img , .msg_block").stop().animate({width: '307px', height: '319px'}, 500);
 },function(){
  $("#pageflip img").stop().animate({width: '50px', height: '52px'}, 220);
  $(".msg_block").stop().animate({width: '50px', height: '50px'}, 200);
 });
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
img{behavior:url(iepngfix.htc)}
/* pageflip */
#pageflip{right:0px;float:right;position:relative;top:0px}
#pageflip img{z-index:99;right:0px;width:50px;position:absolute;top:0px;height:52px;ms-interpolation-mode:bicubic}
#pageflip .msg_block{right:0px;background:url(images/subscribe.png) no-repeat right top;overflow:hidden;width:50px;position:absolute;top:0px;height:50px}
</style>
</head>
<body>
<div id="pageflip">
<a href="#" target="_blank"><img    style="max-width:90%"  style="max-width:90%" alt="jquery implémente un magnifique code publicitaire pliable_jquery" src="images/page_flip.png"></a>
<div class="msg_block"></div>
</div>
<div style="text-align:center;clear:both;">
</div>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.