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

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

纯css的

手风琴:

rush:xhtml;"> <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

    图片滑动:

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

    相关文章

    前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
    前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
    前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
    前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
    前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
    前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...