仿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++排坑(5) -- c语言中的申明
C语言的申明总是令人头大,对于这块内容也一直让我头疼.希望通过这篇博客能够稍微梳理一下.材料和例子来源于<C专家编程> 一.C语言的申明的优先级规则 先来个例子,看看下面这行C代码到底是个 ...
- Linux下源码安装Peach-2.3.8教程
在peach文件夹下运行 python peach.py ./samples/HelloWorld.xml 提示先安装4Suite-XML. 根据提示在dependences文件夹下安装,出现两次错误 ...
- 66.零停机下reindex
主要知识点: 理解reindex的使用场景和必要性 学会reindex 一.理解reindex的使用场景和必要性 假设:在某一个index中依靠dynamic mapping插入数据, ...
- 第十三节：pandas之groupby（）分组
1.Series()对象分组 1.1.单级索引 1.2.多级索引 2.DataFrame()对象分组 3.获取一个分组,遍历分组,filter过滤.
- PAT 1105 Spiral Matrix
This time your job is to fill a sequence of N positive integers into a spiral matrix in non-increasi ...
- ganlgia-rrdcached
一.介绍 rrdcached是一个高性能的RRD缓存守护进程,在不带来大量磁盘读/写文件i/o负荷的情况下,允许gmetad实例维护多个RRD文件.rrdcached可通过命令套接字控制,并且包含在大 ...
- Django——3 模板路径 模板变量 常用过滤器 静态文件的使用
Django 模板路径 模板变量 过滤器 静态文件的加载 模板的路径,有两种方法来使用 设置一个总的templates在大项目外面,然后在sittings的TEMPLATES中声明 在每一个APP中创 ...
- 【codeforces 796D】Police Stations
[题目链接]:http://codeforces.com/contest/796/problem/D [题意] 在一棵树上,保证每个点在距离d之内都有一个警察局; 让你删掉最多的边,使得剩下的森林仍然 ...
- hdu_1040_As Easy As A+B_201308191751
As Easy As A+B Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- [bzoj4003][JLOI2015]城池攻占_左偏树
城池攻占 bzoj-4003 JLOI-2015 题目大意:一颗n个节点的有根数,m个有初始战斗力的骑士都站在节点上.每一个节点有一个standard,如果这个骑士的战斗力超过了这个门槛,他就会根据城 ...