下面小编就为大家分享一篇原生js实现简单的焦点图效果实例,具有很好的参考价值,希望大家如果觉得本站发布的文章不错，请转发分享给您身边的朋友,您的支持是我们最大的动力.一起跟随小编过来看看吧
用到一些封装好的运动函数,主要是定时器
效果为图片和图片的描述定时自动更换.
ul,
li,
p,
padding: 0;
margin: 0;
list-style: none;
}
img {
border: none;
vertical-align: top;
#bg_box {
width: 1000px;
position: relative;
background: url(img/bg1.jpg) no-repeat;
.pic {
position: absolute;
overflow: hidden;
.li_box {
left: 0;
.tags {
color: white;
box-sizing: border-box;
.tags:nth-of-type(1) {
/*bottom: 0;*/
.img {
float: left;
p {
window.onload = function() {
//获取元素
var num = 0; //设置初始位置
Change()
function Change() {
var M = tags[num];
num++
li.length - 1) { //边界设置.
return;
setTimeout(function() {
Change();
}); //切换图片
});
}, 1000)
下雨了~~~
这是一个适合在家睡觉的日子!!
包饺子~~~
一只会居家过日子的小狐狸！！
生气了~~~
吃掉好吃的就不生气了！！
出发了~~~
来一段说走就走的旅行!!
commom.js
function MTween(obj,attr,end,duration,unit,way,callBack){
if(obj.isAnim) return;
//obj开始运动了 自定义属性
obj.isAnim = true;
if(!way){ //如果用户没有选择运动方式就默认匀速
if(!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; //计算出来的速度
clearInterval(timer);
var timer = 0;
timer = setInterval(function(){
var endTime = Date.now();
//计算出当前时间
var t = endTime-startTime;
=duration){
t = duration;
clearInterval(timer);//到达目标点要清除定时器
// console.log(Tween[way](t,start,s,duration))
obj.style[attr] = Tween[way](t,start,s,duration)+unit;
//透明度的兼容处理
if(t==duration){
obj.isAnim = false;
//等到上一个动画完成 然后再调用
if(callBack){
callBack();
}tween.js
/*
* t : time 已过时间 当前时间-初始时间
* b : begin 起始值
* c : count 总的运动值 总路程
* d : duration 持续时间 总时间
*
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){ //减速曲线
easeBoth: function(t, b, c, d){ //加速减速曲线
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){ //加加速减减速曲线
elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入）
if (t === 0) {
return b;
if ( (t /= d) == 1 ) {
return b+c;
if (!p) {
if (!a || a < Math.abs(c)) {
a = c;
} else {
elasticOut: function(t, b, c, d, a, p){ //*正弦增强曲线（弹动渐出）
elasticBoth: function(t, b, c, d, a, p){
if ( !a || a < Math.abs(c) ) {
else {
if (t < 1) {
backIn: function(t, b, c, d, s){ //回退加速（回退渐入）
return c*(t/=d)*t*((s+1)*t - s) + b;
backOut: function(t, b, c, d, s){
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
backBoth: function(t, b, c, d, s){
bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出）
bounceOut: function(t, b, c, d){//*
bounceBoth: function(t, b, c, d){
}上面是我整理给大家的,希望今后会对大家有帮助.
相关文章：
构建webpack的详细介绍
使用webpack如何实现文件打包
利用webpack搭建vue脚手架
使用Vue组件如何实现日历（详细教程）
①.,按给定的宽和高进行智能缩小
以上就是土嘎嘎小编大虾米为大家整理的相关主题介绍,如果您觉得小编更新的文章只要能对粉丝们有用，就是我们最大的鼓励和动力,不要忘记讲本站分享给您身边的朋友哦！！