Javascript特效：图片切换（类似于电商网站图片查看）的封装实现和闭包实现

知识点

重读度高的代码要考虑能否封装
凡是CSS属性，必须使用style修改。自身标签属性不需要。

运行效果

鼠标移动到下面不同的图片上，上面的图片会发生变化。

代码

封装实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;list-style: none;}#box{border: 1px solid #cccccc;width: 650px;height: 150px;padding-top: 360px;margin: 100px auto;background: url("images/阿鲁1.gif") no-repeat center 30%;background-size: 60% 60%;}ul{display: flex;justify-content: center;align-items: center;cursor: pointer;}</style>
</head>
<body>
<div id="box"><ul><li id="li01"><img src="data:images/阿鲁1.gif" alt=""></li><li id="li02"><img src="data:images/阿鲁2.gif" alt=""></li><li id="li03"><img src="data:images/阿鲁3.gif" alt=""></li><li id="li04"><img src="data:images/阿鲁4.gif" alt=""></li><li id="li05"><img src="data:images/阿鲁5.gif" alt=""></li></ul>
</div>
<script>window.onload = function (ev) {// 1. 获取标签var li01 = $('li01'),li02 = $('li02'),li03 = $('li03'),li04 = $('li04'),li05 = $('li05');var box = $('box');// 2. 接听鼠标事件liLis(li01,1);liLis(li02,2);liLis(li03,3);liLis(li04,4);liLis(li05,5);};/*** 根据id获取标签* @param {string}id*/function $(id) {return typeof id === 'string' ? document.getElementById(id) : null ;}/*** 改变传入的标签的北京* @param {string}liID* @param {number}imgID*/function changeImg(liID, imgID) {$(liID).style.background = 'url("images/阿鲁'+ imgID +'.gif") no-repeat center 30%';$(liID).style.backgroundSize = '60% 60%';}/**** @param {string}liID* @param {number}imgId*/function liLis(liID, imgId) {liID.onmouseover = function () {changeImg('box',imgId);}}
</script>
</body>
</html>

闭包实现

1. 闭包
(function (tag) {})(flag)
获取flag的值，传递给tag，立即执行其中的函数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;list-style: none;}#box{border: 1px solid #cccccc;width: 650px;height: 150px;padding-top: 360px;margin: 100px auto;background: url("images/阿鲁1.gif") no-repeat center 30%;background-size: 60% 60%;}ul{display: flex;justify-content: center;align-items: center;cursor: pointer;}</style>
</head>
<body>
<div id="box"><ul><li id="li01"><img src="data:images/阿鲁1.gif" alt=""></li><li id="li02"><img src="data:images/阿鲁2.gif" alt=""></li><li id="li03"><img src="data:images/阿鲁3.gif" alt=""></li><li id="li04"><img src="data:images/阿鲁4.gif" alt=""></li><li id="li05"><img src="data:images/阿鲁5.gif" alt=""></li></ul>
</div>
<script>window.onload = function (ev) {// 1.获取需要的标签var box = document.getElementById('box');var allLis = box.getElementsByTagName('li');// 2. 接听鼠标进入li标签for (var i = 0; i < allLis.length ; i++) {// 2.1 取出单独li标签var sLi = allLis[i];(function (tag) {// 每一次将i+1的值传给tag，tag记录i+1的值sLi.onmouseover = function (ev1) {box.style.background = 'url("images/阿鲁'+ tag +'.gif") no-repeat center 30%';box.style.backgroundSize = '60% 60%';}})(i+1)}};
</script>
</body>
</html>

Javascript特效：图片切换（类似于电商网站图片查看）的封装实现和闭包实现相关推荐

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验. 图片懒加载,滚动到相应位置才加载图片. 图片预加载,如果为幻灯片.相册等,将当前展示图片的前一张和 ...
一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。...
a. 图片懒加载,滚动到相应位置才加载图片. b. 图片预加载,如果为幻灯片.相册等,将当前展示图片的前一张和后一张优先下载. c. 使用CSSsprite,SVGsprite,Iconfont.Ba ...
python爬虫实例电商_利用Python爬虫批量获取电商网站图片
import requests import re url='https://list.jd.com/list.html?cat=9987,653,655' res=requests.get(url) ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
HTML5期末大作业：电商网站设计——仿淘宝电商网站管理系统21页(含毕业设计论文7500字) HTML+CSS+JavaScript
HTML5期末大作业:电商网站设计--仿淘宝电商网站管理系统21页(含毕业设计论文7500字) HTML+CSS+JavaScript 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. ...
html期末作业代码网页设计——化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:化妆品电商网站设计--化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个人. 美食. 公司 ...
HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板...
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 ht ...
HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 ht ...
HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 h ...
利用jquery实现电商网站常用特效之：五星评分
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...

Javascript特效：图片切换（类似于电商网站图片查看）的封装实现和闭包实现

知识点

运行效果

代码

封装实现

闭包实现

Javascript特效：图片切换（类似于电商网站图片查看）的封装实现和闭包实现相关推荐

最新文章

热门文章