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.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
vue实现可拖拽的dialog弹框
May 13 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
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php生成curl命令行的方法
2015/12/14 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Python如何读写CSV文件
2020/08/13 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
车间副主任岗位职责
2013/12/24 职场文书
网络管理员岗位职责
2014/03/17 职场文书
庆祝国庆节标语
2014/10/09 职场文书
蜗居观后感
2015/06/11 职场文书
倡议书怎么写?
2019/04/11 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB