QQ空间顶部折页撕开效果示例代码


Posted in Javascript onJune 15, 2014

效果:
QQ空间顶部折页撕开效果示例代码 
HTML:

<div id="pageflip"> 
<a target="_blank" href="http://www.sparkdesign.cn/"><img width="307" height="319" src="js/page_flip.png" style="overflow: hidden; width: 50px; display: block; height: 52px;"></a> 
<div class="msg_block" style="overflow: hidden; width: 50px; display: block; height: 50px;"></div> 
</div>

JS:
$(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); 
}); 
});
Javascript 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
js中通过父级进行查找定位元素
Jun 15 #Javascript
js判断浏览器类型为ie6时不执行
Jun 15 #Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 #Javascript
javascript 寻找错误方法整理
Jun 15 #Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 #Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 #Javascript
jQuery获取动态生成的元素示例
Jun 15 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
解析PHP 5.5 新特性
2013/07/02 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
基于PHP制作验证码
2016/10/12 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python 使用多属性来进行排序
2019/09/01 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
三方合作协议书范本
2014/04/18 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
企业法律事务工作总结
2015/08/11 职场文书
污染环境建议书
2015/09/14 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
react国际化react-intl的使用
2021/05/06 Javascript
Python实现天气查询软件
2021/06/07 Python
Python自动化爬取天眼查数据的实现
2021/06/15 Python