工作网页特效日常积累
关注
分享
扫一扫
乐橙Web
不断上进，积极进取；努力赚钱，做好家中顶梁柱！
展开
-
鼠标放上去，出现大图预览效果
前天逛淘宝，看见淘宝的商品图片，鼠标放上去就会就会有相应大图的预览，于是就想着自己能不能做一个这样的效果出来，毕竟以前也看过这样类似的教程。思路： 一：页面布局 二：鼠标放上去，出现透明浮动块 三：鼠标在目标元素上移动时，出现预览图。 四：鼠标离开目标元素时，浮动块和大图预览消失。原创 2017-03-23 18:18:18 · 8410 阅读 · 0 评论 -
JS阻止浏览器滚动事件
在前几天的项目中，场景值如下： 1.动态生成列表，列表高度不固定 2.外面父元素的属性设置为overflow:auto; 3.鼠标移动到列—li中的a上,出现选择列表，鼠标在列表上，列表不消失 4.当鼠标放置到出现的列表上时，再滚动滑轮，因为出现的列表为是根据标签a的位置来进行定位的，所以滚动的时a页面在滚动，但列表位置虽然没变，但与原来a标签相符合的位置却变了 因为父元素ov...原创 2018-05-28 21:28:38 · 12624 阅读 · 2 评论 -
2018-05-28最新兼容ios和andorid的复制粘贴方法
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2018-05-28 20:40:22 · 1103 阅读 · 0 评论 -
自定义select，根据某项条件禁止选择，形成事件联动的解决
这两天在公司项目中，维护phtml文件，有个相互制约的联动且自定义select，想了好久才解决问题，这里主要运用到了元素属性textContent。需要注意点有1> 事件的产生的先后顺序2> 事件内容状态的暂存代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi原创 2018-04-27 13:36:05 · 1041 阅读 · 0 评论 -
自定义 select选框的实现
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"原创 2018-04-25 19:17:02 · 547 阅读 · 0 评论 -
利用CSS3中：after和：before属性制作bootStrap中的toolTip
第一次写博客，不免还有点小激动，希望博文中有差错的地方欢迎大家勘正，指导~ 前几天看了看bootStrap中的toolTip觉得蛮好看的，就想着自己试着写一写。 先贴上两个伪元素的兼容性 分为三个部分解决这个问题：①html布局问题②toolTip提示框的拼接③toolTip的定位问题 ...原创 2017-03-16 18:57:44 · 3191 阅读 · 0 评论 -
封装弹窗并模拟confirm方法
代码如下&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewpo原创 2018-05-09 19:45:31 · 1575 阅读 · 0 评论 -
通过CSS3使图片从左上角移动到右下角
去网上着了好久都没找到，后来想到了cacl计算属性才解决<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini原创 2018-04-24 09:31:36 · 9810 阅读 · 2 评论 -
前端实现伪分页
有时候，做静态页面的时候，需要用到分页，当然绝绝绝大多数的情况下，分页这个事是后台来做的，用户请求时再给数据，至于两者利弊，稍后再讲。 因此，我们在这里称作它为伪分页。此分页分为四部分，首先是页面布局，为了简洁布局，直接用了BootStrap中的分页，代码如下 实现伪分页原创 2017-07-14 14:32:34 · 1874 阅读 · 0 评论 -
原生JS方法写三级联动
最近在练习项目时，遇到了三级联动问题，于是就在本地用JS做了一个三级联动，如有写的不对的地方，请大佬们指正出来~ 1、搞清楚标签的一些选择框脚本。 1.当选中某个option时，其selected脚本属性为true。 2.select列表的长度为长度即为的数目和。 2、初始化列表值 HT原创 2017-06-21 17:07:02 · 5712 阅读 · 1 评论 -
web中loading的几种方式
大体可分为三类，分别为菊花图类、顶部进度条类、skeleton screen(加载占位图)菊花图 -----【适合整个页面一起呈现，保持数据的连贯性】loading菊花图百分比gif动画顶部进度条 ----- 【适合PC网站的数据加载，实际进度需要与后台进行搭配，常与菊花图配合使用】顶部进度条skeleton screenskeleton...原创 2018-10-25 18:45:18 · 2106 阅读 · 0 评论