html异形轮播,异形滚动

aabac5e37a98?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

异形滚动效果图.gif

1、原理的揭示

前言：图片大小处理问题的解决，当我们只改变盒子大小，图片会溢出，无法充满这个盒子。设置图片的宽高为 100%

异形滚动

.box {

width: 100px;

height: 100px;

}

img { //让图片充满整个盒子

width: 100%;

height: 100%;

}

从最低层的背景图开始解析。五个显示的图，两个隐藏的图。一个七个基本图样。

aabac5e37a98?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

背景图

思路：

放置背景图片(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());

}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/489418.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python如何判断列表是否为空_Python中如何检查字符串/列表是否为空

python如何判断列表是否为空_Python中如何检查字符串/列表是否为空

本文最后更新于2018年5月5日&#xff0c;已超过 1 年没有更新&#xff0c;如果文章内容失效&#xff0c;还请反馈给我&#xff0c;谢谢&#xff01; Start 缘由&#xff1a; 整理、记录、备忘 正文&#xff1a; 参考解答&#xff1a; 从dict中取值时&#xff0c;一定要使用.get…
阅读更多...
使用 jq 处理 json 文件的最佳实践

使用 jq 处理 json 文件的最佳实践

使用 jq 格式化 json 文本后再存入 json 文件&#xff0c;但不回显 json 内容 jq . << EOF > example.json [{"Classification": "hdfs-site","Properties": {"dfs.replication": "1"} }] EOF cat example.json使…
阅读更多...
oracle19c 安装权限_Oracle19c 安装及SQL developer连接

oracle19c 安装权限_Oracle19c 安装及SQL developer连接

因为偶然要用到Oracle数据库&#xff0c;而平常工作中用的都是mySQL的&#xff0c;所以电脑上安装的都是MySQL的相关服务&#xff0c;今天用到Oracle本地没有&#xff0c;所以自己安装了一个&#xff0c;但是因为不熟悉&#xff0c;安装遇到了很多的坑&#xff0c;因此记录一下…
阅读更多...
【周末阅读】工业互联网的发展历程及实现路径

【周末阅读】工业互联网的发展历程及实现路径

来源&#xff1a;青岛智能产业技术研究院【导读】目前&#xff0c;我国工业互联网发展迅猛&#xff0c;从国家层面、部委层面、地方层面都在积极推动&#xff0c;国际上对工业互联网发展也比较关注。我主要介绍工业互联网的三个方面内容&#xff1a;工业互联网的基本认识、国内…
阅读更多...
三菱fx5u编程手册_FX5U系列PLC控制伺服3种方式

三菱fx5u编程手册_FX5U系列PLC控制伺服3种方式

