好资源导航 » 文章资讯 » 原生js实现简单的焦点图效果实例

原生js实现简单的焦点图效果实例

2023-09-19 11:36:05 67

用到一些封装好的运动函数，主要是定时器

效果为图片和图片的描述定时自动更换。







ul,
li,
p,
h3{
padding:0;
margin:0;
list-style:none;
}

img{
border:none;
vertical-align:top;
}

#bg_box{
width:1000px;
height:590px;
margin:50pxauto;
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:bold20px/30px"微软雅黑";
}

p{
font:16px/30px"微软雅黑";
}




window.onload=function(){
//获取元素
varliBbox=$('ul')[0];
varli=$('li');
vartags=$('.tags')
varnum=0;//设置初始位置
Change()
functionChange(){
varM=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)
});
}
}




















下雨了~~~
这是一个适合在家睡觉的日子!!

包饺子~~~ 一只会居家过日子的小狐狸！！

生气了~~~ 吃掉好吃的就不生气了！！

出发了~~~ 来一段说走就走的旅行!!

commom.js

functionMTween(obj,attr,end,duration,unit,way,callBack){
if(obj.isAnim)return;
//obj开始运动了自定义属性
obj.isAnim=true;
if(!way){//如果用户没有选择运动方式就默认匀速
way='linear';
}
if(!unit){//如果用户没有选择运动方式就默认匀速
unit='';
}
varstart=parseFloat(getStyle(obj,attr));//起始位置
//varend=1000;//目标点
//varduration=1000;//动画执行的总时间单位是毫秒
varstartTime=Date.now();
vars=end-start;//总路程
//varv=s/duration;//计算出来的速度
//每次20ms走一帧
clearInterval(timer);
vartimer=0;
timer=setInterval(function(){
varendTime=Date.now();
//计算出当前时间
vart=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();
varTween={
linear:function(t,b,c,d){//匀速
returnc*t/d+b;
},
easeIn:function(t,b,c,d){//加速曲线
returnc*(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){
returnc/2*t*t+b;
}
return-c/2*((--t)*(t-2)-1)+b;
},
easeInStrong:function(t,b,c,d){//加加速曲线
returnc*(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){
returnc/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){
returnb;
}
if((t/=d)==1){
returnb+c;
}
if(!p){
p=d*0.3;
}
if(!a||a
以上这篇原生js实现简单的焦点图效果实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
                
            
              
            
                                    上一篇
用Python删除本地目录下某一时间点之前创建的所有文件的实例
                
                                    下一篇
微信小程序实现图片懒加载的示例代码
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            柠檬水的制作方法 怎么做柠檬水
                        
                                            
                            事无巨细的意思是什么
                        
                                            
                            numb歌词 歌曲numb歌词
                        
                                            
                            怎么查自己八字 怎么快速的算生辰八字
                        
                                            
                            炙手可热是什么意思 炙手可热的意思
                        
                                            
                            自制月饼的家常做法 自制月饼的家常做法分享
                        
                                            
                            元朝开国皇帝叫什么名字 哪个皇帝是元朝开国皇帝
                        
                                            
                            河南属于中原地区吗
                        
                                            
                            丹青指什么 丹青的意思
                        
                                            
                            商务会所和商务酒店有什么区别
                        
                                            
                            大麦茶怎么泡 大麦茶的泡法
                        
                                            
                            一切唯心造万法由心生的意思
                        
                                            
                            德不孤必有邻出自哪本书 这句话是什么意思？
                        
                                            
                            旱萝卜素丸子的做法 详讲步骤
                        
                                            
                            一男一女甜到爆的情侣网名 适合一男一女的情侣网名
                        
                                            
                            相逢是首歌歌词 歌曲相逢是首歌歌词
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图