QQ空间顶部折页撕开效果示例代码
<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>
$(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);
});
});
相关推荐
-
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; wi
-
Android仿QQ空间顶部条背景变化效果
本文给大家分享仿QQ空间页面顶部条随界面滑动背景透明度变化的效果,这个效果在其他应用程序中也很常见,技能+1. 一.上代码,具体实现 笔者之前的文章第二部分总是二话不说,直接上代码,很干脆,其实更好的方式是引导读者思考:这个效果如何实现.前期做好效果的功能分析,才能读者更好的理解. QQ空间的这个页面其实并不复杂,我们看看QQ空间的演示界面: 可以看见,整个页面其实只有两个根元素,一个是ListView,一个是标题栏,前者可以上下滑动,给用户呈现内容:后者固定位置不动,类似于一个导航栏,左边一个
-
Android自定义view仿QQ的Tab按钮动画效果(示例代码)
话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的错位感,代码很简单: import android.content.Context import android.graphics.* import android.util.AttributeSet import android.view.MotionEvent import android.vi
-
android 仿QQ动态背景、视频背景的示例代码
本文介绍了android 仿QQ动态背景.视频背景的示例代码,分享给大家,具体如下: 效果如下: 如上图类似效果图: 1, 自定义视频类 继承VideoView public class CustomVideoView extends VideoView { public CustomVideoView(Context context) { super(context); } public CustomVideoView(Context context, AttributeSet attrs)
-
Flutter 实现酷炫的3D效果示例代码
此文讲解3个酷炫的3D动画效果. 下面是要实现的效果: Flutter 中3D效果是通过 Transform 组件实现的,没有变换效果的实现: class TransformDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('3D 变换Demo'), ), body: Container( alignm
-
Vue实现侧边导航栏于Tab页关联的示例代码
目录 技术栈 效果 分析 技术栈 侧边栏用 Antdtab使用element 效果 <template> <div class="main-card"> <el-row> <el-col :span="3"> <div class="menu-all"> <div class="menu-head"> <span class="menu-h
-
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
向上滑动隐藏底部悬浮框,向下滑动显示悬浮框.使用pc端浏览器查看请把浏览器设置为手机浏览器模式. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>手机端触屏手指滑动方向</title> <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,us
-
jQuery 动态粒子效果示例代码
1.js部分 var RENDERER = { PARTICLE_COUNT : 1000, PARTICLE_RADIUS : 1, MAX_ROTATION_ANGLE : Math.PI / 60, TRANSLATION_COUNT : 500, init : function(strategy){ this.setParameters(strategy); this.createParticles(); this.setupFigure(); this.reconstructMetho
-
Android开发TextvView实现镂空字体效果示例代码
记录一下... 自定义TextView public class HollowTextView extends AppCompatTextView { private Paint mTextPaint, mBackgroundPaint; private Bitmap mBackgroundBitmap,mTextBitmap; private Canvas mBackgroundCanvas,mTextCanvas; private RectF mBackgroundRect; private
-
Vue中实现过渡动画效果示例代码
目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 同时设置两种动画(了解) 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在R
随机推荐
- c语言10个经典小程序
- 正则表达式轻松消除HTML代码
- js中document.getElementByid、document.all和document.layers区分介绍
- mysql limit查询优化分析
- smarty模板引擎之分配数据类型
- PHP 实现浏览记录并按日期分组
- ASP中文本文件与数据库文件的数据交换(FSO)
- JSP的login程序代码
- C#实现百度网站收录和排名查询功能思路及实例
- C++如何实现DNS域名解析
- 在JavaScript中typeof的用途介绍
- jquery如何获取元素的滚动条高度等实现代码
- 弄了个检测传输的参数是否为数字的Function
- SQL语句(T-SQL汇总) 用T-SQL画出这些图形
- jQuery+css实现的蓝色水平二级导航菜单效果代码
- firefox中JS读取XML文件
- js 刷新页面的代码小结 推荐
- Java Web使用Html5 FormData实现多文件上传功能
- 详解NODEJS的http实现
- Python配置虚拟环境图文步骤