<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <title>mooc</title>

    <style type="text/css">

        .moco-course-box {

            width: 224px;

            height: 172px;

            box-sizing: border-box;

            overflow: hidden;

            position: relative;

        }

        .moco-course-intro {

            box-sizing: border-box;

            position: absolute;

            padding: 0 20px;

            transition: top .5s;

            top: 100px;

            width: 100%;

            background-image: url('http://www.imooc.com/static/moco/v1.0/dist/images/bg-course.png');;

        }

        h3{

            margin: 0;

            padding: 16px 0 6px;

            font-size: 12px;

            max-height: 40px;

            overflow: hidden;

            color: #07111b;

            line-height: 21px;

        }

        p{

            color: #93999f;

            font-size: 12px;

            height: 40px;

            overflow: hidden;

            line-height: 20px;

        }

    </style>

</head>

<body>

<div class="moco-course-box">

    <img src="http://img.mukewang.com/551b92340001c9f206000338-228-128.jpg" height="124" width="100%">

    <div class="moco-course-intro">

        <h3> JUnit—Java单元测试必备工具</h3>

        <p>Java单元测试利器! </p>

    </div>

</div>

<script src="//cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>

<script type="text/javascript">

    $('.moco-course-intro').mouseenter(function () {

        $(this).css('top','20px');

    });

    $('.moco-course-intro').mouseleave(function () {

        $(this).css('top','100px');

    });

</script>

</body>

</html>

蛮有意思的 最近学习JS跟CSS 仿照慕课网前端做的玩意

JQuery demo的更多相关文章

  1. 【jQuery Demo】jQuery打造动态下滑菜单

    作者:漫凯维奇      来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...

  2. Struts2+JSON+JQUERY DEMO

    看到别人用了Struts2和JSON,自己也想练练手.记录下练习过程中遇到的问题,以便参考. 使用Maven新建项目: 先挂上pom.xml <project xmlns="http: ...

  3. 【jQuery Demo】图片切换效果整理

    图片的切换效果有很多,比较常见的有水平滚动.垂直滚动.淡入淡出等.我们接下来一一实现这些效果. 1.水平滚动 1) 我们先来实现HTML页面,代码很简单: <div id="conta ...

  4. Vue+webpack+echarts+jQuery=demo

    需要的插件: "dependencies": { "bootstrap": "^3.3.7", "echarts": & ...

  5. 【jQuery Demo】图片瀑布流实现

    瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的 ...

  6. 基于jQuery的对象切换插件：soChange 1.5 (点击下载)

    http://www.jsfoot.com/jquery/demo/2011-09-20/192.html 所有参数: $(obj).soChange({     thumbObj:null, //导 ...

  7. 240个jquery插件（转）

    http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/File upload Ajax File U ...

  8. jQuery Raion, Select, CheckBox selector function

    Radio jQuery("input[type=checkbox][name='fbCqscsf.cqzdycqk']").not("[value=1]"). ...

  9. jquery插件库

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...

随机推荐

  1. Ajax的实现

    一.JavaScript的ajax //Ajax var xhr; if(window.XMLHttpRequest){ //除IE外的浏览器 xhr = new XMLHttpRequest() } ...

  2. Win7 64位下sql server链接oracle的方法

    继上一次mysql同步sql server后,这一次需要将Oracle同步到sql server上来,方案相似,只是在sql server链接oracle的时候费了很多时间. 一.测试环境 本方案实现 ...

  3. 高级iOS面试题

    非标准答案 2 1: 类方法是可以直接通过类名直接调用,无需进行实例化对象.类方法是以+开头2. 实例方法,需要显示实例化对象,为对象分配堆栈空间,并通过对象实例调用实例方法3. RUNTIME 是在 ...

  4. 所有Mac用户都需要知道的9个实用终端命令行

    通常情况下,只有高端用户才会经常用到终端应用.这并不意味着命令行非常难学,有的时候命令行可以轻松.快速的解决问题.相信所有Mac用户都尝试过命令行,今天为大家带来9个非常实用的命令行操作.一些命令行需 ...

  5. 小波说雨燕 第三季 构建 swift UI 之 UI组件集－视图集（五）Image View视图 学习笔记

    留下两个问题:1.后面涉及到的异常不知道原因.2.动态图片到了程序里面就不动了.       然后:   上面是有问题的,下面是没有问题的了.    代码(另外简单写的代码,纠正了那个错误): imp ...

  6. android 进程间通信---bind的前世

    在分析bind机制之前,我发现已经有一篇文章讲解的非常清晰,并且提出了很多问题. 地址:http://my.oschina.net/keeponmoving/blog/64218 一.Linux系统进 ...

  7. android图片缓存（包含ReusableBitmapDrawable和BitmapPool）

    现在做的项目中,有用到一个开源的2D地图框架osmdroid,但是在项目中,使用还是有一些问题,例如,多个地图实例,会有独自的图片缓存,Activity onPause时,并不会释放图片缓存,如果多级 ...

  8. 搭建openvpn 未完成。。。

    轻松构建自己的OpenVPN家庭服务器(VMware+Amahi) http://os.51cto.com/art/201107/277146_all.htm  这是教程 不用安装第一步的,直接把下载 ...

  9. Oracle 数据库二 基本查询

    查询当前用户:show user 查看当前用户下的表:select *from tab; 设置行宽: show linesize;(查看行宽)     set linesize 120;(设置行宽) ...

  10. Eclipse EE 发布项目导致 Tomcate 的配置文件 server.xml 还原

    在server.xml中配置SSL时,发现了每次发布项目都导致server.xml被还原了: <Connector port="8443" protocol="or ...