jquery实现华丽的可折角广告代码

前端技术 2023/09/02 JavaScript

本文实例讲述了jquery实现可折角的广告代码。分享给大家供大家参考。具体如下：

这是一款可折角的广告代码，或许你已经看到过了，现在一些门户网站还可看到这种效果的身影，用鼠标滑过折角的边，即可出现下拉效果。

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

<!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 width=\"307\" height=\"319\" alt=\"sc.chinaz.com\" src=\"images/page_flip.png\"></a>
<div class=\"msg_block\"></div>
</div>
<div style=\"text-align:center;clear:both;\">
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/3393

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案