百度换肤JavaScript功能

CSS-code:

    <style type="text/css">*{margin: 0;padding: 0;list-style: none;}a{color: red;text-decoration: none;}body{background: url(./images/1.png);background-size: cover;}.nav{width: 100%;height: 40px;background: rgba(255, 255, 255, 0.4);border-bottom: 1px solid #ccc;}.navIn{width: 100px;height: 40px;margin: 0 auto;line-height: 40px;}.shadow{width: 100px;height: 100px;background: transparent;position: fixed;left: 0; top: 0;display: none;}.menu{width: 1000px;height: 200px;background: #fff;position: absolute;left: 50%;top: -200px;margin-left: -500px;text-align: center;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);transition:top 1s;/*点击弹出的速度*/}.menu img{width: 120px;margin-top: 50px;cursor:pointer;}</style>

HTML-code:

<body id="bg"><nav class="nav"><div class="navIn"><a id="btn" href="javascript:;">点击换肤</a></div></nav><div id="shadow" class="shadow"></div><div id="menu" class="menu"><!--图片路径--><img src="./images/1.png" alt=""><img src="./images/2.jpg" alt=""><img src="./images/3.jpg" alt=""><img src="./images/4.jpg" alt=""><img src="./images/5.jpg" alt=""></div>

JavaScript-code：

    <script type="text/javascript">/*获取属性*/var oBg = document.getElementById('bg');var oBtn = document.getElementById('btn');var oShadow = document.getElementById('shadow');var oMenu = document.getElementById('menu');var oImg = oMenu.getElementsByTagName('img');oBtn.onclick = function(){oShadow.style.display = 'black';oMenu.style.top = '0px';}oShadow.onclick = function(){oShadow.style.display = 'none';oMenu.style.top = '-210px';}oImg[0].onclick = function(){oBg.style.backgroundImage = 'url(./images/1.png)';//url(./images/1.png）这个是图片的路径，点击之后的图片路径。}oImg[1].onclick = function(){oBg.style.backgroundImage = 'url(./images/2.jpg)';}oImg[2].onclick = function(){oBg.style.backgroundImage = 'url(./images/3.jpg)';}oImg[3].onclick = function(){oBg.style.backgroundImage = 'url(./images/4.jpg)';}oImg[4].onclick = function(){oBg.style.backgroundImage = 'url(./images/5.jpg)';}</script>

效果截图:

详情：
还有JavaScript特效功能无法以动态图演示出来，如果需要预览可以通过下方下载源代码地址进行下载到你到desktop上在进行本地预览，谢谢！
希望有更多前端编程爱好者加入我们到官方群聊一起交流：773680934！

QQ:1733454706!

源代码下载：https://share.weiyun.com/5SMMoPu

百度换肤JavaScript功能相关推荐

前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)...
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...
浏览器换肤功能项目案例百度换肤
大家好我是攻城狮JiRo, 今天给大家分享一下浏览器换肤的功能需求:爱美之心,人皆有之,随着人们物质生活的提高,需求也不断提高,同样,作为开发者,我们当然要心系客户,那么今天的案例就是实现换肤功能 ...
百度换肤 querySelector方法抖音播放
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
[vue] 用vue怎么实现一个换肤的功能？
[vue] 用vue怎么实现一个换肤的功能? 这个--全局的theme属性然后做class判断或者加载不同的样式文件.一种是编译时换肤一种是用户操作换肤.编译时换肤可以通过css in js相关技术 ...
排他思想 -- 百度换肤效果案例以及点击某按钮只是该按钮变色
排他思想 – 百度换肤效果案例以及点击某按钮只是该按钮变色 1.百度换肤 <!DOCTYPE html> <html lang="en"> <he ...
仿造百度换肤功能的实现
换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验. 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现.在设计界面的 ...
antd pro使用ajax,antd在线换肤定制功能
最近react项目,用的antd框架,然后看见他的antdPro例子里面有个定制功能很帅,老大说做,那就做吧,鼓捣了一晚终于实现了. css换肤入行前端的时候经常看鱼哥(张鑫旭)的博客,记得看过这 ...
微信小程序之换肤的功能
pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...

百度换肤JavaScript功能

百度换肤JavaScript功能

百度换肤JavaScript功能相关推荐

最新文章

热门文章