在编写前端代码的时候经常会因为网页添加什么动态效果而发愁,现在给你一些经典的案例,可以到时候参考一下的。
- 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标签,删除大的图片。