利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性，例如：
.box{background: url(img/1.png),url(img/2.png),url(img/3.png);}
这段css代码，就给.box元素添加了三张背景图，而正因为有了这样一个功能，我们可以利用不停的变换这三张背景图的位置来实现幻灯片切换的效果。
html代码非常精简，如下：
<body>
<div class="box"> </div>
</body>
简单的给一些样式：
.box{
width: 300px;
height: 300px;
border: 1px solid #ccc;
background: url(img/1.png),url(img/2.png),url(img/3.png); //加载三张图片
background-repeat: no-repeat; //不重复
background-size: 100%,100%,100%; //设定图片显示尺寸，保障充满整个div
background-position: 0 0,-500px -500px,-500px -500px; //设置三个图片的偏移量
}
以下是js部分（jq代码）：
//把背景偏移值放在一个数组里
var arr= $('.qqq').css('backgroundPosition').split(',');
var num=0;
setInterval(function () {
//判断num值超过变成0
if (num==arr.length) {
num=0
}
//先把所有的图片偏移出去
for (var i=0;i<arr.length;i++) {
arr[i]='-500px -500px';
}
//把当前的图片偏移值设为0
arr[num]='0 0';
//把弄好的数组转换成字符串，赋予样式
var str=arr.join(',');
$('.qqq').css('backgroundPosition',str);
num++;
},1000)
这种方法实现会比以前的在图片外面套个div效率可高多了，代码也减少了许多。
利用css3的多背景图属性实现幻灯片切换效果的更多相关文章
- css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面
1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况 ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都 ...
- CSS3制作文字背景图
文字带上渐变色,或者说让文字透出图片.这些效果 CSS 属性也可以完成. 方法一.利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现, ...
- 利用media query让背景图适应不同分辨率的设备
随着上网方式的多样化,用户选择上网的工具不再仅是PC,而可以是手机,或者平板电脑.随之而来的问题是如何让网页适应不同分辨率,这给前端工程师们带来了新的挑战,其中重要的一点是如何让图片能在不同的分辨率下 ...
- CSS3之body背景图平铺
你再也不需要因为屏幕大小不同而去选择多张图片作为背景图了,css3教你做人: body { background: url('xx.jpg')top center no-repeat; backgro ...
- css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果
css3背景图像相关 兼容性:IE9+ background-clip 背景图片绘制区域 background-clip:border-box; 内容区 <!DOCTYPE html> ...
- 利用css3实现超出文本指定行数与省略号效果
<style> .text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ...
- 利用jquery实现网站中对应栏目下面内容切换效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Git日常操作指令
1. 将本地项目上传到码云: ①. 码云上创建一个项目 ②. 本地文件项目内右键git bash进入git控制台 ③. git init 命令 -- 会在本地创建一个.git文件夹 ④. git ...
- PHP中比较有用的几个函数
php_check_syntax 这个函数可以用来检查特定文件中的PHP语法是否正确. highlight_string 当你想要把PHP代码显示到页面上时,highlight_string()函数就 ...
- 基于Core Text实现的TXT电子书阅读器
本篇文章的项目地址基于Core Text实现的TXT电子书阅读器. 最近花了一点时间学习了iOS的底层文字处理的框架Core Text.在网上也参考很多资料,具体的资料在文章最后列了出来,有兴趣的可参 ...
- android将String转化为MD5的方法+一些String经常使用的方法
public class StringUtils { public static String MD5Encode(String origin) { String resultString = nul ...
- 清华EMBA课程系列思考之六 -- 比較文明视野下的中华领导智慧、企业管理与经济解析
告别马年的最后一缕阳光,踏着猴年的钟声,度过了温馨的春节,已然开启了新学期的第一堂课.看题目其貌不扬,但一旦进入课堂,已然聚精会神.唯恐掉队,就请大家跟我一起进入四天的心路修炼旅程,開始我们的新一期思 ...
- orale 中创建定时任务
--添加变量 variable job1 number; --创建JOB begin dbms_job.submit(:job1,'testjob;',sysdate, 'TRUNC(sysdat ...
- EJB3.0高速入门项目开发步骤
EJB3.0开发步骤 1. 开发环境 IDE开发工具:Eclipse Java EE IDE for Web Developers EJB容器:jboss-4.2.3.GA 后台数据库:MysQL ...
- 上传canvas图片到服务器
canvas绘图后用 canvasDom.toDataURL()可以得到png格式图片的base64 dataURI 然后用ajax post给后台 ,后端程序把开头的data:image/png; ...
- SharePoint Search之(七)Search result- 结果源
在使用搜索引擎的时候.非常多情况下,用户希望限定一下搜索范围,以便更加easy找到想要的结果. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvU1BGYXJ ...
- 安卓实训第四天--基于HttpClient来完毕数据在server和设备间的交互。
上午:老师首先回想了昨天作业. 首先在安卓project中的TOOLS文件里,解析字节流那里,不用改变.而是把server端的编码方式变为UTF-8,然后将在安卓project的LoginActivi ...