网页特效
学习使我快乐——玉祥
java,Android开发....略知一二
展开
-
<textarea>设置不自动换行
加入 wrap="off" 属性,如:<textarea wrap="off"></textarea>原创 2021-12-20 12:49:04 · 1796 阅读 · 0 评论 -
什么是应用防抖?
例如,JavaScript渲染web页面图表的时候,如果想自适应窗口拖动而调整图表大小的话,就需要使用浏览器窗口的监听器,通过该监听调用重绘图表的方法。绘制一次图表需要大量的计算,而拖动浏览器窗口一秒大概能触发10次左右,可是绘制图表一秒可达不到这样的效率。因此每一次被触发而绘制图表,还没绘制完成就会被打断,转而进行新的绘制,从而被一次又一次打断。并且对于用户来说,一般也不可能一秒看十次图表的数据。因此,为了避免这样的情况,我们应该加入重绘延迟。一种方式就是设置定时器,如设置20原创 2021-08-15 01:32:37 · 132 阅读 · 0 评论 -
css实现android类似的dialog效果
先上图:原理:用两个div叠加,底层放内容,上层放dialog。简单易懂,html的标签中带dialog,但是效果如下。因此还是动手做一个比较好。HTML<div id="content" >//这个div显示网页主要内容 //设置一个按钮用于显示自定义的dialog <button id="loginbutton">显示登录界面</button></div><!--弹窗-->&原创 2021-04-18 09:00:01 · 278 阅读 · 0 评论 -
CSS+JS实现侧边栏
先上图功能:1、点击按钮弹出侧边栏,点击按钮关闭侧边栏;2、侧边栏弹出时,其他部分变暗,点击变暗区域也可以收起侧边栏首先我这里采用两个div叠加作为基础框架。底层div显示内容,上方div显示侧边栏,因此需要将body固定一下,在body放置两个div。csshtml,body{ padding: 0; margin: 0; width: 100%; height: 100%;}body{ position: relative;原创 2021-04-18 01:28:17 · 3832 阅读 · 8 评论 -
css实现下拉菜单
先上图这是看到星巴克网站的一个风格很喜欢,但这只是引用了一个logo和一些文字名称,这里实现的样式是一个普通的下拉菜单。html<div id="navbar"> <a href="#"><img src="img/logo.svg" height="37px"></a> <h4><a href="https://www.baidu.com/">门店</a></h4&g原创 2021-04-18 00:36:40 · 235 阅读 · 0 评论 -
css+js制作循环轮播图——可滑动
先上效果图:(1)自动切换(2)手动拖拽HTML <div id="adbox" class="adbar"> <img src="img/back6.jpg"> <img src="img/back1.jpg"> <img src="img/back2.jpg"> <img src="img/back3.jpg"> <img原创 2021-03-25 15:07:40 · 2767 阅读 · 1 评论 -
css普通轮播图
<div class="adbar"> <img class="p1" src="img/back1.jpg"> <img class="p2" src="img/back2.jpg"> <img class="p3" src="img/back3.jpg"> <img class="p4" src="img/back4.jpg"> </div>.a...原创 2021-03-18 10:33:27 · 102 阅读 · 0 评论 -
CSS制作旋转立体正方形
<div class="stage"> <div class="container"> <div class="side front">前面</div> <div class="side back">背面</div> <div class="side left">左面</div> <div class="side right"&g...原创 2021-03-16 08:11:33 · 349 阅读 · 0 评论 -
css制作导航栏——上下翻页
<div> <div class="menu1"> <div class="one"><a href="#">首页</a></div> <div class="two"><a href="#">Home</a></div> </div> <div class="menu1"> <di...原创 2021-03-15 20:29:16 · 482 阅读 · 0 评论 -
JS实现控件渐隐渐显效果
通过div举例:鼠标在div上时使其渐显,鼠标移开使其渐隐<div class="picture" onmouseenter="setstatus(this,1)" onmouseleave="setstatus(this,0)"></div>(1)先给该div添加一个自定义属性用在效果变化的过程中进行中断(比如渐隐未完成时又想让div渐显),应该也有其他方式进行中断;我这里采用0和1作为属性值;初始值为0$(".picture").attr("isno",0)原创 2020-09-27 17:09:40 · 2165 阅读 · 0 评论