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程序设计有所帮助。

Javascript 相关文章推荐
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
vue全屏事件开发详解
Jun 17 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
js实现搜索提示框效果
Sep 05 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
You might like
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
PHP操作数组相关函数
2011/02/03 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python实现学员管理系统
2019/02/26 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
python 实现控制鼠标键盘
2020/11/27 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
八项规定整改方案
2014/02/21 职场文书
低碳环保倡议书
2014/04/14 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
个人承诺书怎么写
2014/05/24 职场文书
工作收入证明模板
2014/10/10 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
保险公司增员口号
2015/12/25 职场文书
创业计划书之酒厂
2019/10/14 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript