wns9778.com_威尼斯wns.9778官网

热门关键词: wns9778.com,威尼斯wns.9778官网
wns9778.com > 计算机教程 > 原生js实现简单的焦点图效果

原标题:原生js实现简单的焦点图效果

浏览次数:169 时间:2019-05-10

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

原生js实现图片层叠轮播切换效果,js图片层叠切换

wns9778.com,本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如下

效果图:

 wns9778.com 1

功能描述:

  •   自定义图片尺寸;
  •   每隔一段时间自动滚动图片;
  •   每次动画执行的时候改变图片的位置,宽高以及其它属性也要跟随着变化;
  •   鼠标移上图片,显示当前图片的详细信息;
  •   点击按钮向前向后滚动;

详细代码:   html代码:

<!DOCTYPE html>
<!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topic/xiuxuan.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title></title>
<style type="text/css">
 *{margin:0px; padding:0px;font-family:"Microsoft YaHei"}
 ol,ul{list-style:none;}
 cite,em,i{font-style:normal} 
 * html .clearfix { height: 1%; }
 .clearfix { display: block; }
 .myclearfix:after { clear:both; visibility:hidden;}
 .myclearfix { display: block; _display:inline-block; overflow:hidden;} 

 #largerImages{position:relative;width:1000px;margin:0 auto;height:520px;overflow:hidden;}
 #largerImages li{box-shadow:1px 1px 12px rgba(200, 200, 200, 1);width:368px;height:368px; position:absolute;top:10px;overflow:hidden;color:#fff;}
 #largerImages li .cover{background-color:#333;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);height:100%;width:100%;display:block;position:absolute;top:0px;}
 #largerImages img{border:0px;width:100%;height:100%;}
 #largerImages .previous{left:13%;}
 #largerImages .next{left:53%;}
 #largerImages .previous,#largerImages .next{cursor:pointer; position:absolute;z-index:100; top:25%;height:60px;line-height:60px;width:30px;color:#fff;text-align:center;}
 #largerImages .previous span,#largerImages .next span{position:absolute;top:0px;left:0px;height:100%;width:100%;display:block;background-color:#000;opacity:0.4;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);}
 #largerImages .previous em,#largerImages .next em{height:100%;width:100%;display:block;position:absolute;top:0px;left:0px;font-size:26px; font-family: "宋体";}
 #largerImages li span,#largerImages li em{position:absolute;left:0px;width:100%;height:30px;line-height:30px; bottom:0px;text-align:center;display:block;color:#fff;}
 #largerImages li span{background-color:#000;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);font-size:12px;}

</style>
</head>
<body>

<ul id = "largerImages">
 <p class="previous"> <em><</em></p>
 <p class="next"> <em>></em></p>
 <li><i class="cover"> </i>
  <a href="#"><img src="http://www.ipyl.net/uploads/allimg/190510/1932491549-1.jpg"></a>
  <p class="tab_name"> <em>主播昵称</em></p>
 </li>
 <li><i class="cover"> </i>
  <a href="#"><img src="http://www.ipyl.net/uploads/allimg/190510/19324950S-2.jpg"></a>
  <p class="tab_name"> <em>主播昵称</em></p>
 </li>
 <li><i class="cover"> </i>
  <a href="#"><img src="http://www.ipyl.net/uploads/allimg/190510/1932491549-1.jpg"></a>
  <p class="tab_name"> <em>主播昵称</em></p>
 </li>
 <li><i class="cover"> </i>
  <a href="#"><img src="http://www.ipyl.net/uploads/allimg/190510/19324950S-2.jpg"></a>
  <p class="tab_name"> <em>主播昵称</em></p>
 </li>
 <li><i class="cover"> </i>
  <a href="#"><img src="http://www.ipyl.net/uploads/allimg/190510/1932491549-1.jpg"></a>
  <p class="tab_name"> <em>主播昵称</em></p>
 </li>
</ul>

<script type="text/javascript" src="../../lib/seajs/sea.js"></script>
<script type="text/javascript" src="../../lib/base/1.0.x/base.js"></script>
<script type="text/javascript">
 seajs.use(['lib/jquery/1.11.x/index.js','_example/rotateBox/index.js'],function($,carousel) {
  carousel.init({
   wapper: $('#largerImages'),

   //所有图片以此来按比例定义宽高
   imgWidth: 450,
   imgHeight: 300,

   spacing: {
    left: 60, //每张图片左边距离相差多少
    top: 30, //每张图片顶部距离相差多少
    width: 60, //每张图片宽度相差多少
    height: 60 //每张图片高度相差多少
   }
  });
 });
</script>
</body>
</html>

 

js 代码:

