摘要： 在JavaScript中，常用offset、scroll和client家族属性来表示元素的位置和大小相关属性，最近在网上找到了一张图来表示三者之间的关系，正好可以在此借鉴一下。 本次主要来看一下offset家族，包括offsetWidth、offsetHeight、offsetLeft和offset 阅读全文

摘要： 在前面一篇说的是滚动条效果，本篇继续在前面的基础上面针对滚动条进行操作。本次要实现的效果如下：拖动滚动条左右移动时，上面的图片内容也相对外层盒子做相对移动。 下面针对要实现的效果进行分析：首先是页面基础结构，要实现内容的相对移动，里面的内容需要针对外层盒子相对定位，宽度应该大于外层盒子，而且外层盒子 阅读全文

摘要： 滚动条在前端页面中是进行见到的，但是在不同的浏览器中，默认的滚动条样式不同，有些浏览器的默认样式也不好更改，因此，我们可以自定义滚动条，接下来就从一个实例开始进入滚动条。 简易进度条 首先要实现的是上面的这种效果：当鼠标拖拽手柄前后移动时，滚动条的填充色和右侧的百分比随之一起变化。 为了实现上面效果 阅读全文

摘要： 本次要实现的是一个照片墙的效果，如下图，很多图片随机的摆放在窗口中，当点击到某一张的时候，该张图片出现出现在窗口的水平垂直居中的位置。 首先，我们需要简单的结构处理图片，为了方便操作，引用了一个js库：underscore.js，因为图片的数量是不固定的，这里我们采用动态添加的方式生成li，再在li 阅读全文

摘要： 本次主要是来实现上面的星空效果：在黑色的背景下面，有大小不一的星星在闪烁，当鼠标悬浮时，星星放大并旋转。 首先，我们需要一个大的夜空容器和放星星的容器： 此时在大背景下有一颗星星，但该星星是固定的，我们需要通过css添加闪烁的效果： 目标是在不同的地方显示随机大小的星星，所以，我们需要做以下几步操作 阅读全文

摘要： 继续 阅读全文

摘要： 在JavaScript中，定时器有两个方法，分别是setInterval()和setTimeOut()，下面分别介绍着两个方法。 setInterval() setInterval()是指按照指定的周期（以毫秒数计）来调用函数或计算表达式。方法会不停地调用函数直到clearInterval()被调用 阅读全文

摘要： 前面总结了很多了有关于图片操作的案例，本次是基于前面的基础，做一个综合的图片轮播效果，需要实现以下功能： 没有任何操作时，图片自动轮播 鼠标悬浮时，图片停止轮播；当鼠标移开，轮播继续 鼠标悬浮时，出现左右切换按钮，可点击按钮进行左右切换 点击地下的小按钮进行切换 为了实现上面的效果，我们需要有个大盒 阅读全文

摘要： 上一篇写的关于放大镜的，可能在实际开发中用的不是很多，接下来将的图片无缝滚动在实际工作中就是用的比较多的了。 如上图，通过定时器控制图片无缝滚动，当鼠标悬浮时停止滚动，鼠标离开，滚动继续。 主要原理是通过定位实现图片的移动，然后通过定时器实现滚动的效果，即无缝滚动。 首先是基础的结构 有了基本结构后 阅读全文

摘要： 本次的图片操作是要实现模仿天猫淘宝的放大镜效果，如下图所示： 其实现原理其实很简单，主要就是定位的运用，在上面的图中，左边是一个div，它的大小就是左边图片的大小，我们称为左窗口（原图），红色部分我们称为放大镜，右边也是一个div，我们称为右窗口，在右窗口中有一个大图，要实现放大效果，就需要保证原图 阅读全文