alm1968-CSDN博客

转载 canvas图像处理实现马赛克效果

　　马赛克是我们经常在视频中会见到的，本例通过canvas访问图像像素值并且更改使之呈现成马赛克效果，用以遮挡不想让大家看到的地方（因为是对图像的处理，本地无法看到效果，需要把实例上传到服务器上（本地服务器也可以））。效果对比图：　　本例就是利用canvas处理图像像素，获取当前像素的具体位置，然后做一定的处理，看一下代码吧，里面有详尽的注释！View Code ...

2012-08-29 21:24:00 564

转载 css3-transition完美制作手风琴效果

　　在css3出现之前手风琴的效果一般都是通过js或者jquery写，无论是哪种方法，都比较繁琐，css3的过渡:transition既简单又完美的实现了这一效果！　　　　　demo图:　　关于css3transition这一属性的详解网上有很多，不了解的童鞋可以搜一下~这个效果是通过hover来改变图片在鼠标进入和进出时的显示范围，比较繁琐的一项工作是计算放大一张图片时其他图片...

2012-08-09 21:10:00 241

转载 canvas随机圆周运动（面向对象）

　　最近用canvas做了一个很有立体效果的demo，拿出来跟大家分享一下！先看一下效果图动态效果就是很多随机圆围绕自己的半径做圆周运动，一种很立体的感觉。【效果要点】1.js面向对象的方法构建这些圆模型2.构建帧模型，让这些圆自己画到画布上并且运动3.圆周运动的算法4.创建圆实例和帧实例接下来逐一分析1.画圆的方面想必大家已经很熟悉了，我们创建一个通用的函数...

2012-08-08 21:15:00 230

转载 js实现展开关闭效果

效果图呈上：一开始我是用display:block和none实现的，后来发现不实用，因为用这种方法需要单独把需要展开的那部分放到一个标签里，然后对这个标签进行显示隐藏操作，这样的特别不利于维护和输入，综合对比下采用了overflow:hidden和visible的方法实现的。有了思路，写起来就很简单了，“展开”、“关闭”2个字要始终显示在所有可见区域的下方，这是一个...

2012-08-08 16:58:00 304

转载 js实现的图片滚动兼展示效果的特效

截一个效果图：看到这个需求图，先理一下思路：首先左侧是一个展示区，我可以用一个单独的div来存放，右侧是一个图片滚动区，我用table来存放这些图片（当然div也可以），进而实现图片的滚动，也就是大图滚动，相信大家已经轻车熟路了，然后把需求分步列一下，逐步实现。整理几个关键点：1.右侧图片滚动以2个tr为一组，我是用tween算法实现滚动的，c=ind*(...

2012-08-08 16:53:00 175

转载 IE的relative失效的问题解决办法

　　我要实现的效果是：首先，是一堆图片滚动的效果，其次呢，是我把鼠标放到图片上时需要图片上显示一个透明层，我把显示区域的div叫做out,里面嵌套一个长度很大的div叫做outer1(用于存放一直滚动的图片)，我把每个图片都用1个div包起来（因为要设置透明层），每个存放图片的div里面分别再放一个空的span标签用于设置透明层，这时候呢，我把每个存放图片的div设置定位为relativ...

2012-08-08 16:48:00 205

转载用乒乓球碰壁反弹原理做的小鸟效果

　　本文所说的乒乓球碰壁反弹原理即使把乒乓球的运动分别分成在X轴和Y轴2个方向的运动，控制2个方向的值增减来调整乒乓球的运动，以此使乒乓球在所规划的区域内来回运动（需要注意的是当乒乓球碰到边界的时候需要将X轴方向的值增（减）转变为减（增），当球到达原点时需要重新进行循环），我只是将乒乓球换做了小鸟，然后当小鸟到达边界的时候将小鸟图片更换成反方向的小鸟图（只更换X轴运动上的图片即可），从而...

2012-08-08 16:47:00 284

转载用scrollTop实现让一个div始终显示在页面的某个地方

　　首先我要实现的效果是：不管浏览器的滚动条如何滚动，div始终在页面的某个位置不随滚动条的滚动而改变，这里只使用浏览器的Y轴滚动条。要实现这个效果思路其实很简单，首先我要确定浏览器在静态时div在页面的位置（即页面距离浏览器窗口的顶部距离theTop），然后随着滚动条的滚动，我需要随时获取滚动值scrollTop，将两者相加，就可以实现想要的效果。CSS部分：...

2012-08-08 16:42:00 252

转载用a伪类的后代标签实现鼠标放到图片上产生背景颜色变化

这几天一直在做项目，碰到网站上很多见的鼠标放到图片上产生背景颜色变化的效果，因为还没有学JS，就用CSS实现了这种效果，总结了2种方法，拿出来跟大家分享一哈！效果图：　　可以明显看到这几张图片是放到一个透明的背景上的，图片上也被蒙了一个透明图层，把鼠标放到图片上的时候图片上面的那个图层为完全透明。第一种方法：可以把这个透明背景截图下来，用PS把上面的图片刷掉，直接把...

2012-08-08 16:37:00 424

alm1968的博客