编程 Javascript

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

Posted in Javascript onSeptember 02, 2015

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

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

运行效果截图如下：

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

在线演示地址如下：

具体代码如下：

<!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实现华丽的可折角广告代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

动态创建的表格单元格中的事件实现代码

Dec 30 Javascript

Chrome中模态对话框showModalDialog返回值问题的解决方法

May 25 Javascript

jquery可见性过滤选择器使用示例

Jun 24 Javascript

修改或扩展jQuery原生方法的代码实例

Jan 13 Javascript

JavaScript中split() 使用方法汇总

Apr 17 Javascript

js实现刷新页面后回到记录时滚动条的位置【两种方案可选】

Dec 12 Javascript

Bootstrap进度条实现代码解析

Mar 07 Javascript

基于jQuery的表单填充实例

Aug 22 jQuery

PHP 实现一种多文件上传的方法

Sep 20 Javascript

实现div内部滚动条滚动到底部和顶部的代码

Nov 15 Javascript

js实现导航跟随效果

Nov 17 Javascript

教你一步步实现一个简易promise

Nov 02 Javascript

javascript学习总结之js使用技巧

Sep 02 #Javascript

jQuery实现固定在网页顶部的菜单效果代码

Sep 02 #Javascript

自定义刻度jQuery进度条及插件

Sep 02 #Javascript

JQuery操作textarea,input,select,checkbox方法

Sep 02 #Javascript

javascript中for/in循环及使用技巧

Sep 01 #Javascript

jQuery仿淘宝网产品品牌隐藏与显示效果

Sep 01 #Javascript

JavaScript中this详解

Sep 01 #Javascript