FX5U系列PLC为三菱目前最新的小型PLC&#xff0c;机身小巧却功能强大&#xff0c;不仅保留了三菱小型PLC已有的优点&#xff0c;还吸收了大型PLC的开发理念&#xff0c;在整体性能上得到了很大的提高。本文以FX5U在控制伺服的性能上做个总结&#xff0c;归纳下FX5U控制伺服的3种…
阅读更多...
[转人工智能工程师学习路线及具备的5项基本技能

[转人工智能工程师学习路线及具备的5项基本技能

原文地址&#xff1a;http://blog.csdn.net/BaiHuaXiu123/article/details/52478853 摘要 学习路线 你是否对机器学习充满兴趣呢?其实到目前为止&#xff0c;每天有越来越多的工程师开始将好奇的目光转向机器学习领域。实际上&#xff0c;你会发现现在没有哪一个领域比机器学习…
阅读更多...
mesh渲染到ui_在Unity中使用UGUI修改Mesh绘制几何图形

mesh渲染到ui_在Unity中使用UGUI修改Mesh绘制几何图形

Used by Text, Image, and RawImage for example to generate vertices specific to their use case.说的是当该控件(例如Text,Image,RawImage)需要改变顶点的时候&#xff0c;就会自动调用。在传入的vh参数里修改顶点&#xff0c;三角形&#xff0c;UV等&#xff0c;同样可以达…
阅读更多...
python牛顿迭代公式_python计算牛顿迭代多项式实例分析

python牛顿迭代公式_python计算牛顿迭代多项式实例分析

本文实例讲述了python计算牛顿迭代多项式的方法。分享给大家供大家参考。具体实现方法如下&#xff1a;p evalPoly(a,xData,x). Evaluates Newtons polynomial p at x. The coefficient vector a can be computed by the function coeffts. a coeffts(xData,yData). Computes…
阅读更多...
“机器人迟钝一点，会更有人情味”，迪士尼提出新型人机交互系统

“机器人迟钝一点，会更有人情味”，迪士尼提出新型人机交互系统

来源&#xff1a;机器人大讲堂导读打篮球时&#xff0c;当球向你飞来&#xff0c;你总会下意识地或者说有意识地伸手去接住球。生活中&#xff0c;有人递给你一个东西时&#xff0c;你也会伸手去接住&#xff0c;礼貌或者仓促地。那么在如今拟人机器人越发“聪明”的时代&#…
阅读更多...
黑龙江对口学计算机上机,2009年黑龙江省职高对口升学计算机应用专业技能试卷十.doc...

黑龙江对口学计算机上机,2009年黑龙江省职高对口升学计算机应用专业技能试卷十.doc...

2009年黑龙江省职高对口升学计算机应用专业技能试卷十2009年黑龙江省职高对口升学计算机应用专业技能试卷十总分题号一二三四五核分人题分(本试卷满分150分&#xff0c;考试时间120分钟)一&#xff0e;填空题&#xff1a;(每空1分&#xff0c;共50分)1、Windows Xp中窗口排列方…
阅读更多...
Linux 应用程序 网络通讯函数记录

Linux 应用程序 网络通讯函数记录

创建一个套接口&#xff08;&#xff09;。#include <sys/socket.h>int socket( int af, int type, int protocol);af&#xff1a;一个地址描述。目前仅支持AF_INET格式&#xff0c;也就是说ARPA Internet地址格式。type&#xff1a;指定socket类型。新套接口的类型描述类…
阅读更多...
台式计算机固定资产属于哪类,电脑属于固定资产的哪一类

台式计算机固定资产属于哪类,电脑属于固定资产的哪一类

台式计算机属于固定资产分类中的电子设备范畴。固定资产是指企业为生产产品、提供劳务、出租或者经营管理而持有的超过12个月并达到一定价值标准的非货币性资产&#xff0c;包括房屋、建筑物、机器、机械、交通工具和其他设备&#xff0c;与生产经营活动有关的器具、工具。固定…
阅读更多...
华为十大发明

华为十大发明

来源&#xff1a;蓝海长青智库时代的车轮滚滚向前&#xff0c;推动时代前进的离不开那些改变人们生活的发明。就像爱迪生发明电灯&#xff0c;每一个时代都有一些创新的技术足以载入史册。这些技术或许在发明初期还不足以让人感受到它的价值&#xff0c;但是随着时代的进步&…
阅读更多...
python利用自动识别写模块_教你用Python 实现自动导入缺失的库

python利用自动识别写模块_教你用Python 实现自动导入缺失的库

在写 Python 项目的时候&#xff0c;我们可能经常会遇到导入模块失败的错误&#xff1a;ImportError: No module named ‘xxx’ 或者 ModuleNotFoundError: No module named ‘xxx’ 。 导入失败问题&#xff0c;通常分为两种&#xff1a;一种是导入自己写的模块&#xff08;即…
阅读更多...
基于类的命令行notebook的实现

基于类的命令行notebook的实现

在看一本书《PYTHON3 面向对象编程》 内容丰富&#xff0c;作作记录。 notebook.py __author__ chengang882import datetime# Store the next available id for all new note last_id 0class Note(object):"""Represent a note in the notebook. Match agains…
阅读更多...
python中用socket检测端口_python基于socket函数实现端口扫描

python中用socket检测端口_python基于socket函数实现端口扫描

本文实例为大家分享了python基于socket实现端口扫描的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下自学Python一段时间&#xff0c;写个端口扫描器练练手。有什么不足之处&#xff0c;请见谅这是基于socket函数对端口进行端口扫描所以&#xff0c;首先要导入socket…
阅读更多...
python批量保存网页为pdf_01_python爬取简书文章，输出为pdf（还是个坑）

python批量保存网页为pdf_01_python爬取简书文章，输出为pdf（还是个坑）

{content}
阅读更多...
php清理html table样式,Parse HTML Table - PHP [closed]

php清理html table样式,Parse HTML Table - PHP [closed]

问题Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.Want to improve this question? Update the question so its on-topic for Stack Overflow.Closed 6 years ago.I have an HTML table that I would like to par…
阅读更多...
2020年五大云计算预测

2020年五大云计算预测

来源&#xff1a;信息安全与通信保密杂志社Forrester的新报告发现&#xff0c;超大规模云联盟、云原生创新和新的云安全要求将在2020年重塑云计算行业格局。Forrester近日发布了一份报告&#xff0c;对2020年的云计算行业发布了五大预测。这些预测表明争夺云计算霸主地位的竞争…
阅读更多...
ResourceManager里面Trackingui需要手动该ip

ResourceManager里面Trackingui需要手动该ip

C:\Windows\System32\drivers\etc这个路径下配置了ip和主机名&#xff0c;不过是大小写&#xff0c;ping不同&#xff0c;不论ping大小写还是全部小写都不行&#xff0c;我看地址栏是小写所以想着把hosts里CentOSMaster改成centosmaster&#xff0c;然后还是不行&#xff0c;备…
阅读更多...
最新文章

Copyright @ 2022~2023