当前位置: 58彩票app下载 > 计算机网络 > 正文

纯js达成背景图片切换效果代码

时间:2019-09-18 11:14来源:计算机网络
html代码 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""; html xmlns="; head title背景切换/title link href="css/bgchage.css" type="text/css" rel="Stylesheet" / /head body divulli/lili/lili/lil

html代码

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title>背景切换</title>
<link href="css/bgchage.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<div><ul><li></li><li></li><li></li><li></li></ul></div>
<!-- <div>1</div><div>2</div><div>3</div><div>4</div>-->
</body>
<script src="js/bgchage.js" type="text/javascript" ></script>
</html>

因为javascript逻辑顺序相比较强,所以要思索引用js的岗位
css代码

复制代码 代码如下:

body {font-size:12px;}
div{ width:950px; height:800px; margin:0 auto; border:solid 1px #d0d0d0;}
li{ list-style-type:none;border:solid 1px #d0d0d0; float:left; margin: 1px; padding:0 5px; height:12px; width:10px;}
/*div{ width:6px; height:14px; margin:1px; padding:0 5px; float:left; border:solid 1px #d0d0d0;}*/

javascript代码部分:

复制代码 代码如下:

window.onload=init;
var element= document.getElementsByTagName("li");
function init() //起首化背景象
{
var element= document.getElementsByTagName("li");
for(var i=0; i<4;i++)
{
var k=i+1;
element[i].style.background="url(images/"+k.toString()+".jpg)";
}
}
function addclick()
{
for(var i=0; i<4;i++)
{
var k=i+1;
if(window.attachEvent)
element[i].attachEvent("onclick", new Function("bgchage("+k+");")); //创设事件不能够直接.onclick而急需使用.attach伊芙nt("事件",new Function("被调函数("+参数+");"));IE6通过
else
element[i].addEventListener("click", new Function("bgchage("+k+");"),false);
}
}
function bgchage(t) //依照色块退换背景观
{
document.getElementsByTagName("body")[0].style.background="url(images/"+t+".jpg)";
}
addclick();

js部分要注意写事件的相配,並且实际jq的思绪就是将众多成效写成插件的款式供本身使用,用javascript写,能够写本人的类库,供再三使用,也不供给承担jquery类库的负担。其实小编亦不是说jquery倒霉,从大的方面来讲,jquery的插件大小影响并很小,前端事件看了百度前端交换会的摄像,开采人家的类库也都以js自个儿写的,那给了自己一而再求学js的引力。

您可能感兴趣的稿子:

  • js达成网页随机切换背景图片的艺术
  • 运用js操作css完毕js退换背景图片示例
  • js鼠标点击图片达成自由转换图片的点子
  • js完成点击图片改动页面背景图的章程
  • js设置随机切换背景图片的简易实例

编辑:计算机网络 本文来源:纯js达成背景图片切换效果代码

关键词: