上一页 1 ··· 16 17 18 19 20 21 22 23 24 ··· 27 下一页
  2018年9月16日
摘要: 在JavaScript中,常用offset、scroll和client家族属性来表示元素的位置和大小相关属性,最近在网上找到了一张图来表示三者之间的关系,正好可以在此借鉴一下。 本次主要来看一下offset家族,包括offsetWidth、offsetHeight、offsetLeft和offset 阅读全文
posted @ 2018-09-16 14:10 紅葉 阅读(575) 评论(0) 推荐(0) 编辑
  2018年9月11日
摘要: 在前面一篇说的是滚动条效果,本篇继续在前面的基础上面针对滚动条进行操作。本次要实现的效果如下:拖动滚动条左右移动时,上面的图片内容也相对外层盒子做相对移动。 下面针对要实现的效果进行分析:首先是页面基础结构,要实现内容的相对移动,里面的内容需要针对外层盒子相对定位,宽度应该大于外层盒子,而且外层盒子 阅读全文
posted @ 2018-09-11 20:57 紅葉 阅读(990) 评论(0) 推荐(0) 编辑
  2018年9月8日
摘要: 滚动条在前端页面中是进行见到的,但是在不同的浏览器中,默认的滚动条样式不同,有些浏览器的默认样式也不好更改,因此,我们可以自定义滚动条,接下来就从一个实例开始进入滚动条。 简易进度条 首先要实现的是上面的这种效果:当鼠标拖拽手柄前后移动时,滚动条的填充色和右侧的百分比随之一起变化。 为了实现上面效果 阅读全文
posted @ 2018-09-08 10:20 紅葉 阅读(437) 评论(0) 推荐(0) 编辑
  2018年9月4日
摘要: 本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置。 首先,我们需要简单的结构处理图片,为了方便操作,引用了一个js库:underscore.js,因为图片的数量是不固定的,这里我们采用动态添加的方式生成li,再在li 阅读全文
posted @ 2018-09-04 21:44 紅葉 阅读(7923) 评论(0) 推荐(2) 编辑
摘要: 本次主要是来实现上面的星空效果:在黑色的背景下面,有大小不一的星星在闪烁,当鼠标悬浮时,星星放大并旋转。 首先,我们需要一个大的夜空容器和放星星的容器: 此时在大背景下有一颗星星,但该星星是固定的,我们需要通过css添加闪烁的效果: 目标是在不同的地方显示随机大小的星星,所以,我们需要做以下几步操作 阅读全文
posted @ 2018-09-04 21:14 紅葉 阅读(8641) 评论(0) 推荐(0) 编辑
摘要: 继续 阅读全文
posted @ 2018-09-04 19:44 紅葉 阅读(181) 评论(0) 推荐(0) 编辑
  2018年9月1日
摘要: 在JavaScript中,定时器有两个方法,分别是setInterval()和setTimeOut(),下面分别介绍着两个方法。 setInterval() setInterval()是指按照指定的周期(以毫秒数计)来调用函数或计算表达式。方法会不停地调用函数直到clearInterval()被调用 阅读全文
posted @ 2018-09-01 14:00 紅葉 阅读(426) 评论(0) 推荐(0) 编辑
摘要: 前面总结了很多了有关于图片操作的案例,本次是基于前面的基础,做一个综合的图片轮播效果,需要实现以下功能: 没有任何操作时,图片自动轮播 鼠标悬浮时,图片停止轮播;当鼠标移开,轮播继续 鼠标悬浮时,出现左右切换按钮,可点击按钮进行左右切换 点击地下的小按钮进行切换 为了实现上面的效果,我们需要有个大盒 阅读全文
posted @ 2018-09-01 11:07 紅葉 阅读(689) 评论(0) 推荐(0) 编辑
  2018年8月29日
摘要: 上一篇写的关于放大镜的,可能在实际开发中用的不是很多,接下来将的图片无缝滚动在实际工作中就是用的比较多的了。 如上图,通过定时器控制图片无缝滚动,当鼠标悬浮时停止滚动,鼠标离开,滚动继续。 主要原理是通过定位实现图片的移动,然后通过定时器实现滚动的效果,即无缝滚动。 首先是基础的结构 有了基本结构后 阅读全文
posted @ 2018-08-29 21:28 紅葉 阅读(247) 评论(0) 推荐(0) 编辑
摘要: 本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示: 其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们称为放大镜,右边也是一个div,我们称为右窗口,在右窗口中有一个大图,要实现放大效果,就需要保证原图 阅读全文
posted @ 2018-08-29 20:43 紅葉 阅读(240) 评论(0) 推荐(0) 编辑
上一页 1 ··· 16 17 18 19 20 21 22 23 24 ··· 27 下一页