Javascript+CSS经典效果案例剖解
Javascript+CSS经典效果案例剖解
在编写前端代码的时候经常会因为网页添加什么动态效果而发愁，现在给你一些经典的案例，可以到时候参考一下的。
- CSS+js滚动图片功能：
涉及到的知识点：CSS: width height background-image以及其他一些样式属性，
Javascript:Event事件有：mouseover mouseout click image的load DOM:element.style element.scrollTop 以及 setInterval() clearInterval()等
需要定义的主要函数：iniautoSlide()用于设置自动播放，使用setInterval()循环执行autoSlide();autoSlide()用于根据条件判断执行slideUp()还是slideDown()，条件判断依据就是如果目前到了倒数第1个元素，那么设置下次执行需要反向执行。slideDown()主要用于循环执行scrollDown()以及为相关元素修改样式，scrollDown()通过当前元素的scrollTop与设置的图片显示高度frameheight的比较，如果srcollTop大于frameheight或其相关倍数，则srcollTo=frameheight*n,否则scrollTop+=speed,speed是元素移动。
CSS中的设置 图片的包含标签中设置overflow:hidden,width and height 有固定长度，position:relative,图片的设置 position:absolute;top为父元素倍数,width height与父元素相同；
expression(document.body.clientWidth > 200?"200px":"auto"
setTimeout(arguments.callee,1500)
CSS perspective
2. 图片放大技术（类似天猫）
涉及到的Javascript事件主要有mouseover mouseout mousemove CSS主要是position and style.
\
布局：加两个钩子 一个是float_layer表示的是浮动的框(固定宽高，绝对定位) 一个是mark作为图片的蒙版，透明度设为100%，mouse的行为主要发生在mark上。再加一个用来显示选择放大后图片的div,这个DIV最重要的一点是设置绝对定位以及overflow:hidden;
然后是JS部分：mouseover float-layer还有显示图片部分 display:block;
Mouseout,隐藏；mousemove:先获取float-layer的位置信息。使用公式：e.clientX-(父元素们的offsetLeft（body以下（不包括body））)-e.target.offsetWidth/2;//除以2是因为这样能确保在移动的时候，鼠标能处于被选区域的中心位置，这样就得到了float_layer的left值，但是需要有两个条件（left<0时需要取0，left>float.parentNode.offsetWidth-float.offsetWidth时需要取float.parentNode.offsetWidth-float.offsetWidth），所以l=Math.mix(Math.min(left, float.parentNode.offsetWidth-float.offsetWidth),0),同理得出来top.
使用top left显示float_layer,然后使用放大参数乘以top Left后显示放大后的图喜。
3. CSS3实现3D导航选转效果
涉及到的CSS3属性主要有transform transform-style perspective
Transition等
要导航的元素放在<li>标签中，设置<li>标签的样式为perspective:200px; position:relative;// perspective是设置3D元素的透视效果 ，设置position是为了给下边的元素绝对定位。在<li>标签中设置元素<span>NAV<span class=”font”>NAV</span><span class=”back”>NAV</span></span>,先给整个span元素一个绝对定位使在浏览器不支持transform时可以正常显示导航，然后设置transform:translateZ(-25px),transition:all .5s; transform-style:preserve-3d;//设置子元素保存3D位置,内缩25像素是为了选转时的美观效果；然后给front and back设置在X轴的旋转，.back{transform:rotateX(-90deg) translate(25px)}、、前提25px.
使用hover伪类触发动画 当<li>标签:hover 大的<span>标签选转{transform: translateZ(-25px) rotateX(90deg);}
另外：这添加动画属性之前，需要把样式布局完成之后
4，图片水平方向轮转 主要是涉及到 scrollLeft的不断增加。
5，拖动水晶球的小游戏（非Canvas）动画
分析：
1，首先要确定有多少个小球，这时候定义一个变量，并通过循环这个变量来创建小球。
2，每个小球都是一个独立的个体Object，所以需要有一个构造函数来创建这个小球；
3.小球需要一个背景图片，所以根据小球的位置判断选择src的属性是什么（如果头部图片与其他部位图片没有区别的话）。
4.创建小球的函数：小球的属性应该包括半径，位置X，Y，创建自身的img元素并添加在父元素中，使用O指向这个img元素，小球只是object对象，并不是元素，另外this.O.obj=this，添加这条语句是使img元素可以指回到object。
5.将创建好的小球添加在数组ball[]中。
这样，水晶列表就显示在html中了。
6，mousedown发生后，由于所有的小球对应的element都是通过js动态生成的，所以通过通过addEventListener()来检测事件，可以通过给创建的img元素添加class值来，然后验证e.target的classname是否在小球上发生了事件。
7，发生事件之后，要记录下鼠标这个时候在小球上的位置，使效果上使看着是鼠标再拖着小球走，记录下的是鼠标的位置与小球左上角的相对距离（分X，Y）.
8.然后就是mousemove事件了，首先做的就是更新小球的位置坐标，通过当前的鼠标位置和之前确定的相对位置来确定小球的定位。之后是链接函数以及防止球相交函数。
9，链接函数，这个需要执行两次，一次是正的，一次是反序的。需要传入两个相邻小球参数
6，图片分裂效果
主要是通过JS生成div标签，标签的定位为以0或50%定位，这样就能产生四个子元素，子元素中添加img标签，删除大的图片。
