Home >Web Front-end >JS Tutorial >How to achieve focus map effect using js
The editor below will share with you an example of a simple focus map effect implemented in native js. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.
Use some packaged motion functions, mainly timers.
The effect is to automatically change pictures and picture descriptions at regular intervals.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul,
li,
p,
h3 {
padding: 0;
margin: 0;
list-style: none;
}
img {
border: none;
vertical-align: top;
}
#bg_box {
width: 1000px;
height: 590px;
margin: 50px auto;
position: relative;
background: url(img/bg1.jpg) no-repeat;
}
.pic {
width: 440px;
height: 274px;
position: absolute;
top: 50px;
left: 220px;
overflow: hidden;
}
.li_box {
width: 1760px;
height: 274px;
position: absolute;
left: 0;
}
.tags {
width: 440px;
height: 80px;
position: absolute;
bottom: -80px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
color: white;
padding-left: 20px;
padding-top: 15px;
box-sizing: border-box;
}
.tags:nth-of-type(1) {
/*bottom: 0;*/
}
.img {
float: left;
width: 440px;
height: 274px;
}
h3 {
font: bold 20px/30px "微软雅黑";
}
p {
font: 16px/30px "微软雅黑";
}
</style>
<script src="tween.js"></script>
<script src="commom.js"></script>
<script type="text/javascript">
window.onload = function() {
//获取元素
var liBbox = $('ul')[0];
var li = $('li');
var tags = $('.tags')
var num = 0; //设置初始位置
Change()
function Change() {
var M = tags[num];
MTween(M, 'bottom', 0, 500, 'px', 'linear', function() { //先让描述内容出现
num++
if(num > li.length - 1) { //边界设置。
return;
}
setTimeout(function() {
MTween(M, 'bottom', -80, 500, 'px', 'linear', function() { //让描述内容不显示
MTween(liBbox, 'left', -num * 440, 800, 'px', 'linear', function() {
Change();
}); //切换图片
});
}, 1000)
});
}
}
</script>
</head>
<body>
<section id="bg_box">
<p class="pic">
<ul class="li_box">
<li>
<img class="img" src="img/a5.gif">
</li>
<li>
<img class="img" src="img/a6.gif">
</li>
<li>
<img class="img" src="img/a7.gif">
</li>
<li>
<img class="img" src="img/a8.gif">
</li>
</ul>
<p class="tags">
<h3 class="title">下雨了~~~</h3>
<p class="tag">这是一个适合在家睡觉的日子!!</p>
</p>
<p class="tags">
<h3 class="title">包饺子~~~</h3>
<p class="tag">一只会居家过日子的小狐狸！！</p>
</p>
<p class="tags">
<h3 class="title">生气了~~~</h3>
<p class="tag">吃掉好吃的就不生气了！！</p>
</p>
<p class="tags">
<h3 class="title">出发了~~~</h3>
<p class="tag">来一段说走就走的旅行!!</p>
</p>
</p>
</section>
</body>
</html>commom.js
function MTween(obj,attr,end,duration,unit,way,callBack){
if(obj.isAnim) return;
//obj开始运动了 自定义属性
obj.isAnim = true;
if(!way){ //如果用户没有选择运动方式就默认匀速
way = 'linear';
}
if(!unit){ //如果用户没有选择运动方式就默认匀速
unit = '';
}
var start = parseFloat(getStyle(obj,attr));//起始位置
// var end = 1000;//目标点
// var duration = 1000;//动画执行的总时间 单位是毫秒
var startTime = Date.now();
var s = end - start; //总路程
// var v = s/duration; //计算出来的速度
//每次20ms走一帧
clearInterval(timer);
var timer = 0;
timer = setInterval(function(){
var endTime = Date.now();
//计算出当前时间
var t = endTime-startTime;
if(t>=duration){
t = duration;
clearInterval(timer);//到达目标点要清除定时器
}
// obj.style[attr] = t*s/duration+start+'px';
// console.log(Tween[way](t,start,s,duration))
obj.style[attr] = Tween[way](t,start,s,duration)+unit;
//透明度的兼容处理
if(attr=='opacity'){
obj.style.filter = 'Alpha(opacity='+Tween[way](t,start,s,duration)*100+')';
}
if(t==duration){
obj.isAnim = false;
//等到上一个动画完成 然后再调用
if(callBack){
callBack();
}
}
},20);
}tween.js
/*
* t : time 已过时间 当前时间-初始时间
* b : begin 起始值
* c : count 总的运动值 总路程
* d : duration 持续时间 总时间
*
* s = vt; => c = t*c/d 这里只计算总共要运动的路程 ，不包括起始位置
*
* attrVal = t*c/d + b;
*
* 曲线方程
*
* */
//Tween.linear();
var Tween = {
linear: function (t, b, c, d){ //匀速
return c*t/d + b;
},
easeIn: function(t, b, c, d){ //加速曲线
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){ //减速曲线
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){ //加速减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){ //加加速曲线
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){ //减减速曲线
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){ //加加速减减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入）
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p/4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut: function(t, b, c, d, a, p){ //*正弦增强曲线（弹动渐出）
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){ //回退加速（回退渐入）
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 3.70158; //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出）
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){//*
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
}The above is what I compiled for you. I hope it will be helpful to everyone in the future.
Related articles:
Detailed introduction to the proxy mode (Proxy) in ES6
Detailed introduction to building webpack
How to implement file packaging using webpack
Using webpack to build vue scaffolding
How to implement calendar using Vue components (details Tutorial)
The above is the detailed content of How to achieve focus map effect using js. For more information, please follow other related articles on the PHP Chinese website!