A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© Eline32 初级黑马   /  2018-8-12 20:35  /  1311 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

1.Modernizr.js
什么是Modernizr
  Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18CSS3 功能以及40多项关于HTML5 的功能。 它比传统检测浏览器名称(浏览器嗅探)的方式更为可靠。 一整套测试的执行时间仅需几微秒。 此外,Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测,从而实现效率优化。
下载 Modernizr
与其它 JavaScript 库相同的是,Modernizr 可提供 development production 版本。 与大多数库相比,唯一的不同之处是,空格和注释已经从 production 版本中删除了,这样可以减少下载量的大小。 Modernizr 采取了不同的方法。 development 版本在某种意义上可称为是厨房中的水槽”—它几乎包含了一切。 production 版本只包含了你选择的那些元素,这样能够显著降低下载量。 在很多情况下,production 版本可以缩小为development版本大小的二十分之一。
 重点:
    <head> 的最后三行应该如下所示:
     </style>
    <script src="js/modernizr.js"></script>
    </head>
  
  在html标签中添加no-jsclass,当支持javascript的浏览器启动时,会动态地删除这个no-jsclass。并且会在html标签中添加当前浏览器所支持的元素同名class
file:///C:\Users\16599\AppData\Local\Temp\ksohtml\wps181A.tmp.jpg
如图所示。
  你可以在浏览器中检查元素时看到html标签中增加的类,而在本地源代码中并无改动。   
  例如,在页面中的img标签,如若浏览器不支持阴影,则.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }将会发挥作用。也就是说,你可以看到Modernizr使用boxshadow csscolumns 分别表明了对box-shadow 属性和多栏布局的支持。 因此,你可以使用no-boxshadow no-csscolumns 类为不支持这些功能的浏览器创建特殊的样式规则。
一句忠告
 Modernizr 是一个强大而有用的工具,但是这并不意味着你就应该使用它。 并不是在所有情形下均必须使用 Modernizr 给浏览器提供多种样式。 如果你主要关注的对象是 Internet Explorer,那么考虑使用IE conditional comments。 你也可以使用CSS层叠覆盖一些样式。 例如,先使用hexadecimal color,然后使用 rgba() hsla() 覆盖它。 旧版本的浏览器会使用第一个值并且忽略第二个值。
Modernizr 真正地变成现实是当它与 polyfills 和其它 JavaScript 相结合的时候。但是记住,通常很容易创建属于你自己的适合支持功能的测试。例如,下面就是你测试某个浏览器是否支持 required 属性的全部代码(代码位于required_nomodernizr.html 中):
var elem = document.createElement('input');
if (typeof elem.required != 'boolean'){
  // required is not supported
}

2.jquery.slicebox.js
  漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed600 切换速度、autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,
参数说明
orientation : “r”, //表示幻灯片的切换方向,可取 (v)垂直方向, (h)水平方向 or (r)随机方向
perspective : 800, //透视点距离,可以通过改变其值查看效果
cuboidsCount : 5, //幻灯片横向或纵向被切割的块数,切割的每一块将会以3D的形式切换
cuboidsRandom : true, //是否随机 cuboidsCount 参数的值
maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount
colorHiddenSides : “#333″, //隐藏的幻灯片的颜色
sequentialFactor : 150, //幻灯片切换时间(毫秒数)
speed : 600, //每一块3D立方体的速度
autoplay : true, //是否自动开始切换


1.png (83.78 KB, 下载次数: 11)

内容中的举例图片

内容中的举例图片

3 个回复

倒序浏览
398580721 来自手机 中级黑马 2018-8-24 12:40:47
沙发
啊哦~这个就厉害了,沙发
回复 使用道具 举报
大神,厉害厉害
回复 使用道具 举报
xc19901125 来自手机 初级黑马 2018-8-25 11:24:14
板凳
好厉害,表示完全看不懂啊
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马