zoukankan      html  css  js  c++  java
  • JS+css3实现图片画廊效果总结

    最近学习一个在线小项目,用JS+css3实现图片画廊的效果,具体效果可以点击以下链接查看:

    Here

    案例中主要用到一些新的CSS3效果比如:
    1、3D视图位置设置和子元素3D支持

    -webkit-perspective:800px;/*若设置为0px则不支持3D透视功能*/
    -webkit-transform-style:preserve-3d;


    2、翻转为不可见时隐藏

    -webkit-backface-visibility:hidden;


    3、使用CSS旋转和进行位移

    -webkit-transfrom:translate(0px,0px) rotateY(0deg);


    4、CSS过渡动画

    -webkit-transition:-webkit-transform 0.6s ease-in-out (delay);

    另外用到的一些前端JS技巧:
    1、字符串替换的简易模版功能
    1.1、

    template.replace('{{index}}',s).replace('{{img}}',data[s].img).replace('{{caption}}',data[s].caption).replace('{{desc}}',data[s].desc);


    1.2、

    .className.replace(/s*photo_centers*/,' ');


    2、根据范围获得一个随机数

    function random(range){
    var max=Math.max(range[0],range[1]);
    var min=Math.min(range[0],range[1]);
    
    var diff=max-min;
    var number=Math.ceil(Math.random()*diff+min);
    
    return number;
    }

    3、使用脚本设置元素的ClassName以及具体的style属性样式

    .style['-webkit-transform']='rotate(0deg) scale(1.3)';
  • 相关阅读:
    echarts在ie浏览器y轴坐标偏移向上
    git常用命令总结[转]
    char和varchar类型的区别
    关于猴子选大王的问题
    VIM折叠代码命令
    用excel打开文本内容
    php事务操作示例
    Iframe内嵌Cookie丢失问题
    VIM折叠代码命令
    git常用命令总结[转]
  • 原文地址:https://www.cnblogs.com/danielweb/p/4714736.html
Copyright © 2011-2022 走看看