仿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事件时候,使用不同倍数的系数,重置布局位置[ ...
随机推荐
- (C/C++学习)12.获取系统时间制作时钟（system()略解）
说明:通过调用函数来获取系统当前时间,并制作一个数字式的时钟,时钟的显示包括年.月.日.小时.分以及秒,通过系统屏幕的刷新来对不断更新的时间进行屏幕的显示. 一.对相关函数的学习 1.time_t t ...
- Django View（视图系统）
Django View 官方文档 一个视图函数(类),简称视图,是一个简单的 Python 函数(类),它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误 ...
- 38.histogram的基础用法
主要知识点 histogram的理解及用法 histogram:他的作用是把一些连续的数据划分为一定的区间范围,使用连续的数据离散化,然后这这样离散化的数据就可以做聚合分析操作,操作过程类似于 ...
- 25.TF&IDF算法以及向量空间模型算法
主要知识点: boolean model IF/IDF vector space model 一.boolean model 在es做各种搜索进行打分排序时,会先用boolean mo ...
- Git 基础教程 之 别名
配置别名, 例如: git config --global alias.st status git config ...
- hadoop2.3.0cdh5.0.2 升级到cdh5.7.0
后儿就放假了,上班这心真心收不住,为了能充实的度过这难熬的两天,我决定搞个大工程.....ps:我为啥这么期待放假呢,在沙发上像死人一样躺一天真的有意义嘛....... 当然版本:hadoop2.3. ...
- bupt summer training for 16 #7 ——搜索与DP
https://vjudge.net/contest/174962#overview A.我们发现重点在于x,y只要累加就ok了 在每个x上只有上下两种状态,所以可以记忆化搜索 f[0/1][i]表示 ...
- [bzoj4796][CERC2016]Key Knocking_乱搞
Key Knocking bzoj-4796 CERC-2016 题目大意:描述没有题面短系列..题目链接 注释:$1\le n\le 10^5$. 想法: 乱搞稳AC.考试的时候调试信息又一次杀死了 ...
- N天学习一个linux命令之ip
用途 show / manipulate routing, devices, policy routing and tunnels 用法 通用格式 ip [ OPTIONS ] OBJECT { CO ...
- RPC服务框架探索之Thrift
前言架构服务化后,需要实现一套方便调用各服务的框架,现在开源如日中天,优先会寻找开源实现,如果没有合适自家公司业务的,才会考虑从零开发,尤其是一切以KPI为准绳的公司,谁会跟钱过不去?N个月之前,公司 ...