本文实例讲述了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/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head titlejquery页面顶部折角图片撕开效果/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function(){ $('#pageflip ')).hover(function(){ $(' #翻页img，0 .消息块').停止()。动画({width: '307px '，height: '319px'}，500)；}，function(){ $('#pageflip img ').停止()。动画({width: '50px '，height: '52px'}，220)；$('.消息块').停止()。动画({width: '50px '，height: '50px'}，200)；});});/script style type=' text/CSS ' * { margin :0；划水：0;列表样式-:型无；}a，img { border :0 } body { font :12 px/180% Arial，Helvetica，无衬线'新宋体；} img {行为： URL(iepngfix。HTC)}/*翻页*/#翻页{右：0 px右浮动：位置：相对；top :0 px } #翻页img { z-index :99右：0像素宽度：50 px位置：绝对；top :0 px h8 :52 pxms-插值-模式：双三次} #翻页msg _ block { right:0px背景：url(images/subscribe.png)无重复右上方；飞越：隐藏；宽度：50 px位置：绝对；top :0 px h8 :50 px }/style/header dydiv id=' page flip ' a href=' # ' target=' _ blank ' img width=' 307 ' height=' 319 ' alt=' sc。奇纳斯。com ' src=' http : images/page _ flip。png '/adiv class=' msg _ block '/div/div style=' text-align 3360 center；clear:both'/div/body/html希望本文所述对大家的jquery程序设计有所帮助。