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 相关文章推荐
jQuery 表单验证扩展(四)
Oct 20 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
深入解析php之sphinx
2013/05/15 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python sys模块sys.path使用方法示例
2013/12/04 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
浅析python中while循环和for循环
2019/11/19 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js