手机网站

母亲节最火的两件事

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空间长图效果简易版--母亲节感恩的更多相关文章

  1. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  2. iOS传感器集锦、飞机大战、开发调试工具、强制更新、Swift仿QQ空间头部等源码

    iOS精选源码 飞机大作战 MUPhotoPreview -简单易用的图片浏览器 LLDebugTool是一款针对开发者和测试者的调试工具,它可以帮... 多个UIScrollView.UITable ...

  3. Fragment,仿QQ空间

    转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9023451          在今天的这篇文章当中,我依然会以实战加理论结合 ...

  4. 仿QQ空间和微信朋友圈，高解耦高复用高灵活

    先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...

  5. 仿QQ空间动态界面分享

    先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...

  6. Html - 仿QQ空间右下角工具浮动块

    仿QQ空间右下角工具浮动块 <style type="text/css"> .cy-tp-area>.cy-tp-fixbtn>.cy-tp-text { ...

  7. 仿360手机卫士界面效果android版源码

    仿360手机卫士界面效果android版,这个今天一大早在源码天堂的那个网站上看到了一个那个网站最新更新的一个源码,所以就分享给大学习一下吧,布局还挺不错的,而且也很简单的,我就不把我修改的那个分享出 ...

  8. 仿QQ空间根据位置弹出PopupWindow显示更多操作效果

    我们打开QQ空间的时候有个箭头按钮点击之后弹出PopupWindow会根据位置的变化显示在箭头的上方还是下方,比普通的PopupWindow弹在屏幕中间显示好看的多. 先看QQ空间效果图:       ...

  9. android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片，上拉回弹 上拉滚动顶部title 颜色渐变

    首先要知道  自定义scrollview 仿QQ效果 下拉伸缩放大顶部图片 的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[ ...

随机推荐

  1. EF 配置

    DbContext public class ZSZDbContext : DbContext { //ILog ILogger 容易混淆 private static ILog log = LogM ...

  2. Problem 42

    Problem 42 https://projecteuler.net/problem=42 The nth term of the sequence of triangle numbers is g ...

  3. Mysql数据库操作（二）

    存储过程 1.创建过程 delimiter // create procedure p1() BEGIN select * from t1; END// delimiter; --执行存储过程 cal ...

  4. Python - 三大器 迭代器,生层器,装饰器

    目录 Python - 三大器 迭代器,生层器,装饰器 一. 容器 二. 可迭代对象(iterable) 三. 迭代器 四. 生成器 五. 装饰器 1. 定义 六. 闭包 Python - 三大器 迭 ...

  5. hdu 5179 beautiful number

    beautiful number 问题描述 令 A = \sum_{i=1}^{n}a_i * {10}^{n-i}(1\leq a_i \leq 9)A=∑​i=1​n​​a​i​​∗10​n−i​ ...

  6. 1.2 Java“白皮书”的关键术语

        Java的设计者已经编写了颇有影响力的“白皮书”,来解释设计的初衷以及完成的情况,并且发布了一个简短的摘要.这个摘要用下面11个关键术语进行组织: 简单性 面向对象 分布式 健壮性 安全性 体 ...

  7. （问题待解决）sql查询不显示前置‘0’的问题

    SELECT * , ,),() ) ' end)) from CourseBooksNotes ),)),)+'秒'; ),)),)),)+'秒'

  8. hdu2015 偶数求和【C++】

    偶数求和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  9. Django——7 常用的查询 常用的模型字段类型 Field的常用参数 表关系的实现

    Django 常用的查询 常用的查询方法 常用的查询条件 常用字段映射关系 Field常用参数 表关系的实现 查用的查询方法 这是需要用到的数据 from django.http import Htt ...

  10. Wizard's Tour

    F. Wizard's Tour time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...