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

这篇文章将为大家详细讲解有关原生js怎么实现简单的焦点图效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联专注于峨山县企业网站建设,响应式网站开发,商城网站制作。峨山县网站建设公司,为峨山县等地区提供建站服务。全流程专业公司,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务

JS是什么

JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。

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

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



 
 
 
 
  ul,
  li,
  p,
  h4 {
  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;
  }
  
  h4 {
  font: bold 20px/30px "微软雅黑";
  }
  
  p {
  font: 16px/30px "微软雅黑";
  }
 
 
 
 
  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)
   });
  }
  }
 
 
 
 
  
  
   
  •        
  •    
  •        
  •    
  •        
  •    
  •        
  •          下雨了~~~    这是一个适合在家睡觉的日子!!

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

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

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

      
          

    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;
     }
    }

    关于“原生js怎么实现简单的焦点图效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


    分享标题:原生js怎么实现简单的焦点图效果
    文章分享:http://pwwzsj.com/article/geddce.html

    其他资讯