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 相关文章推荐
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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
详解Yii实现分页的两种方法
2017/01/14 PHP
PHP递归的三种常用方式
2019/02/28 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
Python小进度条显示代码
2019/03/05 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
python如何控制进程或者线程的个数
2020/10/16 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
教育学专业毕业生的自我评价
2013/11/21 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
班主任工作经验交流会总结
2015/11/02 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
利用Python判断你的密码难度等级
2021/06/02 Python
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python