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 相关文章推荐
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
vue中的scope使用详解
Oct 29 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python实现的爬虫功能代码
2017/06/24 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python opencv进行图像拼接
2020/03/27 Python
Python extract及contains方法代码实例
2020/09/11 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
大学生个人事迹材料
2014/01/21 职场文书
群众路线剖析材料
2014/02/02 职场文书
实习老师离校感言
2014/02/03 职场文书
教师个人自我鉴定
2014/02/08 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书