随笔分类 -  网页效果

网页效果-----手拉风琴
摘要：前端开发中，经常会用到手拉风琴的展示效果，实现方式也是多样的，现在记录其中一种方式（感觉代码量比较少）： 当然这个是只实现了最基本的样式。 阅读全文
posted @ 2018-06-12 14:08 SophiaLiu 阅读(773) 评论(0) 推荐(0)
修改select下拉框的下拉按钮
摘要：ie上的下拉框下拉按钮真是太丑了，如何把他自定义一下呢？ 首先，把浏览器自带的下拉框去掉： select::-ms-expand { display: none; } 接下来，用自己喜欢的下拉图片去替换： select { padding-right:20px; color:#a7bce3; app 阅读全文
posted @ 2018-03-30 13:29 SophiaLiu 阅读(9686) 评论(0) 推荐(1)
左侧手风琴下拉菜单导航(网页常用功能）
摘要：效果如下： 代码如下： html: css: 阅读全文
posted @ 2018-03-16 09:07 SophiaLiu 阅读(755) 评论(0) 推荐(0)
网页中多一些常见效果之伸缩菜单（主要是学习js的书写方法）
摘要：效果如下图： 代码很简单，如下： 阅读全文
posted @ 2018-03-08 20:34 SophiaLiu 阅读(336) 评论(0) 推荐(0)
自定义复选框样式
摘要：效果如下 通过label和checkbox，我们可以将checkbox隐藏，而将label制作为各种漂亮超酷的复选框样式。 1.css 如下 #rulelabel{ background-image:url(../static/image/unselected.png); background-re 阅读全文
posted @ 2017-02-08 09:24 SophiaLiu 阅读(298) 评论(0) 推荐(0)
抽屉式展示效果（转自手册网）
摘要：一： jQuery 效果 - animate() 方法： 定义和用法 animate() 方法执行 CSS 属性集的自定义动画。 该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。 只有数字值可创建动画（比如 "margin:30px"）。字符串 阅读全文
posted @ 2016-12-08 09:11 SophiaLiu 阅读(534) 评论(0) 推荐(0)
jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
摘要：轮播图 阅读全文
posted @ 2016-08-22 11:07 SophiaLiu 阅读(1586) 评论(0) 推荐(0)
js实现刮刮卡效果
摘要：这张图片是prize.jpg 阅读全文
posted @ 2016-07-01 14:38 SophiaLiu 阅读(1740) 评论(0) 推荐(0)
导航栏固定在顶部，滑动下面内容，不同的内容块，上面的导航相应的变颜色
摘要：效果如e车宝的网站 阅读全文
posted @ 2016-05-17 15:56 SophiaLiu 阅读(1057) 评论(0) 推荐(0)
当导航栏滚动到浏览器顶部时，固定导航栏
摘要：获取元素（这里定位元素A）距离顶部的高度，接着设定scroll滚动的事件，比如超过那个高度，把A的位置设定为fixed，小于该高度，修改回relative。 •$(function(){ •//获取要定位元素距离浏览器顶部的距离 •var navH = $(".nav").offset().top; 阅读全文
posted @ 2016-04-12 16:15 SophiaLiu 阅读(1207) 评论(0) 推荐(0)
scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动（冻结）的效果
摘要：HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中 阅读全文
posted @ 2016-03-25 11:30 SophiaLiu 阅读(330) 评论(0) 推荐(0)