![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS+CSS案例分享
文章平均质量分 71
以实战为线索,以常用功能为案例,深入浅出的介绍JS和CSS结合的页面代码。
鱼仰泳
从设计到前端,我走过了20年的青春。
展开
-
JS+CSS案例:实时获取人民币与美元汇率+CNY与USD互换+单位转换成万元和亿元的汇率计算器
自动获取当前汇率,输入美元(USD)输出 人民币(CNY),点击文本框后的货币单位,可以交换兑换比率。自动处理数字输入:文本框允许直接粘帖科学计数法形式的数字(自动过滤空格,逗号及其他字符),如:2,923,706,026 或 2 923 706 026 这样的数字。对转换后的以元为单位的数值进行单位换算,可以换算为万元和亿元为单位的两种数值。原创 2024-08-09 20:26:21 · 268 阅读 · 0 评论 -
JS+CSS案例:可适应上下布局和左右布局的菜单(含二级菜单)
我们看到 在CSS引用时,我引用了3个css文件:reset.css ,style.css ,menu-y.css 并且,在引用 menu-y.css 时,还在这行代码的最后给它加了一个 id=cssfile 。为什么这样呢?因为我后面要通过js来改变这个ID的引用文件,达到用户前台切换样式表的目的。所以,这个id 一定不能忘了写。原创 2024-08-07 22:31:43 · 1218 阅读 · 0 评论 -
JS+CSS案例:用CSS+JS做漂亮的拟真时钟
今天给大家分享一个挺酷的CSS+js模拟的时钟。原创 2024-08-06 21:40:45 · 360 阅读 · 0 评论 -
JS+CSS案例:JS+CSS 实现漂亮时尚的样式表切换(换肤)功能
在页面前端给用户提供网站换肤的选择,并利用cookie记录用户访问网站时候选择的网站风格(样式表文件)。原创 2024-08-02 18:32:53 · 515 阅读 · 0 评论 -
JS+CSS案例:实现点击展开隐藏答案的帮助列表
要实现点击一个问题后关闭其他所有被展开的答案,你需要在JavaScript中添加一些逻辑来跟踪当前展开的答案,并在需要时关闭它们。我们首先通过querySelectorAll获取了所有的问题和答案元素,并将它们分别存储在questions和answers数组中。然后,我们为每个问题元素添加了一个点击事件监听器。在监听器的回调函数中,我们首先遍历所有的答案元素,并将它们的display样式设置为'none'来关闭它们。之后,我们找到当前被点击问题元素的下一个元素(即答案),并将其display样式设置为'bl原创 2024-08-01 18:41:52 · 248 阅读 · 0 评论 -
玩转CSS:用ul li +JS 模拟select,避坑浏览器不兼容。
在前端的工作中,经常会遇到 selcet控件,但我们用css来写它的样式时候,总是不那么令人满意,各种浏览器不兼容啊有没有?那么,我本篇文章就给大家提供一个思路:用UL 和li 模拟 select 控件,让我们用起来可以避免令人心烦的调整样式问题。原创 2024-07-24 20:18:42 · 472 阅读 · 0 评论 -
这个挺酷:原生JS代码实现:lightbox.+图片滚动(下:图片滚动部分)
我介绍了如何使用原生JavaScript+CSS实现了lightbox的基本功能。但我们这个图片组列表因为是数量可变的,所以,这样一下子都列出来是不行的。我们需要给外面的容器增加宽度和高度的限制,让溢出的图片,可以实现点击左右按钮滚动,这样才不会打乱页面的布局。这样我们就把滚动和lightbox两个部分都实现了。那么现在,就让我来介绍一下,我是怎么实现的。TIPs:本组滚动左右按钮是用css写的,没有使用图片,可以放心拿走。原创 2024-06-25 11:18:39 · 500 阅读 · 0 评论 -
JS实现拖曳排序效果并输出新的排序结果
这个例子不包括任何错误处理,并且假设列表中的data-index属性反映了当前项在列表中的正确索引。它设置了要传递的数据,并指定了一个图像作为拖动的可视反馈。同时,我们还创建了一个放置目标,它允许用户将数据放置在该元素上,并在放置操作时触发事件。在放置事件中,我们获取了拖动的数据并执行了相关的操作。DataTransfer 对象在 HTML5 拖放 API 中使用,它代表了一种数据和这些数据的类型,可以在拖放操作中传递。它的使用非常简单,你只要给网页中要拖放的元素增加简单的代码就可以实现。原创 2024-06-28 10:48:53 · 814 阅读 · 0 评论 -
JS+CSS特效:HTML+JS+CSS 实现精致的带二级菜单的头部菜单
既然a标签把它填满导致了原来的内圆角没有了,而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化,需要把样式写在最后两个子列表项上,而不是第7和第8上面。所以,在最后两个列表项上,我们使用的 nth-last-child 而不是 nth-child。原创 2024-07-16 16:43:05 · 855 阅读 · 0 评论 -
JQ+CSS实现鼠标上移显示更多内容的排行列表
下面这两句css样式,就是本例实现的核心之一,当鼠标移动到li上时,通过js给目标li 增加active类,这时,li中包含的 active_rank 的div就可见了,同时,让 被激活 的li下面包含的 normail_rank 的div不可见。当鼠标移动到列表项时,我们需要给目标li增加一个active类,并且,其他的li的active类被移除,这实现起来非常简单。因为这是静态页展示效果,复制了多遍的li的内容,所以代码比较看起来很长,但实际用程序写循环时候,就不会有这么多了。啊,忘了,顺便求个赞!原创 2024-06-26 13:13:14 · 551 阅读 · 0 评论 -
css+js实现导航栏色块跟随滑动+点击后增加样式
在css中定义的 .this 就是当li被点击时,给它增加的样式类名,通过修改 .this a 就可以实现点击后想要的效果。我这里就是给字体加粗,改变了字体颜色的深度。本例实现效果:当鼠标移动到其他菜单项时,会有个背景色块跟随鼠标横向平滑移动。当鼠标点击后,被点击的菜单名称文字字体会加粗。这段代码也很容易理解,当那个li项被点击,移除所有li的this类名,然后,给被点击的li增加this类名。好了,这个例子的效果就完美实现了。原创 2024-06-28 09:45:00 · 387 阅读 · 0 评论 -
分别用原生JavaScript和JQ实现Tabs切换代码,代码简单,效果美观。
tabs切换是前端工作中经常用到的,今天,我就将我自己经常用到的两种方法分享给大家。为什么会有两种呢?对于简单的项目来说,不需要引入JQ,也可以简单实现。原创 2024-06-23 23:33:24 · 307 阅读 · 0 评论 -
详解原生JS+CSS实现的很酷的焦点图的具体方法(附源码)
焦点图轮播,图片轮播,是网站前端非常常用的一个模块功能。它通常用于增强页面表现力,使页面美观,布局更丰满,增加页面动感。用来展示网站最新的和热门的内容,用于吸引用户点击,引导用户行为。TIPS:本例与上传资源稍微有所修改,切换按钮部分,用css代替了原来的图片样式。首先,我们分析一下这个轮播,以看出它基本上由几个部分组成:大图列表,小图列表(含标题),大图主题,切换按钮。好了,看了上面的代码,结构很清楚了吧。写到这里,页面布局基本成型,可以看到静态效果了。好了,效果图看过了,不感兴趣的同学可以划走了!原创 2024-06-27 20:30:00 · 776 阅读 · 0 评论 -
基于JQuery实现电梯导航特效+页面滚动一定高度后固定头部导航
因为长页面中具体的块的颜色和内容都与实际项目功能无关,所以,样式就没写在样式表里,直接写再了div上。从这案例,我们可以看到,它基本上是三个块:头部导航、侧边栏导航、一个长长的页面。还有最重要的一点,如果你的页面一动不动。你是不是忘记了什么?这样,我们的功能就都实现了。对了,给页面引用jquery。(记得修改jq的路径)好了,图看过了,感兴趣的同学请继续往下看。原创 2024-06-29 21:16:18 · 297 阅读 · 0 评论 -
这个挺酷:原生JS代码实现:lightbox.+图片滚动(上:lightbox部分)(含源码下载)
最终代码代码实现了一组数量未知的图片,横向排列(统一宽度和高度),容器固定宽度后,图片列表可左右滚动。图片点击,展开大图,可通过鼠标点击屏幕左右两侧箭头或按键盘方向键切换图片。我自己动手做的一个网站,需要展示一组不明确数量和大小的图片。网上的lightbox插件很多,功能很好很强大。这个阶段,我实现了lightbox应有的简单功能。展开大图,左右切换,关闭返回。下一篇,我们将完成图片组滚动部分。现在把代码分享出来,方便跟我同样需要的人。这一篇是上篇,我们先实现lightbox部分的功能(代码极其简单)。原创 2024-06-24 13:59:58 · 255 阅读 · 0 评论 -
实用代码:HTML+JS+CSS实现的全屏自动切换背景的时尚 登录与注册块翻转切换页面 代码详解
本篇,我介绍一个非常酷而且实用的代码:HTML+JS+CSS实现的全屏自动切换背景的时尚 登录与注册块翻转切换页面。说的有点晕是吧,没关系,看看效果图,你就明白了。动态切换登录和注册这块gif动画截图的效果不太清楚,但基本效果还是能够表达的了。想看清晰美女大图的,可以下载源文件包。原创 2024-07-03 23:13:09 · 998 阅读 · 0 评论