2012年8月8日
摘要：
最近用canvas做了一个很有立体效果的demo，拿出来跟大家分享一下！先看一下效果图动态效果就是很多随机圆围绕自己的半径做圆周运动，一种很立体的感觉。【效果要点】1.js面向对象的方法构建这些圆模型2.构建帧模型，让这些圆自己画到画布上并且运动3.圆周运动的算法4.创建圆实例和帧实例接下来逐一分析1.画圆的方面想必大家已经很熟悉了，我们创建一个通用的函数表达式，把画圆的起始位置，半径，一些外观属性（颜色、透明度）放到这个中，让创建的随机圆都继承这些属性，另外需要把圆周运动的初始角度也放到这里面，便于添加圆运动方法的时候更改角度，从而使位置改变（当然你也可以创建任意的随机角度，让这些圆的运..
阅读全文
posted @ 2012-08-08 21:15
虾米攻城
阅读(2294)
推荐(2)
摘要：
效果图呈上： 一开始我是用display:block和none实现的，后来发现不实用，因为用这种方法需要单独把需要展开的那部分放到一个标签里，然后对这个标签进行显示隐藏操作，这样的特别不利于维护和输入，综合对比下采用了overflow:hidden和visible的方法实现的。有了思路，写起来就很简单了，“展开”、“关闭”2个字要始终显示在所有可见区域的下方，这是一个关键点，可以在未展开前设置一个区域高度，展开之后让区域高度变为auto,这样就可以轻松实现了，代码给大家参考一下：因为我做的是3个模块，所以用了一个for循环用于分别控制3个模块的展开和关闭。js代码View Code 1 (f.
阅读全文
posted @ 2012-08-08 16:58
虾米攻城
阅读(755)
推荐(0)
摘要：
截一个效果图： 看到这个需求图，先理一下思路：首先左侧是一个展示区，我可以用一个单独的div来存放，右侧是一个图片滚动区，我用table来存放这些图片（当然div也可以），进而实现图片的滚动，也就是大图滚动，相信大家已经轻车熟路了，然后把需求分步列一下，逐步实现。整理几个关键点：1.右侧图片滚动以2个tr为一组，我是用tween算法实现滚动的，c=ind*(2*hei)-b;//变化量c为2行tr的高度。2.数字变化那块，左侧的数字要从1开始变化，右侧的总数要获取图片的总长度3.左侧展示区的大图获取方法：在table小图的src后面再加一个大图的链接data-src,让展示区的图片跟data-
阅读全文
posted @ 2012-08-08 16:53
虾米攻城
阅读(537)
推荐(0)
摘要：
我要实现的效果是：首先，是一堆图片滚动的效果，其次呢，是我把鼠标放到图片上时需要图片上显示一个透明层，我把显示区域的div叫做out,里面嵌套一个长度很大的div叫做outer1(用于存放一直滚动的图片)，我把每个图片都用1个div包起来（因为要设置透明层），每个存放图片的div里面分别再放一个空的span标签用于设置透明层，这时候呢，我把每个存放图片的div设置定位为relative,每个span设置定位为absolute,然后再给span设置透明层什么的，这个大家都很清楚了...为了实现滚动效果呢，我需要给outer1设置overflow:hidden,这个时候问题就出现了，在ie中我..
阅读全文
posted @ 2012-08-08 16:48
虾米攻城
阅读(312)
推荐(0)
摘要：
本文所说的乒乓球碰壁反弹原理即使把乒乓球的运动分别分成在X轴和Y轴2个方向的运动，控制2个方向的值增减来调整乒乓球的运动，以此使乒乓球在所规划的区域内来回运动（需要注意的是当乒乓球碰到边界的时候需要将X轴方向的值增（减）转变为减（增），当球到达原点时需要重新进行循环），我只是将乒乓球换做了小鸟，然后当小鸟到达边界的时候将小鸟图片更换成反方向的小鸟图（只更换X轴运动上的图片即可），从而实现当小鸟到达边界的时候让小鸟实现掉头的效果，也算是投机取巧吧，呵呵~原理分析至此，截取效果图给大家看一下！看一下代码~View Code 1 <body > 2 /*设置2个按钮控制小鸟*/ 3 &l
阅读全文
posted @ 2012-08-08 16:47
虾米攻城
阅读(1108)
推荐(0)
摘要：
首先我要实现的效果是：不管浏览器的滚动条如何滚动，div始终在页面的某个位置不随滚动条的滚动而改变，这里只使用浏览器的Y轴滚动条。 要实现这个效果思路其实很简单，首先我要确定浏览器在静态时div在页面的位置（即页面距离浏览器窗口的顶部距离theTop），然后随着滚动条的滚动，我需要随时获取滚动值scrollTop，将两者相加，就可以实现想要的效果。CSS部分：View Code 1 #con{width:300px;height:100px;border:1px red solid;position:absolute;top:150px;}HTML部分：View Code 1 <body
阅读全文
posted @ 2012-08-08 16:42
虾米攻城
阅读(1814)
推荐(1)
摘要：
这几天一直在做项目，碰到网站上很多见的鼠标放到图片上产生背景颜色变化的效果，因为还没有学JS，就用CSS实现了这种效果，总结了2种方法，拿出来跟大家分享一哈！效果图： 可以明显看到这几张图片是放到一个透明的背景上的，图片上也被蒙了一个透明图层，把鼠标放到图片上的时候图片上面的那个图层为完全透明。第一种方法：可以把这个透明背景截图下来，用PS把上面的图片刷掉，直接把这个透明背景图层当成一个背景使用，然后使用a标签：将a标签设置成块属性，背景设置为图片，在a标签里面嵌套span标签，设置span的hover.代码如下：CSS部分：a{width:?;height:?; float:?;bac...
阅读全文
posted @ 2012-08-08 16:37
虾米攻城
阅读(1920)
推荐(0)
浙公网安备 33010602011771号