实现 “慕课网” 的图片滑过缩放的效果

技术点:css3——   -webkit-transform:scale(1.2);

.course-list-img .img_1:hover{
-webkit-transform:scale(0.8,1.2); //宽度缩小80%,高度放大120%
-moz-transition:scale(0.8,1.2);
}
.course-list-img .img_2:hover{
-webkit-transform:scale(0.5); //宽高缩小50%
-moz-transform:scale(0.5);
}
.course-list-img .img_3:hover{
-webkit-transform:scale(-1.2,1.2); //先翻转再放大1.2倍
-moz-transform:scale(-1.2,1.2);
}
.course-list-img .img_4:hover{
-webkit-transform:scale(1.2); //宽高放大120% -慕课网用的就是这个
-moz-transform:scale(1.2);
}

需要详细了解scale,可以查看scale语法

效果查看:http://runjs.cn/detail/0t5mwk9v

实现放大缩略图(CSS3)

通过使用overflow:visible

效果仅见:http://runjs.cn/detail/exwrb9rn

同上的效果

效果仅见:http://runjs.cn/detail/dbitgkfz

css3使得鼠标移入图片,其他图片模糊

效果仅见:http://runjs.cn/detail/pgnqjrgh

css3实现悬浮小图标

效果仅见:http://runjs.cn/detail/kqvjqdlp

css实现仿鱼泡提示框

效果仅见:http://runjs.cn/detail/1gdgfvea

CSS3实现jquery的特效的更多相关文章

  1. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  2. 基于jQuery+CSS3实现人物跳动特效

    分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=& ...

  3. 一款基于jquery和css3的头像恶搞特效

    今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代 ...

  4. 15个web前端的美轮美奂的 jQuery 图片特效

    jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...

  5. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  6. 9款很酷炫jQuery/HTML5特效应用 有源码哦~

            目前最流行的网页特效应用当属jQuery和HTML5的特效应用了,它们可以帮你快速实现网页中的各种特效设计.本文就为了收集了9款非常酷炫的jQuery/HTML5特效应用,可以很方便的 ...

  7. 15个CSS3和jQuery的超棒页面过渡效果教程

    来源:GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发.通过CSS3和jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你 ...

  8. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  9. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

随机推荐

  1. 几种解析xml方式的比较

    1: DOM DOM 是用与平台和语言无关的方式表示 XML 文档的官方 W3C 标准.DOM 是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定信息.分析该结构通常需要加 ...

  2. EXTJS 4.2 资料 控件之combo 联动

    写两个数据源: 1.IM_ST_Module.js { success:true, data:[ { ModuleId: '1', ModuleName: '资讯' } , { ModuleId: ' ...

  3. 微软职位内部推荐-Sr SDE-MOD-Beijing

    微软近期Open的职位: JOB TITLE: Senior Software Design EngineerDEPARTMENT: Microsoft Office Division ChinaIM ...

  4. HighCharts 根据spline-plot-bands图,定制自己的图(区间里显示多个数据)

    公司项目里有这样一个需求,根据数据绘图,但是数据很多,不可能每个点每个点的去画,这样显示的数据太密集非常的难看(更显得技术不专业),如图: 所以我和项目经理商量如何显示这个图形,按照他的意思是,按照范 ...

  5. office2010 office2013打开个别PPT时需要修复的解决方法

    写在前面的废话(请直接查看正文部分):一次意外之后,需要重装Microsoft office,于是屁颠屁颠就重装了一次MS office 2013,装好后发现,打开个别ppt/pptx时打不开,提示修 ...

  6. js获取节点

    demo1: <!-- <div id="test" v="1">你好</div> --> // console.log(t ...

  7. maven添加jar包依赖

    maven的东西使用了一段时间,但是每次使用都多少有点含糊,所以总结一下. 目前主要使用是在jar包的控制上 原理: 在本地,指定一个文件夹,便是maven的仓库,maven会从远程的中央仓库中下载你 ...

  8. uva 10056

    概率 Q += p*pow(1-p, i*n+k-1) i = 0,1,2,3...... #include <cstdio> #include <cmath> int mai ...

  9. Android支付接入(五):机锋网

    原地址:http://blog.csdn.net/simdanfeg/article/details/9012083 前边已经陆续跟大家走了一遍运营商和支付宝付费接入,今天跟大家一起看看机锋网的支付接 ...

  10. 快速排序(quicksort)算法实现

    快速排序(quicksort)是分治法的典型例子,它的主要思想是将一个待排序的数组以数组的某一个元素X为轴,使这个轴的左侧元素都比X大,而右侧元素都比X小(从大到小排序).然后以这个X在变换后数组的位 ...