手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery实现华丽的可折角广告代码
jquery实现华丽的可折角广告代码
摘要:本文实例讲述了jquery实现可折角的广告代码。分享给大家供大家参考。具体如下:这是一款可折角的广告代码,或许你已经看到过了,现在一些门户网...

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

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

运行效果截图如下:

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

在线演示地址如下:

http://demo.jb51.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></div> </div> <div> </div> </body> </html>

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

【jquery实现华丽的可折角广告代码】相关文章:

超酷右下浮出广告窗口代码

jQuery实现延迟跳转的方法

JQuery+CSS实现图片上放置按钮的方法

jquery实现动态改变div宽度和高度

jQuery实现不断闪烁文字的方法

基于jQuery实现的无刷新表格分页实例

javascript实现youku的视频代码自适应宽度

实现DIV圆角的JavaScript代码

jquery实现点击label的同时触发文本框点击事件的方法

jQuery实现转动随机数抽奖效果的方法

精品推荐
分类导航