开发路程(14):背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)

MyFloatingBg这插件可以帮助你在网页上加入可移动背景Background。你可以用于整个文件的背景,或是某几个banner的背景。 它可支持简单的animation效果,你不用去做一个flash文件或动态gif图片。单靠jquery和图片,你便可以做出不同的效果。由于我们把动画效果跟内容分开,我们也可以随时更改文字等内容,而不影响其运作。这个效果很是大气,我想可以使用在高级餐厅,珠宝展会等中做展示用.

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title></title>
 6 <script type="text/javascript" src="js/jquery.js"></script>
 7 <script type="text/javascript" src="js/jquery.MyFloatingBg.js"></script>
 8 <script type="text/javascript">
 9 $(document).ready(function(){
10
11     $("#demoDiv1").MyFloatingBg({direction:-1});
12
13 });
14 </script>
15
16 <style type="text/css">
17 body { margin: 0px; }
18   .m{ height: 740px;
19     text-align: center;
20     font-family: 微软雅黑, Arial, Helvetica, sans-serif;
21     font-weight: bold;
22     font-size: 36px;
23     line-height: 740px;
24     }
25 </style>
26 </head>
27
28 <body>
29
30
31 <div id="demoDiv1" bg="img/fw2.png" class="m">
32   <div style="color:rgba(222,222,222,0.4)!important;">
33       欢迎光临!
34   </div>
35 </div>
36 </body>
37 </html>

js代码下载

开发路程(14):背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)

时间: 2024-08-24 20:43:42

开发路程(14):背景图片移动插件MyFloatingBg(浮动背景图效果,可让背景随着页面的滚动而滚动)的相关文章

【CSS学习笔记】初始化CSS后,写li,并利用背景图片,来完成li小图标的效果,且达到个浏览器兼容

第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复,位置:以及文字相关的padding,无序列图标,行高等*/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

移动端rem布局背景图片使用以及sprite雪碧图

现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片. rem布局 所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写.比如将<html>的字体设为100px,如果需要做一个100*200的元素,css如是写: div{ width: 1rem; height: 2rem; } 那么最终

CSS基础知识之背景图片样式属性、雪碧图、列表导航栏、超链接的伪类样式、盒子模型、overflow、圆角弧度

目录: 背景图片样式属性 雪碧图 列表导航栏 超链接的伪类样式 盒子模型. overflow. 圆角弧度 背景图片样式属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #imgContainer { border: 20px dotted yellow; padding: 50px; height: 400p

设置背景图片的两种方式,并解决手机端背景图片高度自适应问题

1 设置背景图片的两种方式: 方式一: <img src="../img/10.jpg"/ class="back" id="Background"> .back{ position: fixed; width: 100%; height: 100%; display: block; z-index: -100; } 方式二:div class="body" id="Background">

溢出处理、盒子模型、背景图片、float(浮动)

一.overflow:溢出内容的处理     overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)    overflow:auto; 自动滚动(有溢出产生滚动,没有就不产生滚动条)    overflow:scroll; 不管有没有溢出均产生滚动条 图片精灵技术    服务器    前项目部署到服务器上,图片当然也是在服务器上.网页如果要显示a图片,如果显示b图片,如果套很多图片 二.盒子模型:        margin(外边距).border

把二维码的图片和文字结合到一个背景图片上,合成一张图

public ActionResult HeCheng(string name) { string imgFullPath = HttpContext.Server.MapPath("~/images/djq_bg.jpg"); string imgFullPathwx = HttpContext.Server.MapPath("~/images/wx_bg.jpg"); using(Image bmp = Bitmap.FromFile(imgFullPath))

【57】android图片印刻,阳刻,素描图效果处理

介绍我参与开发的妙趣剪纸app使用的图片处理相关的技术 关于妙趣剪纸,各大android商店都可以下载,下面贴出小米商店的链接 妙趣剪纸下载 软件效果截图 如何实现上面的图片处理效果呢 1.初始化高斯矩阵 ProcessFactory.IniGauss_2(ProcessFactory.gauss_radius); //初始化高斯矩阵 2.转化为灰度图 Bitmap bmpGrayscale=ProcessFactory.toGray2(activity.imageBmp); //转化为灰度图

CSS3:background-size背景图片尺寸属性

background-size可以设置背景图片的大小,数值包括 长度length和百分比percentage. 并且会根据背景原点位置background-origin设置其图片覆盖的范围.那么下面我们一起来了解这个background-size属性吧. background-size语法 w3c对background-size的语法规定如下: 属性名: background-size 属性值: <bg-size>* 其中 bg-size = [ <length> | <pe

AppCanCSS背景图片的属性

最近在用AppCan框架技术做跨平台移动应用开发,碰到界面布局设计中图片平铺.拉伸效果. 我们用到的是CSS 3中Background-size属性. 网上查了下这个属性,小记下: 取值: background-size: auto || length || percentage || cover || contain 取值说明: 1.auto:此值为默认值,保持背景图片的原始高度和宽度: 2.length:此值设置具体的值,可以改变背景图片的大小: 3.percentage:此值为百分值,可以