- 博客(8)
- 收藏
- 关注
RSS订阅原创 JQ------百叶窗
每个图片在mouseenter之后都会去固定的位置：比mousenter时的图片位置大的：------>右移动比mousenter时的图片位置小的：<------左移动html：<div class="shutter"> <ul> <li class="no0"> <a href="">
2018-04-01 15:03:02
276
原创 轮播------异形轮播
异行轮播的原理：位置的变化，更新下标。1:读取每一个图片的位置，放在一个JSON数组里，并且把类数组lis转换成数组。2:按钮控制当前图片们运动到前一位还是后一位，即让当前图片们的JSON样式变为前一位或者后一位的JSON样式。3:让无法参与规律移动的，进行瞬移（如让A瞬间移动到G的后面）。4:更改下标。ps:采用的轮子：fetchComputedStyle计算样式与动画animatehtml：为...
2018-04-01 12:05:23
2233
2
原创 轮播------位置轮播
位置轮播法: 只有三个位置供图片来回切换。其他的由于绝对定位被遮挡住了。类似于上图，图片在1,2进行交换，在显示区域显示。原理：<---右拉步骤：老图拉到2，再把新图拉到1等待显示，新图再拉到显示区域。--->左拉步骤： 老图拉到1，再把新图拉到2等待，新图再拉到显示区域。底部小圆点监听时：需要判断点击的圆点位置在当前图片的左边还是右边。如果在左边就实现右拉的步骤，如果在右边就实现左拉...
2018-03-31 16:39:23
411
原创 轮播-----呼吸轮播
原理：opacity的动态变化，老图片淡出，新图片淡入注意：1:所有的img初始状态都为绝对定位，display:none(防止图片链接网址出错)，opacity:0,只有含有cur类的img的display:block，opacity:1. 2:注意截流（防止用户狂点） 3:使用了运动框架animate.jshtml：<div class="carrou...
2018-03-31 15:28:36
255
原创 轮播----无缝滚动轮播
目标效果：1：图片自动的滚动图片，依次显示。2：鼠标悬停图片上能暂停滚动，离开继续滚动。原理：绝对定位了的元素可以运动（不占用标准流）。利用setInterval()定时器，让整个运动区域每一段时间调用函数，往左（或右，上，下）移动一段距离，让图片动起来。注意：运动区域一定要比显示区域大。好比：排队的人群，一个个的在窗口照相，依次显示; 记得要隐藏溢出的区域。css代码：.ca...
2018-03-23 20:25:57
289
2
原创 轮播-----一般轮播
轮播：1：除了带有current类选择器的li，其余的display都为none;2：当触发监听事件，把current样式给信号量所在的li<style type="text/css"> *{ margin: 0; padding: 0; } .carrousel{ width: 750px;/*显示区域*/ height: 500px; m...
2018-03-22 20:18:53
221
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人