• 纯js实现背景图片切换


    现在纯粹用js的人越来越少了,更多的人喜欢jquery,可使我还是喜欢javascript,下面给出一个用javascript写的背景切换的小例子,各位大虾不要骂,只是写给自己看的,也供js事件的产考依据。

    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代码

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

    代码
    1 window.onload=init;
    2  var element= document.getElementsByTagName("li");
    3 function init() //初始化背景色
    4 {
    5
    6 var element= document.getElementsByTagName("li");
    7 for(var i=0; i<4;i++)
    8 {
    9 var k=i+1;
    10 element[i].style.background="url(images/"+k.toString()+".jpg)";
    11 }
    12 }
    13
    14
    15 function addclick()
    16 {
    17 for(var i=0; i<4;i++)
    18 {
    19
    20 var k=i+1;
    21
    22 if(window.attachEvent)
    23 element[i].attachEvent("onclick", new Function("bgchage("+k+");")); //创建事件不能直接.onclick而需要使用.attachEvent("事件",new Function("被调函数("+参数+");"));IE6通过
    24 else
    25 element[i].addEventListener("click", new Function("bgchage("+k+");"),false);
    26
    27 }
    28 }
    29
    30 function bgchage(t) //根据色块改变背景色
    31 {
    32 document.getElementsByTagName("body")[0].style.background="url(images/"+t+".jpg)";
    33 }
    34
    35 addclick();
    36
    37
    js部分要注意写事件的兼容,而且其实jq的思路就是将很多功能写成插件的形式供自己使用,用javascript写,可以写自己的类库,供反复使用,也无需承担jquery类库的负担。其实我也不是说jquery不好,从大的方面来说,jquery的插件大小影响并不大,前端事件看了百度前端交流会的视频,发现人家的类库也都是js自己写的,这给了我继续学习js的动力。

  • 相关阅读:
    动态表单之数据分页
    SQL Server 批量生成bcp命令
    SQL Server 全文索引的硬伤
    简单实用SQL脚本Part2:日期和时间函数
    使用SQL Server 扩展函数进行性能优化
    留念2010年5月5日
    C#获取URL参数值
    SQL Server扩展函数的基本概念
    SQL Server 空间换时间的数据库设计
    简单实用SQL脚本Part:查找SQL Server 自增ID值不连续记录
  • 原文地址:https://www.cnblogs.com/Carson/p/1876972.html
Copyright © 2020-2023  润新知