百度换肤。

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量114 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/donggua123011/article/details/124907733
版权

先设置html有一个ul(class="baidu"里面有四个小li，li里面放一张图片watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16

 然后设置css样式

1.清除内外边距

2.给body设置背景图片

3.去掉li里面小点

4.设置ul

5.设置li

6.设置图片imgwatermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16 

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_19,color_FFFFFF,t_70,g_se,x_16 

 设置js

先给一组元素注册事件，然后在给四个图片循环注册事件

添加for循环

再把当前图片页面背景取过来给bodywatermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YWS6YW_5bCP5bCP5rGk5ZyG,size_20,color_FFFFFF,t_70,g_se,x_16

 

酒酿小小汤圆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度换肤，表单全选案例
WangZhang_521的博客
03-06 654
01-排他思想(算法) <!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"> &lt
网页换肤代码
water7_melon7的博客
05-18 217
<!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>百.
实现百度换肤功能
SqlloveSyn的博客
12-27 429
点击图片浏览器背景变为所点的图片。
前端百度换肤案例
weixin_46002223的博客
08-28 544
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { .
html实现百度换肤,百度换肤
weixin_39900437的博客
06-15 503
百度换肤 html,body,div {margin: 0;padding: 0;}body {width: 100%;background: url(../images/01.jpg);}.back {width: 100%;height: 200px;background: rgba(228, 168, 168, 0.3);text-align: center;}.back img {hei...
js百度换肤
qq_40052011的博客
04-15 391
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0} body { ba...
仿百度换肤功能的简单实例代码
09-02
在本文中，我们将探讨如何实现一个简单的仿百度换肤功能，通过JavaScript、CSS和HTML代码来创建一个允许用户更改网页背景图片的功能。首先，我们来看一下实现这个功能的关键点： 1. **HTML 结构**： HTML 部分包含...
百度换肤案例
12-05
【百度换肤】是网页应用或桌面应用中一种常见的用户界面个性化设计，它允许用户根据自己的喜好更改软件或网站的视觉样式。在这个案例中，我们将深入探讨如何实现类似百度这样的换肤功能，以及如何结合右击菜单来增强...
Vue百度换肤.zip
05-21
在“Vue百度换肤”这个项目中，我们可以看到一个基于Vue.js的皮肤切换功能的实现，这对于初学者来说是理解Vue指令操作和实际应用的一个很好案例。 首先，我们来探讨Vue.js的核心知识点： 1. **数据绑定**：Vue.js...
模仿百度换肤的功能
01-20
在模仿百度换肤功能时，jQuery将扮演核心角色。 1. **HTML结构**： 在`index.html`文件中，我们需要创建皮肤选择器和预设的皮肤按钮。这些按钮通常以链接或下拉菜单的形式出现，每个按钮代表一种皮肤样式。例如： ...
百度界面的登陆以及换肤功能
04-14
用html和css以及jQuery写的百度登陆界面和换肤功能。用的是vs2015，解压一下就能找到你想要的。
仿造百度换肤功能的实现.rar
08-15
标题中的“仿造百度换肤功能的实现”指的是在网页应用中实现类似百度搜索引擎的用户界面换肤功能。这个功能允许用户根据个人喜好选择不同的视觉样式，为网站提供个性化体验。这种技术通常涉及到HTML、CSS和...
DOM ------ 百度换肤
HuoZhiyan 的博客
02-08 1004
百度换肤：点击某个图片，设置该图片为背景图。 //css代码 * { margin: 0; padding: 0; } body { background: url(../Picture/图片1.png) no-repeat center top; } li { list-style: none; } .ba
百度换肤怎么实现的html,Bootstrap框架结合jQuery仿百度换肤功能实例解析
weixin_39634876的博客
06-17 281
换肤功能的应用很广，不管是搜索界面还是普通的管理界面等等，都可以进行设计并且应用换肤功能，起到更好的用户体验。今天仿造百度的换肤功能，实现了基本的换肤功能，接下来将会为大家介绍如何实现。在设计界面的过程当中，我采用了Bootstrap框架，以便更好的适应屏幕。(当然也是为了更好的熟悉使用这个框架，大家别忘了把Bootstrap框架的css和js包引进来哦)。在创建项目时最好可以分别将css、js、...
html如何设置跳转到百度页面,js仿百度切换皮肤功能（html+css）
weixin_33610824的博客
06-03 764
js仿百度切换皮肤效果：(换肤出来一个div，选择你想要的图片，作为网页背景，保存)要点：cookie保存状态html代码:换肤热门收起css代码:* {margin:0px;padding:0px;}#header {height:40px;width:100%;background:#000000;}a {text-decoration:none;}.dbg {float:left;}#dim...
百度换肤怎么实现的html,JavaScript 实现百度换肤功能
weixin_42364040的博客
06-17 590
运用场景平时很常用，在很多的网页上边我们都可以看到切换皮肤的功能，所以今天我们来实现以下效果选中第一个图片时image.png选中第二个图片时image.png具体思路当我们点击这个皮肤的图片时，就让它运用到我们的网页效果上边，具体的操作步骤就是给每一个图片新建一个点击事件，当我们触发这个事件的时候就要把这个事件对应的图片的src就是链接应用在网页body的backgroundImage 这个属性...
html实现百度换肤,案例实战（二）：百度脑图网站换肤
weixin_39993623的博客
06-15 263
课时1，2：对前四季课程进行了简单的总结，介绍了第五季到第八季Github开源之旅系列课程的安排和规划。通过三个案例演示说明了stylish是什么。给出了本课程的安排和规划，主要内容是网站换肤原理，工具使用以及CSS基础。课时3：介绍了网站换肤的原理，以及网站换肤的三个工具：浏览器研发者工具、stylish插件以及userstyles.org网站。通过百度搜索网站的换肤，演示了网...
html实现百度换肤,基于jQuery实现仿百度首页换肤背景图片切换代码
weixin_39539563的博客
06-15 280
不多说了，先给大家展示效果图，本文支持源码下载哦，需要的朋友可以直接下载使用，代码很简单哦～html代码：换肤 var i=1;$("a").click(function(){$(".head").animate({height:"288px"},500);});$(".p2").click(function(){$(".head").anima...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 536
JavaScript青少年简明教程：函数及其相关知识（下）
jquery百度换肤
10-28
jquery百度换肤是一种基于jQuery框架的网页换肤功能。它可以让用户在不改变网页内容的情况下，通过点击不同的皮肤按钮来改变网页的背景、字体颜色等外观效果。这种功能可以提高用户的体验感和网站的美观度。 实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值