纯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 相关文章推荐
jquery 图片上传按比例预览插件集合
May 28 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
js数组操作常用方法
May 08 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
jQuery事件对象总结
Oct 17 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
vue中路由跳转不计入history的操作
Sep 21 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与javascript实现变量交互的示例代码
2013/07/23 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
pycharm修改file type方式
2019/11/19 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
股东协议书
2014/04/14 职场文书
精神文明单位申报材料
2014/05/02 职场文书
法制宣传口号
2014/06/16 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
导游词之天津盘山
2019/11/01 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA