仿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事件时候,使用不同倍数的系数,重置布局位置[ ...
随机推荐
- chrony配置介绍
rhel7 文档https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/html/System_Adminis ...
- bupt summer training for 16 #7 ——搜索与DP
https://vjudge.net/contest/174962#overview A.我们发现重点在于x,y只要累加就ok了 在每个x上只有上下两种状态,所以可以记忆化搜索 f[0/1][i]表示 ...
- Codeforces Problem 778B Bitwise Formula
题目链接:http://codeforces.com/contest/779/problem/E 题意:有n个变量都可以用m位二进制数表示,这n个数的value将以两种格式中的一种给出 1.变量名, ...
- pam_cracklib.so模块
pam_cracklib.so中有很多参数可以选择,具体配置如下: debug此选为记录Syslog日志. type=safe输入新密码的时候给予的提示. retry=N改变输入密码的次数,默认值是1 ...
- Luogu P3740 [HAOI2014] 贴海报 线段树
线段树版的海报 实际上这个与普通的线段树相差不大,只是貌似数据太水,暴力都可以过啊 本来以为要离散的,结果没打就A了 #include<iostream> #include<cstd ...
- CODEVS1533 Fibonacci数列 (矩阵乘法)
嗯,,,矩阵乘法最基础的题了. Program CODEVS1250; ..,..] of longint; var T,n,mo:longint; a,b:arr; operator *(a,b:a ...
- [poj3321]Apple Tree_dfs序_树状数组
Apple Tree poj-3321 题目大意:给你一个根固定的树,每一个点的点权是0或1,查询子树点权和. 注释:$1\le n \le 10^5$. 想法:刚刚学习dfs序,刷到水题偶哈哈. 什 ...
- RDS for MySQL查询缓存 (Query Cache) 的设置和使用
https://help.aliyun.com/knowledge_detail/41717.html?spm=5176.7841698.2.11.aCvOXJ RDS for MySQL查询缓存 ( ...
- tomcat理解
- Python帮助函数调试函数 用于获取对象的属性及属性值
Python帮助函数调试函数 用于获取对象的属性及属性值 刚接触Python,上篇 <Python入门>第一个Python Web程序--简单的Web服务器 中调试非常不方便,不知道对象详 ...