首页 > 代码库 > JQuery demo
JQuery demo
<!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="http://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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。