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 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
jquery 应用代码 方便的排序功能
Feb 06 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
vue+iview实现手机号分段输入框
Mar 25 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
Syphon 使用方法
2021/03/03 冲泡冲煮
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php自动加载的两种实现方法
2010/06/21 PHP
PHP使用数组实现队列
2012/02/05 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
javascript window对象属性整理
2009/10/24 Javascript
Jquery 扩展方法
2010/05/06 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
JavaScript模块详解
2017/12/18 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python读取Kafka实例
2019/12/23 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
网络技术专业求职信
2014/02/18 职场文书
平面设计师岗位职责
2014/09/18 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
小学元宵节活动总结
2015/02/06 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android