参考代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
select-point{
width: 20px;
height: 20px;
border-radius: 50px;
border: 1px solid white;
position: relative;
top:39px;
left: 97px;
transition: all 1s;
}
point
{
width: 15px;
height: 15px;
background-color: white;
border-radius: 10px;
position: relative;
top: 0px;
margin-left: 100px;
float: left;
z-index: 99;
}
point-text{
color: white;
position: relative;
top: -5px;
margin-left: 90px;
float: left;
}
point-text-under{
color: white;
position: relative;
top: -17px;
margin-left: 205px;
float: left;
}
</style>
</head>
<body>
<div style="width: 1000px;height: 400px;margin:100px auto;background-color: gray;text-align: center;">
<div style="width: 1000px;height: 300px;">
<div style="width: 350px;height: 100%;float: left;text-align: right;">
<span onclick="change('last')" style="margin-top: 120px;display: block;margin-right: 10px;font-size: 50px;color: white;cursor: pointer;">《</span>
</div>
<div style="width: 300px;height: 200px;border: 1px solid white;text-align: center;display: inline-block;float: left;margin-top: 50px;">
<p id="text" style="margin: auto;color: white;">2008</p>
</div>
<div style="width: 340px;height: 100%;float: left;text-align: left;">
<span onclick="change('next')" style="margin-top: 120px;display: block;margin-left: 10px;font-size: 50px;color: white;cursor: pointer;">》</span>
</div>
</div>
<div style="width: 100%;height: 50px;text-align: left;">
<div class="select-point"></div>
<div class="point-text">2007</div>
<div class="point-text" style="margin-left: 191px;">2008</div>
<div class="point-text" style="margin-left: 192px;">2010</div>
<div class="point-text" style="margin-left: 193px;">2012</div>
<br>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div><br>
<hr style="position: relative;top: -22px;left: 0px;">
<div class="point-text-under">2009</div>
<div class="point-text-under" style="margin-left: 190px;">2011</div>
<div class="point-text-under" style="margin-left: 190px;">2013</div>
<div class="point-text-under" style="margin-left: 195px;">2015</div>
</div>
</div>
<script>
var sp = documentgetElementsByClassName("select-point")[0];
var text = documentgetElementById("text");
var selected=0;
var info = [
{id:0,left:'97px',text:'2008'},
{id:1,left:'212px',text:'2009'},
{id:2,left:'327px',text:'2010'},
{id:3,left:'442px',text:'2011'},
{id:4,left:'556px',text:'2012'},
{id:5,left:'671px',text:'2013'},
{id:6,left:'786px',text:'2014'},
{id:7,left:'902px',text:'2015'},
{id:8,left:'997px'},
];
function change(e) {
if(e == 'next')
{
selected = selected + 1;
if(selected==8) {
selected=0;
}
}else {
selected = selected - 1;
if(selected==-1) {
selected=7;
}
}
spstyleleft = info[selected]left;
textinnerText = info[selected]text;
}
</script>
</body>
</html>
效果：
一来加载得时候：
点击右箭头：
动画完之后：
注意：
代码仅供参考，提供思路，在不同设备上效果可能不同。
由于功能的缘故，其实抖音里面的很多特效作品都是其他APP制作出来的，love手势图也不例外，是由Faceu激萌APP制作出来的，大家需要先下载这款软件。
打开软件进入视频拍摄界面之后，点击左下角的按钮唤起特效设置列表，从玩趣分类下选择321特效，然后点击右侧的第二个按钮，我们就可以制作love手势图了
简单地说明一下
有一个隐藏的DIV列表块（当然不一定是div,其它的也可以）
给这个div起一个名字，例如“ddd”代码如下
下面代码可以原封不动的拷贝另存为htm格式文件测试效果
<div id="ddd" style="width:300px;height:200px;border:solid 1px #000";position:absolute;display:none;>这是一个隐藏的div块
,点击页面空白处隐藏或显示该块。
</div>
<script>
var show=false;
documentbodyonmouseup=function(){
if(show==false){
documentgetElementById('ddd')styledisplay="block";
show=true;
}else if(show==true){
documentgetElementById('ddd')styledisplay="none";
show=false;
}
}
</script>
欢迎分享，转载请注明来源：表白网
微信扫一扫
支付宝扫一扫
评论列表（0条）