注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天朝布衣田中码农参上

苦逼码农的点点滴滴,请多多指教!

 
 
 

日志

 
 
 
 

利用几行JS代码就让背景图滚动的办法  

2017-09-16 19:58:21|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
说起这个让背景图滚动,估计有些朋友会说用JQuery就可以很简单实现,但是请记住一点,只是为了这个功能就去加载JQuery框架就性能来说是绝对得不偿失的。当然直接利用js来实现它也并不难[几行代码就成],而且还可以随意指定它的滚动方向或角度什么的,原理也是简单之极,就是不断地修改backgroundPosition的值。
那么我们首先得明白backgroundPosition的作用:设置背景图像的起始位置。这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始[所以背景图滚动的效果就全靠它了]。
它的可选值有如下:
描述
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

如果您仅规定了一个关键词,那么第二个值将是"center"。

默认值:0% 0%。

x% y%

第一个值是水平位置,第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值,另一个值将是 50%。

xpos ypos

第一个值是水平位置,第二个值是垂直位置。

左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值,另一个值将是50%。

您可以混合使用 % 和 position 值。

对于我们来说,要想滚动就是直接让xpos ypos的值不停变动,当然使用百分比其实也是一个不错的办法。先来看看下面的滚动背景代码:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body style="background: url(http://593668.com/skin/default/image/logo.gif);}">
<div color="red">593668.com</div>
<script language="javascript">
var start = 0; //开始位置
function bgscroll(){
//document.body.style.backgroundPosition = "0px " + ++start+"px"; //上下翻滚
//document.body.style.backgroundPosition = ++start+"px 0px"; //左右翻滚
document.body.style.backgroundPosition = ++start+"px "+start+"px"; //对角翻滚
//如果需要调整滚动方向,请将++改成--,至于更多的滚动方式,请自行调整
setTimeout("bgscroll()",16); //定时执行,修改这个可以改动滚动的速度
}
bgscroll();
</script>
</body>
</html>

如果需要换成X% 或Y%的表达方式,也同样可以只是需要稍稍调整下。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body style="background: url(http://593668.com/skin/default/image/logo.gif);}">
<div color="red">593668.com</div>
<script language="javascript">
var start = 0; //开始位置
function bgscroll(){
//document.body.style.backgroundPosition = "50% " + ++start+"%"; //上下翻滚
//document.body.style.backgroundPosition = ++start+"% 50%"; //左右翻滚
document.body.style.backgroundPosition = ++start+"% "+start+"%"; //对角翻滚
//如果需要调整滚动方向,请将++改成--,至于更多的滚动方式,请自行调整
setTimeout("bgscroll()",32); //定时执行,修改这个可以改动滚动的速度
}
bgscroll();
</script>
</body>
</html>

当然同样可以同样滚动某个或多个元素的背景图片。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="scrool1" color="red" style="float:left;width:300px;height:500px;background: url(http://593668.com/skin/default/image/logo.gif);}">593668.com</div>
<div id="scrool2" color="red" style="float:left;width:300px;height:500px;background: url(http://593668.com/skin/default/image/logo.gif);}">593668.com</div>
<script language="javascript">
var start = 0; //开始位置
function bgscroll(){
document.getElementById("scrool1").style.backgroundPosition = ++start+"% 50%"; //左右翻滚
document.getElementById("scrool2").style.backgroundPosition = "50% " + ++start+"%"; //上下翻滚
//如果需要调整滚动方向,请将++改成--,至于更多的滚动方式,请自行调整
setTimeout("bgscroll()",32); //定时执行
}
bgscroll();
</script>
</body>
</html>

效果图如下:
利用几行JS代码就让背景图滚动的办法 - 1976xyg - 红尘若梦
 
怎么样,是不是很简单。当然这种背景图滚动的效果其实针对页游来说也是效果挺好的,还记得小时的任天堂游戏吗,虽然游戏主角看似在向前走,其实只是不停地滚动背景图哦。 那么学会了这个,做页面游戏就可以有更多的花样可以玩了,来做个游戏给大家开开眼界吧。
  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018