仿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事件时候,使用不同倍数的系数,重置布局位置[ ...
随机推荐
- DP——最长上升子序列（LIS）
DP——最长上升子序列(LIS) 基本定义: 一个序列中最长的单调递增的子序列,字符子序列指的是字符串中不一定连续但先后顺序一致的n个字符,即可以去掉字符串中的部分字符,但不可改变其前后顺序. LIS ...
- Python 元组和列表
Python 元组 Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: tup1 ...
- 第一节：初识pandas之Series（上）
Series线性的数据结构, 也是一个一维数组. 声明:本人Python小白,以下代码只是个人学习的过程,仅仅记录一下学习的点点滴滴,若有错误,还望指正. (注:该代码均在jupyter notebo ...
- springcloud(三)：Eureka服务端
一. 因为使用一个注册中心服务器端,n个客户端:n个生产者客户端.n消费者客户端....,所有的客户端最好的方式就是通过对象传递参数,因此需要创建一个公共组件项目,为n个客户端传值提供方便 二.创建公 ...
- ajax学习----json，前后端交互，ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
- 【[Offer收割]编程练习赛 14 A】小Hi和小Ho的礼物
[题目链接]:http://hihocoder.com/problemset/problem/1505 [题意] [题解] 考虑Meet in the middle. 因为两个数的和不是很大; 直接用 ...
- hdu 2242双联通分量+树形dp
/*先求出双联通缩点,然后进行树形dp*/ #include<stdio.h> #include<string.h> #include<math.h> #defin ...
- Sencha Touch 2.1 Chart属性中文解释
图表的几大要素: 1.坐标:上.下.左.右. 坐标的类型,数字.分类... 坐标包含需要显示的坐标值,即绑定的字段 坐标值的样式,比如旋转.字体大小.格式 坐标的最大值.最小值.是否显示网格 坐标旁边 ...
- CODEVS1533 Fibonacci数列 (矩阵乘法)
嗯,,,矩阵乘法最基础的题了. Program CODEVS1250; ..,..] of longint; var T,n,mo:longint; a,b:arr; operator *(a,b:a ...
- CF #EDU R1 E
最二的一次了~我开始以为是带有贪心的DP,谁知道想错了.后来才想明白,暴力二分+记忆化DP #include <iostream> #include <cstdio> #inc ...