javascript经典特效分享 手风琴、轮播图、图片滑动

前端之家收集整理的这篇文章主要介绍了javascript经典特效分享 手风琴、轮播图、图片滑动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近都没有更,就来几个效果充实一下。 都没有进行美化这步。

纯css的

手风琴:

<Meta charset="UTF-8"> 手风琴css
  • 接下来的都是会使用到动画效果,既然这样就把封装好运动:

    0?speed:-speed;

    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
    if(!obj.num){
    obj.num=0;
    }
    if(attr=="opacity"){
    obj.num=parseFloat(getStyle(obj,attr))100+speed;
    }else{
    obj.num=parseInt(getStyle(obj,attr))+speed;
    }
    /
    这里是判断到了目标点没有,到了就停止定时器/
    if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
    obj.num=iTarget;
    clearInterval(obj.timer);
    }
    if(attr=="opacity"){
    obj.style[attr]=obj.num/100;
    }else{
    obj.style[attr]=obj.num+"px";
    }
    /
    因为放在上面无法实现到回调函数的完整作用,出现一些BUG*/
    if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
    fn && fn();
    }
    },30);

    }
    /获取css属性值的,会获取表现出现的值/
    function getStyle(obj,attr){
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    }

    轮播图:

    轮播图

    这个是使用插件做的:responsiveslides.js

    基于jquery

    Document

    图片滑动:

    图片滑动
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的JavaScript相关文章