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

2024-11-30 07:06:48

效果：

HTML：

代码如下:

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);
});

});

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

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

相关推荐

随机推荐