<!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. 美丽的阴影（剖析jquery主页）

    jquery Download API Documentation Blog Plugins Browser Support jquery主页第一眼看到的就是这个玻璃渣效果,设计者利用高光和阴影制造出 ...

  2. Android Studio 第一次新建Android Gradle项目超级慢的解决方案

    大家有什么问题,欢迎问我! 注:Android Studio在第一次新建一个Gradle项目时需要下载Gradle,所以启动很慢(Gradle-bin大约三十几兆),所以我们应该事先帮他下载好. 首先 ...

  3. org.apache.http.conn.HttpHostConnectException: Connection to http://localhost refused in android

    给Manifest加网络权限<uses-permission android:name="android.permission.INTERNET"/>

  4. 触发layoutSubviews的条件

    1. init初始化不会触发layoutSubviews 2. addSubview会触发layoutSubviews 3. 设置view的Frame会触发layoutSubviews,当然前提是fr ...

  5. 深入理解java虚拟机（5）---字节码执行引擎

    字节码是什么东西? 以下是百度的解释: 字节码(Byte-code)是一种包含执行程序.由一序列 op 代码/数据对组成的二进制文件.字节码是一种中间码,它比机器码更抽象. 它经常被看作是包含一个执行 ...

  6. .bat脚本基本命令语法

    目录批处理的常见命令(未列举的命令还比较多,请查阅帮助信息)     1.REM 和 ::     2.ECHO 和 @     3.PAUSE     4.ERRORLEVEL     5.TITL ...

  7. Effective Java 45 Minimize the scope of local variables

    Principle The most powerful technique for minimizing the scope of a local variable is to declare it ...

  8. JavaScript Patterns 3.4 Array Literal

    Array Literal Syntax To avoid potential errors when creating dynamic arrays at runtime, it's much sa ...

  9. mybatis java.lang.UnsupportedOperationException

    mybatis抛出下面的异常: org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exc ...

  10. 修复 Java 内存模型，第 1 部分——Brian Goetz

    转自Java并发大师Brain Goetz:http://www.ibm.com/developerworks/cn/java/j-jtp02244/ (中文地址) http://www.ibm.co ...