仿QQ空间长图效果简易版--母亲节感恩
母亲节最火的两件事
1.NBA 杜兰特在获MVP催泪致辞献给母亲：她才是真的MVP。
2.QQ空间长图
--------------------------------------------------------------------------------------------
今天的demo就是模拟 QQ空间这个效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> qq长图 </title>
<script>
var iSpeed=5;
var timer=null;
window.onload=function () {
var oParent=document.getElementById('divParent');
var oChild=document.getElementById('divChild');
var oImg=document.getElementById('img1');
var imgHeight=oImg.offsetHeight;//图片的总高度
var parentZone=oParent.offsetHeight;
var halfPos=parseInt(parentZone/2,10);
oParent.onmousemove=function(ev){
var oEvent=ev||event;
var disY=oEvent.clientY - oParent.offsetTop;;//鼠标的有效位置
clearInterval(timer);
timer=setInterval(function(){
if(disY<halfPos){ //向上移动
if(oChild.offsetTop<0){ //如果图片移动到顶部 就继续运动
oChild.style.marginTop=oChild.offsetTop+iSpeed+'px';
}
else{
clearInterval(timer);
oChild.style.marginTop=0; //如果到了顶部
}
}
else{ //向下移动
if(Math.abs(oChild.offsetTop)<imgHeight-oParent.offsetHeight){
oChild.style.marginTop=oChild.offsetTop-iSpeed+'px';
}
else{
clearInterval(timer);
oChild.style.marginTop=-imgHeight+oParent.offsetHeight+'px';
} } },35); } oParent.onmouseout=function(){
clearInterval(timer);
}
}
</script > </head> <body>
<div id="divParent" style="position:absolute;width:462px;border:1px solid #abcdef;height:500px;overflow:hidden;cursor:pointer;">
<div id="divChild" style="position:relative;margin-top:0;">
<img src="mmhappy.jpg" border="0" id="img1"/ > </div>
</div> </body>
</html>
2个小时后 雷霆vs快船 第四场 cctv5
最后祝天下母亲身体健康，万事如意
仿QQ空间长图效果简易版--母亲节感恩的更多相关文章
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
- iOS传感器集锦、飞机大战、开发调试工具、强制更新、Swift仿QQ空间头部等源码
iOS精选源码 飞机大作战 MUPhotoPreview -简单易用的图片浏览器 LLDebugTool是一款针对开发者和测试者的调试工具,它可以帮... 多个UIScrollView.UITable ...
- Fragment,仿QQ空间
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451 在今天的这篇文章当中,我依然会以实战加理论结合 ...
- 仿QQ空间和微信朋友圈，高解耦高复用高灵活
先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...
- 仿QQ空间动态界面分享
先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...
- Html - 仿QQ空间右下角工具浮动块
仿QQ空间右下角工具浮动块 <style type="text/css"> .cy-tp-area>.cy-tp-fixbtn>.cy-tp-text { ...
- 仿360手机卫士界面效果android版源码
仿360手机卫士界面效果android版,这个今天一大早在源码天堂的那个网站上看到了一个那个网站最新更新的一个源码,所以就分享给大学习一下吧,布局还挺不错的,而且也很简单的,我就不把我修改的那个分享出 ...
- 仿QQ空间根据位置弹出PopupWindow显示更多操作效果
我们打开QQ空间的时候有个箭头按钮点击之后弹出PopupWindow会根据位置的变化显示在箭头的上方还是下方,比普通的PopupWindow弹在屏幕中间显示好看的多. 先看QQ空间效果图: ...
- android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片，上拉回弹 上拉滚动顶部title 颜色渐变
首先要知道 自定义scrollview 仿QQ效果 下拉伸缩放大顶部图片 的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[ ...
随机推荐
- 1、DataGridView
DataGridView赋值后 通过RowPostPaint事件绘制行号 private void AddXh() { DataGridViewTextBoxColumn col = new Data ...
- 3.Linux的远程管理及网络下载
3.1 Linux的远程管理 3.1.1 远程管理概述 什么是远程管理: 1.为什么需要远程管理: 服务器通常是Linux系统,而服务器不可能一直在身边,所以就需要远程来操作服务器 企业中通常需要集群 ...
- [C++] 配平化学方程式算法的封装
有人已经实现了配平的方法,在此不再重复介绍. https://www.cnblogs.com/Elfish/p/7631603.html 但是,上述的方法所提供的代码还是存在着问题,需要进一步修改. ...
- 学习MPI并行编程记录
简单的MPI程序示例 首先,我们来看一个简单的MPI程序实例.如同我们学习各种语言的第一个程序一样,对于MPI的第一个程序同样是"Hello Word". /* Case 1 he ...
- Light Oj - 1134 Be Efficient
题目传送门:Be Efficient 题意:输入n和m,然后输入有n个元素的一个序列,问有多少个子序列元素的和能整除m. 思路:求前缀和,利用一个前缀的一个定理求解. 前缀和的一个定理是:每次求的前缀 ...
- Linux之iptables(二、基本认识和组成)
iptables的基本认识 Netfilter组件 内核空间,集成在linux内核中 扩展各种网络服务的结构化底层框架 内核中选取五个位置放了五个hook(勾子) function(INPUT.OUT ...
- 【codeforces 514D】R2D2 and Droid Army
[题目链接]:http://codeforces.com/contest/514/problem/D [题意] 给你每个机器人的m种属性p1..pm 然后r2d2每次可以选择m种属性中的一种,进行一次 ...
- Lucas小记
组合数学全忘了 记笔记记笔记 做个简单题 代码 from bzoj4403 #include <stdio.h> #define p 1000003 typedef long long l ...
- BUPT2017 springtraining(16) #3 ——搜索与动态规划
题目在这里啊 A.最长上升子序列,范围很小所以写了简单的O(n^2)算法 #include <iostream> #define rep(i, j, k) for(int i = j;i ...
- Android一键换肤功能：一种简单的实现
Android一键换肤功能:一种简单的实现 现在的APP开发,通常会提供APP的换肤功能,网上流传的换肤代码和实现手段过于复杂,这里有一个开源实现,我找了一大堆,发现这个项目相对较为简洁:htt ...