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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
Node.js编码规范
Jul 14 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
vue实现搜索过滤效果
May 28 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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
在php中取得image按钮传递的name值
2006/10/09 PHP
Smarty+QUICKFORM小小演示
2007/02/25 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
简单学习vue指令directive
2016/11/03 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
医科大学生的自我评价
2013/12/04 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
公司委托书怎么写
2014/08/02 职场文书
网站出售协议书范文
2014/10/10 职场文书
家长会欢迎词
2015/01/23 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang