html异形轮播,异形滚动
异形滚动效果图.gif
1、原理的揭示
前言：图片大小处理问题的解决，当我们只改变盒子大小，图片会溢出，无法充满这个盒子。设置图片的宽高为 100%
异形滚动
.box {
width: 100px;
height: 100px;
}
img { //让图片充满整个盒子
width: 100%;
height: 100%;
}
从最低层的背景图开始解析。五个显示的图，两个隐藏的图。一个七个基本图样。
背景图
思路：
放置背景图片(li 绝对定位，再用图片填充)
点击时改变动画的 JSON
异形滚动
*{
margin: 0;
padding: 0;
}
.yixing{
width: 670px;
height: 221px;
background: url(images/pic_bg.gif);
margin: 100px auto;
border: 1px solid #000;
position: relative;
}
.yixing ul{
list-style: none;
}
.yixing ul li{
position: absolute;
}
/*img这个元素不会根据父亲来设置宽度、高度，所以我们就要写：*/
.yixing ul li img{
width: 100%;
height: 100%;
}
.yixing ul li.stateA{width: 55px;height: 37px;left:-55px;top: 84px;}
.yixing ul li.stateB{width: 71px;height: 54px;left:16px;top: 67px;}
.yixing ul li.stateC{width: 122px;height: 86px;left:104px;top: 35px;}
.yixing ul li.stateD{width: 161px;height: 112px;left:247px;top: 16px;}
.yixing ul li.stateE{width: 122px;height: 86px;left:436px;top: 35px;}
.yixing ul li.stateF{width: 71px;height: 54px;left:583px;top: 67px;}
.yixing ul li.stateG{width: 55px;height: 37px;left:678px;top: 84px;}
.rightBtn{
position: absolute;
top: 151px;
right: 20px;
width: 40px;
height: 40px;
background-color: red;
}
var lis = document.getElementsByTagName("li");
var rightBtn = document.getElementById("rightBtn");
var JSONC = {"width": 122,"height": 86,"left":104,"top": 35};
var JSOND = {"width": 161,"height": 112,"left":247,"top": 16};
//理论上我们可以不厌其烦写JSONA、JSONB
rightBtn.onclick = function(){
//理论上我们可以不厌其烦写
animate(lis[3],JSONC,1000,"BounceEaseOut");
animate(lis[4],JSOND,1000,"BounceEaseOut");
}
2、JSON的优化
获取 targetJSON 使用数组接受 JSON放进数组。
var JSONarr = [];
//把所有的状态都推入数组：
for(var i = 0 ; i < lis.length ; i++){
JSONarr.push({
"width" : parseInt(fetchComputedStyle(lis[i],"width")),
"height" : parseInt(fetchComputedStyle(lis[i],"height")),
"left" : parseInt(fetchComputedStyle(lis[i],"left")),
"top" : parseInt(fetchComputedStyle(lis[i],"top"))
});
}
console.log(JSONarr);
右按钮的监听使用 for 进行优化，防止手写。
//右按钮的监听
rightBtn.onclick = function(){
//让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态
for(var i = 1 ; i <= 6 ; i++){
animate(lis[i],JSONarr[i - 1],600,"BounceEaseOut");
}
}
3、增加二次点击效果
这里是个难点今天，学了半天就是想不明白为什么不二次轮播，下午去吃了个饭，再仔细想想终于明白是怎么回事了。
以右击按钮为例，当我们点击的时候，图片依据 动画 左移。这里只是借助了动画改变了 li 的位置，li 盒子的编号依然没变，所以当我们再次点击盒子只是变到本身现在所处位置。我错就错在盒子转移到另一个盒子，认为他的盒子编号也随之发生改变。
想明白这点，我们就可以在动画完成后，改变盒子编号。这样下次的点击效果就会生效。又因为我们得到的 li 是一个类数组对象不能通过pop等进行操作。先把它放进一个数组里。
var liArray = []; //存放每个li的数组 新增1
var JSONarr = [];
//把所有的状态都推入数组：
for(var i = 0 ; i < lis.length ; i++){
JSONarr.push({
"width" : parseInt(fetchComputedStyle(lis[i],"width")),
"height" : parseInt(fetchComputedStyle(lis[i],"height")),
"left" : parseInt(fetchComputedStyle(lis[i],"left")),
"top" : parseInt(fetchComputedStyle(lis[i],"top")),
"opacity" : parseInt(fetchComputedStyle(lis[i],"opacity"))
});
//liArray就和lis是一样的结构，lis是类数组对象，而liArray是数组 新增2
liArray.push(lis[i]);
}
//右按钮的监听
rightBtn.onclick = function(){
//让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态
for(var i = 1 ; i <= 6 ; i++){
animate(liArray[i],JSONarr[i - 1],600,"BounceEaseOut");
}
//让0号元素瞬移
for(var k in JSONarr[6]){
liArray[0].style[k] = JSONarr[6][k] + "px";
}
//交换身份！！新增3
liArray.push(liArray.shift());
}
4、设置节流，自动轮播，和opacity
设置 opacity 主要是兼容左右轮播时的淡入淡出。
函数节流，因为所有的 li 盒子都是动的，所以节流我们只需要随便设置一个盒子。
异形滚动
*{
margin: 0;
padding: 0;
}
.yixing{
width: 670px;
height: 221px;
background: url(images/pic_bg.gif);
margin: 100px auto;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
.yixing ul{
list-style: none;
}
.yixing ul li{
position: absolute;
opacity: 1;
filter:alpha(opacity=100);
}
/*img这个元素不会根据父亲来设置宽度、高度，所以我们就要写：*/
.yixing ul li img{
width: 100%;
height: 100%;
}
.yixing ul li.stateA{width: 55px;height: 37px;left:-55px;top: 84px; opacity: 0; filter:alpha(opacity=0);}
.yixing ul li.stateB{width: 71px;height: 54px;left:16px;top: 67px;}
.yixing ul li.stateC{width: 122px;height: 86px;left:104px;top: 35px;}
.yixing ul li.stateD{width: 161px;height: 112px;left:247px;top: 16px;}
.yixing ul li.stateE{width: 122px;height: 86px;left:436px;top: 35px;}
.yixing ul li.stateF{width: 71px;height: 54px;left:583px;top: 67px;}
.yixing ul li.stateG{width: 55px;height: 37px;left:678px;top: 84px; opacity: 0;filter:alpha(opacity=0);}
.rightBtn{
position: absolute;
top: 151px;
right: 20px;
width: 40px;
height: 40px;
background-color: red;
}
.leftBtn{
position: absolute;
top: 151px;
left: 20px;
width: 40px;
height: 40px;
background-color: red;
}
var yixing = document.getElementById("yixing");
var rightBtn = document.getElementById("rightBtn");
var leftBtn = document.getElementById("leftBtn");
var lis = document.getElementsByTagName("li");
//lis是类数组对象，getElementsByTagName得到的元素们是类数组对象，不是数组
//所以lis没有pop方法、没有unshift()方法！
var liArray = []; //存放每个li的数组
var JSONarr = [];
//把所有的状态都推入数组：
for(var i = 0 ; i < lis.length ; i++){
JSONarr.push({
"width" : parseInt(fetchComputedStyle(lis[i],"width")),
"height" : parseInt(fetchComputedStyle(lis[i],"height")),
"left" : parseInt(fetchComputedStyle(lis[i],"left")),
"top" : parseInt(fetchComputedStyle(lis[i],"top")),
"opacity" : parseInt(fetchComputedStyle(lis[i],"opacity"))
});
//liArray就和lis是一样的结构，lis是类数组对象，而liArray是数组
liArray.push(lis[i]);
}
//console.log(JSONarr);
//右按钮的监听
rightBtn.onclick = rightBtnHandler;
var timer = setInterval(rightBtnHandler,2000);
yixing.onmouseover = function(){clearInterval(timer);};
yixing.onmouseout = function(){timer = setInterval(rightBtnHandler,2000);};
function rightBtnHandler(){
//节流
if(liArray[1].isanimated) return;
//让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态
for(var i = 1 ; i <= 6 ; i++){
animate(liArray[i],JSONarr[i - 1],600,"BounceEaseOut");
}
//让0号元素瞬移
for(var k in JSONarr[6]){
liArray[0].style[k] = JSONarr[6][k] + "px";
}
//交换身份！！
liArray.push(liArray.shift());
}
//左按钮的监听
leftBtn.onclick = function(){
//节流
if(liArray[1].isanimated) return;
for(var i = 0 ; i <= 5 ; i++){
animate(liArray[i],JSONarr[i + 1],600,"BounceEaseOut");
}
//让0号元素瞬移
for(var k in JSONarr[0]){
liArray[6].style[k] = JSONarr[0][k] + "px";
}
//交换身份！！
liArray.unshift(liArray.pop());
}
html异形轮播,异形滚动相关推荐
- jQuery实现异形轮播图
思路: 异形轮播图与普通轮播图不同的一点,是异形轮播图一次性展示多个图片,且图片大小的位置会动态变化. 以往我的处理办法都是直接给要展示的图片动态的添加一个class类, 简单粗暴.这次我在很多地方都 ...
- swiper轮播---异形轮播
swiper轮播-异形轮播 最近经常会碰到很多用swiper插件做各种各样轮播图的需求,没有做过3d异形轮播图,所以研究了一下,把经验给大家分享一下 上面图片就是轮播图所要达到的效果:焦点图片居中并向 ...
- jquery异形轮播
jquery异形轮播 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- 滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...
- JQuery实现图片轮播无缝滚动
图片轮播无缝滚动实例 实现效果展示预览: 思路: 1.设置当前索引curIndex,和前一张索引prevIndex.(curIndex为下一次要显示的图片索引,prevIndex为现在看见的图片) 2 ...
- iOS换一种思路写一个无限轮播的滚动视图
换一种思路写一个无限轮播的滚动视图 写这篇博客已经距离我当时写差不多有一个月时间了,也完善了很多,基本是没有bug的,如果有,不妨留言,喜欢的话,劳烦各位点个赞,不喜欢的,不妨看看思路,提提意见 1. ...
- SuperSlide轮播插件滚动高度或宽度不对的问题解决
声明:本文由w3h5原创,转载请注明出处:SuperSlide轮播插件滚动高度或宽度不对的问题解决 SuperSlide 是一款比较实用的轮播插件,网站上常用的"焦点图/幻灯片"& ...
- html异形轮播,javascript实现异形滚动轮播
本文实例为大家分享了js异形滚动轮播的具体代码,供大家参考,具体内容如下 运动过程研究 让每个元素走到前一个标签的位置. 3走到2 2走到1 1走到0 0走到6 利用js动态获取每个类名对应的css样 ...
- 前端vue异形轮播图案例(带源码)
目录 下载依赖 挂载依赖 源码 效果如下 最后 下载依赖 npm install vue-awesome-swiper --save 挂载依赖 全局挂载依赖main.js里面 import VueAw ...
最新文章
- python里的类与一切事物都是对象
- mdcsoft服务器网络安全解决方案-SQL注入解决
- 设计模式C++实现（2）——策略模式
- 3.通过现有的PDB创建一个新的PDB
- oracle配置的监听文件,配置oracle监听文件
- spring javafx_带有Spring的JavaFX 2
- 今天起，我们喝的百年牛奶要变了！
- java调用qq接口_用java代码怎么去请求腾讯接口并返回值
- nginx 负载均衡+keepalived实现双机热备
- CCCC-GPLT L1-040. 最佳情侣身高差 团体程序设计天梯赛
- 历史上的今天：乔布斯辞去苹果CEO一职；Windows 95 发布
- 老虎证券爬取港股（对小米股价的实时显示和报警）
- 数字孪生-第二章、数字孪生技术
- Axure RP 认识
- 360 os3.0 android7.1,360OS 3.0系统
- 高境三中计算机老师,立德树人奋进担当，教育脱贫托举希望——高境三中热烈庆祝第三十六个教师节...
- win10没有wifi列表，显示不出可用WiFi
- 群邑智库：2018年1-9月主要央卫视电视剧回顾
- [电影笔记]电影世界：接纳平凡的自己
- 天宇，snapseed，第四课，风光照片调整