纯js实现背景图片切换效果代码


Posted in Javascript onNovember 14, 2010

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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而需要使用.attachEvent("事件",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的动力。
Javascript 相关文章推荐
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
js实现时间日期校验
May 26 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 #Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 #Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 #Javascript
javascript 学习笔记(onchange等)
Nov 14 #Javascript
javascript取消文本选定的实现代码
Nov 14 #Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 #Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 #Javascript
You might like
PHP详细彻底学习Smarty
2008/03/27 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
input框中的name和id的区别
2016/11/16 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python绘图方法实例入门
2015/05/19 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
基于python绘制科赫雪花
2018/06/22 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python pycharm的安装及其使用
2019/10/11 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
最新会计专业求职信范文
2014/01/28 职场文书
人事部经理岗位职责
2014/03/07 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
团委竞选演讲稿
2014/04/24 职场文书
推荐信怎么写
2014/05/09 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
装配出错检讨书
2014/09/23 职场文书
公司离职证明标准样本
2014/10/05 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
Python中相见恨晚的技巧
2021/04/13 Python