淡入浅出的网站背景图片切换,其实是引用了JQuery插件supersized,效果很炫吧.其实这个插件功能很强大,可以做很多图片类的效果.这些需要等待我们自己去探索.

下面是这个效果的代码只有一行:

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="css/supersized.css"/>

 </head>

 <body>

 <div id="supersized"></div>

 <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

 <script type="text/javascript" src="js/supersized-init.js"></script>

 <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>

 </body>

 </html>

下载地址

JQuery插件supersized.js实现背景图片淡入浅出的更多相关文章

  1. 全屏背景：15个jQuery插件实现全屏背景图像或媒体

    动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...

  2. 幻灯展示jQuery插件supersized

    主要特性: 能够自动修改图片大小适合浏览器的页面大小 通过幻灯展示的循环背景可以动态加载并且可以设置变化方式 核心版本可以支持仅仅需要背景变化大小的需要 键盘导航 整合Flickr - 可以从用户,组 ...

  3. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  4. 帮助更语义化的显示时间的jQuery插件 - tidyTime.js

    来源:GBin1.com 网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢? 08:15  显示成 ...

  5. jquery动态背景切换全屏登录插件supersized.js

    下载地址:https://download.csdn.net/download/t101lian/10434198预览: http://www.daimabiji.com/codedemo/1530 ...

  6. 延迟加载图片的 jQuery 插件——lazyload.js

    lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...

  7. 一款js控制背景图片平铺

    背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style> html,body{;;} .body{background: url(ima ...

  8. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  9. JQuery插件 aos.js

    简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. ...

随机推荐

  1. Apache和Nignx基于三种方式搭建web站点并设置用户访问控制达到优化整个站点性能

    个人用户主页: 1:Vim  /etc/http/con.d/userdir: UserDir  disabled   //个人用户主页开启 UserDir   public_html    //指定 ...

  2. p标签内不能含有块元素。

    原来一直听网上这样说.自己并没有实际遇到过.上例子. <!DOCTYPE html> <html> <head> <meta charset="ut ...

  3. haystack+Elasticsearch搜素引擎

    搜索引擎原理 通过搜索引擎进行数据查询时,搜索引擎并不是直接在数据库中进行查询,而是搜索引擎会对数据库中的数据进行一遍预处理,单独建立起一份索引结构数据. 我们可以将索引结构数据想象成是字典书籍的索引 ...

  4. hive自定义函数（UDF）

    首先什么是UDF,UDF的全称为user-defined function,用户定义函数,为什么有它的存在呢?有的时候 你要写的查询无法轻松地使用Hive提供的内置函数来表示,通过写UDF,Hive就 ...

  5. uva 253 - Cube painting（相同骰子）

    习题4-4 骰子涂色(Cube painting, UVa 253) 输入两个骰子,判断二者是否等价.每个骰子用6个字母表示,如图4-7所示. 图4-7 骰子涂色 例如rbgggr和rggbgr分别表 ...

  6. 最短路径问题 3.Bellman-Ford算法

    简要:Bellman-Ford算法计算的仍然是从一个点到其他所有点的最短路径算法,其时间复杂度是O(NE),N表示点数,E表示边数,不难看出,当一个图稍微稠密一点,边的数量会超过点数那么实际上效率是低 ...

  7. POJ1679（次小生成树）

    The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 36692   Accepted: 13368 ...

  8. Spark Streaming实时处理应用

    1 框架一览   事件处理的架构图如下所示. 2 优化总结   当我们第一次部署整个方案时,kafka和flume组件都执行得非常好,但是spark streaming应用需要花费4-8分钟来处理单个 ...

  9. 通过py2exe打包python程序的过程中，解决的一系列问题

    py2exe的使用方法参考<py2exe使用方法>. 注:程序可以在解释器中正常运行,一切问题都出在打包过程中. 问题1: 现象:RuntimeError: maximum recursi ...

  10. 什么鬼，又不知道怎么命名class了

    什么鬼,又不知道怎么命名class了 2015/10/25 · CSS · class 分享到:5 原文出处: 结一(@结一w3cplus)    相信写css的人都会遇到下面的问题: 糟糕,怎么命名 ...