排他思想 -- 百度换肤效果案例以及点击某按钮只是该按钮变色

排他思想 – 百度换肤效果案例以及点击某按钮只是该按钮变色

1.百度换肤

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}body{background: url(001.jpg) no-repeat center top;}li{list-style: none;}.baidu{overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li{float: left;margin: 0 1px;cursor: pointer;}.baidu img{width: 100px;}</style>
</head>
<body><ul class="baidu"><li><img src="001.jpg" alt=""></li><li><img src="002.jpg" alt=""></li><li><img src="003.jpg" alt=""></li><li><img src="004.jpg" alt=""></li></ul><script>var imgs = document.querySelector('.baidu').querySelectorAll('img');for(var i = 0;i<imgs.length;i++){imgs[i].onclick = function (){//通过点击不同图片 更换背景图标签里的地址属性  改成点击图片的源地址document.body.style.backgroundImage = 'url('+this.src+')';}}</script>
</body>
</html>

2.点按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head>
<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>var btns = document.querySelectorAll('button');for(var i =0;i<btns.length;i++){//排他思想的经典应用 先干掉其他 再绑定点击的元素btns[i].onclick = function (){for(var j = 0;j<btns.length;j++){btns[j].style.backgroundColor = '';}this.style.backgroundColor = 'pink';}}</script>
</body>
</html>

排他思想 -- 百度换肤效果案例以及点击某按钮只是该按钮变色相关推荐

一个简单的百度换肤效果
一个简单的换肤效果 html和css部分 JavaScript部分 html和css部分 <style>* {margin: 0;padding: 0;}body {background: ...
js实现百度换肤效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
script-百度换肤效果
百度换肤效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
android l风格皮肤,基于Android-Skin-Loader实现换肤效果
skin-loader框架的换肤是通过插件化的形式替换资源文件,实现换肤效果.好处是可以在线更新皮肤换肤 Demo样例流程整个框架大概的流程是加载皮肤包,找到被标记的控件,通过自定义的Factor ...
前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
百度换肤JavaScript功能
百度换肤JavaScript功能 CSS-code: <style type="text/css">*{margin: 0;padding: 0;list-style: ...
python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
百度换肤 querySelector方法抖音播放
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
Jquery换肤效果
Jquery换肤效果简介: 自从Web2.0开始流行后,很多网站更加注重用户自定义,例如在网页上用户自定义新闻内容,可以任意拖动网页内容,也可以给网页选择一套自己喜欢的颜色等. 原理: 网页换肤的原 ...

排他思想 -- 百度换肤效果案例以及点击某按钮只是该按钮变色

排他思想 -- 百度换肤效果案例以及点击某按钮只是该按钮变色相关推荐

最新文章

热门文章

排他思想 -- 百度换肤效果案例 以及 点击某按钮只是该按钮变色

排他思想 -- 百度换肤效果案例 以及 点击某按钮只是该按钮变色相关推荐

最新文章

热门文章

排他思想 -- 百度换肤效果案例以及点击某按钮只是该按钮变色

排他思想 -- 百度换肤效果案例以及点击某按钮只是该按钮变色相关推荐