jquery实现华丽的可折角广告代码
本文实例讲述了jquery实现可折角的广告代码。分享给大家供大家参考。具体如下：
这是一款可折角的广告代码，或许你已经看到过了，现在一些门户网站还可看到这种效果的身影，用鼠标滑过折角的边，即可出现下拉效果。
运行效果截图如下：
在线演示地址如下：
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 class="msg_block"></div> </div> <div style="text-align:center;clear:both;"> </div> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。
-
本文向大家介绍jquery实现的Banner广告收缩效果代码，包括了jquery实现的Banner广告收缩效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现的Banner广告收缩效果代码。分享给大家供大家参考。具体如下： 这里演示一个Banner广告收缩效果，点开后，网页显示大广告，用鼠标点击“关闭”后，广告会收缩上去，此效果已在各大网站见到过，欢迎借鉴使用。 运行效
-
本文向大家介绍jquery实现对联广告的方法，包括了jquery实现对联广告的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现对联广告的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍jQuery实现广告条滚动效果，包括了jQuery实现广告条滚动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现广告条滚动效果的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍Android 知乎广告效果实现代码，包括了Android 知乎广告效果实现代码的使用技巧和注意事项，需要的朋友参考一下 知乎的广告效果一直想写，无奈最近才有时间。 先看效果： 肯定要自定义view了，一个类似imageView的控件，还要给它一个值用来指定广告图片的显示位置。 问题： 1.图片如何在范围内（单个item范围）上下移动,如窗户一般,后面的图是可以动的，但是窗户是固定的
-
本文向大家介绍jQuery实现页面顶部下拉广告，包括了jQuery实现页面顶部下拉广告的使用技巧和注意事项，需要的朋友参考一下 本广告可以是图片也可以是Flash，可以设置自动播放的时间，可以手动停止和重播。 效果展示 http://demo.jb51.net/js/2016/jQuery_xiala/ 源码下载：http://xiazai.jb51.net/201612/yuanma/jQuer
-
本文向大家介绍JS实现很实用的对联广告代码（可自适应高度），包括了JS实现很实用的对联广告代码（可自适应高度）的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现很实用的对联广告代码（可自适应高度）。分享给大家供大家参考。具体如下： 这是一款很实用的基于JS+CSS+DIV的网页对联广告代码，自适应网页高度，也就是始终保持在一定调试，这款暂时没有关闭功能。 运行效果截图如下： 在线演示