define(function(require, exports, module) {
 'use strict';
 var $ = require('lib/jquery/1.11.x/index.js');

 var carousel = {

  _initData:false, //判断动画是否执行完毕

  init: function(options) {
   var t = this;
   t._wapper = options.wapper;
   t._grids = t._wapper.find('li');
   t._gridsWidth = options.imgWidth;
   t._gridsHeight = options.imgHeight; 
   t._spacing = options.spacing;

   //取居中图片
   t._middle = t._grids.length % 2 == 0 ? t._grids.length / 2 : parseInt(t._grids.length / 2);

   //存放各图片参数
   t._arr = {
    left: [],
    top: [],
    zIndex: [],
    width: [],
    height: []
   }

   if ( !t._initData ) {
    var interval;
    interval = setInterval(function(){
     $('.previous').click();
    },10000);
   }

   t._largerImages();
   t._reposition();
   t._mouseEnter(t._grids) //鼠标移动上去显示主播昵称
  },
  //初始化定位:
  _largerImages: function() {
   var t = this;

   var front = t._middle;
   var avtive = t._middle;
   var last = t._grids.length;

   t._grids.each( function(i, img) {

    if (i == t._middle) {

     t._grids.eq(i).css({
      zIndex: 99,
      top: 0,
      left: t._spacing.left * i,
      height: t._gridsHeight,
      width: t._gridsWidth
     }); 

    } else if ( i < t._middle ) {

     t._grids.eq(i).css({
      zIndex: i,
      top: t._spacing.top * front,
      left: t._spacing.left * i,
      height: t._gridsHeight - t._spacing.height * front,
      width: t._gridsWidth - t._spacing.width * front
     });

     front--;

    } else {

     last --;

     t._grids.eq(last).css({
      zIndex: i,
      top: t._spacing.top * avtive,

      left: t._spacing.left * last   t._spacing.width * avtive,
      height: t._gridsHeight - t._spacing.height * avtive,
      width: t._gridsWidth - t._spacing.width * avtive
     });

     avtive --;
    };
   });
  },
  //翻页动画
  _reposition: function() {
   var t = this;

   //把各属性值传到数组里面
   t._grids.each( function(i,img) {
    t._arr.left.push(t._grids.eq(i).position().left);
    t._arr.top.push(t._grids.eq(i).position().top);
    t._arr.width.push(t._grids.eq(i).width());
    t._arr.height.push(t._grids.eq(i).height());
    t._arr.zIndex.push(t._grids.eq(i).css('z-index'));
   });

   //向前翻页
   $('.previous').bind('click',function() {
    if ( !t._initData && t._arr.left.length != 0) {

     t._initData = true;

     //重新获取选择器
     var grids = t._wapper.find('li'); 

     for (var i = 1; i < grids.length ; i   ) {

      grids.eq(i).animate({
       zIndex: t._arr.zIndex[i - 1],
       left: t._arr.left[i - 1],
       top: t._arr.top[i - 1], 
       width: t._arr.width[i - 1], 
       height: t._arr.height[i - 1],
      },200,
      function() {
       t._initData = false;
       grids.find('i').addClass('cover');
       grids.eq(t._middle   1).find('i').removeClass('cover');
      });
     };

     grids.eq(0).animate({
      left: t._arr.left[ grids.length - 1], 
      top: t._arr.top[ grids.length - 1], 
      width: t._arr.width[ grids.length - 1], 
      height: t._arr.height[ grids.length - 1],
      zIndex: t._arr.zIndex[ grids.length - 1]
     },200,
     function(){
      $(this).appendTo(t._wapper);
     });

    }
   });
   //向后翻页
   $('.next').bind('click',function() {
    if ( !t._initData && t._arr.left.length != 0) {

     t._initData = true;

     //重新获取选择器
     var grids = t._wapper.find('li'); 

     for (var i = 0; i < grids.length - 1; i   ) {
      grids.eq(i).animate({
       left: t._arr.left[i   1],
        top: t._arr.top[i   1], 
        width: t._arr.width[i   1], 
        height: t._arr.height[i   1],
        zIndex: t._arr.zIndex[i   1]
        },200,function() {
        t._initData = false;
       });
     };
     grids.eq(grids.length - 1).animate({
      left: t._arr.left[0], 
      top: t._arr.top[0], 
      width: t._arr.width[0], 
      height: t._arr.height[0],
      zIndex: t._arr.zIndex[0]
     },200,
     function(){
      $(this).prependTo(t._wapper);
      grids.find('i').addClass('cover');
      grids.eq(t._middle - 1).find('i').removeClass('cover');
     });

    }
   });
  },
  //鼠标进入图片效果
  _mouseEnter: function(grids) {
   grids.each(function(i){
    $(this).mouseenter(function() {
     $(this).find('.tab_name').animate({
      bottom:0,opacity: 'show'
     },200);
    });
    $(this).mouseleave(function() {
     $(this).find('.tab_name').animate({
      bottom:-50,opacity: 'hide'
     },200);
    });
   });
  },
 };

 return carousel;
});

 以上就是本文的全部内容,希望对大家的学习有所帮助。

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

您可能感兴趣的文章:

  • js 图片轮播(5张图片)
  • 原生javascript实现图片轮播效果代码
  • 最简单的js图片切换效果实现代码
  • 带左右箭头图片轮播的JS代码
  • 简单的js图片轮换代码(js图片轮播)
  • js图片自动轮播代码分享(js图片轮播)
  • 用html css js实现的一个简单的图片切换特效
  • js实现支持手机滑动切换的轮播图片效果实例
  • js支持键盘控制的左右切换立体式图片轮播效果代码分享
  • js图片轮播手动切换效果

http://www.bkjia.com/Javascript/1098722.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1098722.htmlTechArticle原生js实现图片层叠轮播切换效果,js图片层叠切换 本文实例介绍了js焦点图片层叠轮播切换滚动效果,分享给大家供大家参考,具体内容如...

 

<!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">
            <div 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>
                <div class="tags">
                    <h3 class="title">下雨了~~~</h3>
                    <p class="tag">这是一个适合在家睡觉的日子!!</p>
                </div>
                <div class="tags">
                    <h3 class="title">包饺子~~~</h3>
                    <p class="tag">一只会居家过日子的小狐狸!!</p>
                </div>
                <div class="tags">
                    <h3 class="title">生气了~~~</h3>
                    <p class="tag">吃掉好吃的就不生气了!!</p>
                </div>
                <div class="tags">
                    <h3 class="title">出发了~~~</h3>
                    <p class="tag">来一段说走就走的旅行!!</p>
                </div>
            </div>
        </section>
    </body>

</html>

本文由wns9778.com发布于计算机教程,转载请注明出处:原生js实现简单的焦点图效果

关键词: wns9778.com

上一篇:python基础篇之day01wns9778.com

下一篇:没有了