接上文html+css+js鼠标点击切换背景图教程一-软件库 (knrjk.com)
上帖我们讲到了把图片放入li列表的小方格里(就是样子有点奇怪,不能说是奇怪,只能说是有点变扭),接下来我们继续 因为图片的样子有点变扭,所以我们得调整一下图片的尺寸(宽度).
![图片[1]-html+css+js鼠标点击切换背景图教程二-软件库](https://pic.knrjk.com/view.php/27671ea76f97c172ed06675c0349315d.jpg)
(调整完后就舒服多了,不是吗)
我感觉白色的背景不好看不够花里胡哨[滑稽] 想换成我放在标签的图片
![图片[2]-html+css+js鼠标点击切换背景图教程二-软件库](https://pic.knrjk.com/view.php/9eceb0f74a0111d15af32921ad7a81f1.jpg)
(到这里,css部分已经基本上完成了)
这样就舒服多了,,那我想让他当鼠标点击ul列表的图片 > 背景图片background-image切换成鼠标点击的图片,该咋办呢? 这个时候,就用到了JavaScript 简称js
js是什么呢 js 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。(简单来说js就是脚本语言[滑稽])
它主要功能有:
嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies,包括创建和修改等。
js代码没有规定的位置,你可以写在html文件里(注:Javascript 脚本代码可被放置在 HTML 页面的 和 部分中。[真棒]),也可以单独新建一个js的文件 后缀名为.js(我这边比较推荐新建一个js文件,但是由于我比较懒,js是直接写在html文件里[滑稽][滑稽])
html引入js文件方法:
在script标签内直接写入javaccript代码;
通过“<script src="文件地址">”引入外部JS文件;
在已有的javascript指令中使用“script.src = “js地址””,引用远程js文件。(js部分先解释到这里,之后有时间会出一帖更详细的教程)
想必各大家已经对js有了一定的了解了,那我们接下来继续
![图片[3]-html+css+js鼠标点击切换背景图教程二-软件库](https://pic.knrjk.com/view.php/d302c7d0712ffe608c6d943c09d5208e.jpg)
那我们现在想要获取鼠标点击第二张图片时,页面的背景图片发生改变,该怎么做呢?
![图片[4]-html+css+js鼠标点击切换背景图教程二-软件库](https://pic.knrjk.com/view.php/caf5a8730e0beafd3ac2488fd9d1a2c2.jpg)
定义好点击事件后,我们往里面加上鼠标点击之后,要切换的背景图片代码
![图片[5]-html+css+js鼠标点击切换背景图教程二-软件库](https://pic.knrjk.com/view.php/e2ae266ff1775d2b60dc77c07a528ecf.jpg)
好的,现在我们已经实现了当鼠标点击第二张图片,的背景图片发生改变,但是我们总体要的效果是,当鼠标点击某一张图片,背景就变成那张图片
所以接下来我们得用到for循环
![图片[6]-html+css+js鼠标点击切换背景图教程二-软件库](https://pic.knrjk.com/view.php/4b2ca56c1352e390a705f8ffc9102eef.jpg)
OK,整体效果已经实现了 代码到这里也就结束了,感谢各位大佬的捧场,还有什么不懂的,可以评论问,我看到了就会回。