淡入浅出的网站背景图片切换,其实是引用了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. React学习（3）——Router路由的使用和页面跳转

    React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 文档中介绍 ...

  2. （转）IP地址分配原理

    网络模型介绍 在计算机网络中有著名的OSI七层协议体系结构,概念清楚,理论完整,但是它既复杂又不实用.TCP/IP体系结构则不同,得到的广泛的应用.最终结合OSI和TCP/IP的优点,采用了一种只有五 ...

  3. mysql日志管理#二进制日志详解

    查看MySQL二进制文件中的内容有两种方式 mysqlbinlog SHOW BINLOG EVENTS [IN 'log_name'] [FROM pos] [LIMIT [offset,] row ...

  4. Python3爬虫（五）解析库的使用之XPath

    Infi-chu: http://www.cnblogs.com/Infi-chu/ XPath: 全称是 XML Path Language,XML路径语言,它是一门在XML文档中和HTML文档中查 ...

  5. go学习笔记-常见命令

    常见命令 go 命令 可以在控制台执行go来查看 go Go is a tool for managing Go source code. Usage: go <command> [arg ...

  6. 最小生成树算法 1.Prim算法

    最小生成树(MST):一个有N个点的图,边一定是大于等于N-1条边的.在这些边中选择N-1条出来,连接所有N个点.这N-1条边的边权之和是所有方案中最小的. Prim算法的时间复杂度时O(n^2)的, ...

  7. 如何将h5网页改成微信网页

    1.如何将h5网页改成微信网页 1.设置安全域名          先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.         备注:登录后可在“开发者中心”查看对 ...

  8. BFS 队列

    Plague Inc. is a famous game, which player develop virus to ruin the world. JSZKC wants to model thi ...

  9. ORB-SLAM 代码笔记（三）tracking原理

    ORB视觉里程计主体在tracking线程中

  10. 在Go语言里检测内存泄漏

    我们先来设定一下数据库,建立一个MySQL数据库表,名为users,里面有login_name.nickname.uid.password.forbidden几个字段,其中uid与forbidden为 ...