仿拉勾网首页穿墙广告效果

2019-09-13 郑州网站建设  

<!doctype html>

<html>

<head>

         <meta charset="UTF-8">

         <title>Title</title>

<style>

*{margin:0; padding:0; list-style:none;}

ul{ overflow:hidden; width:630px; margin:100px auto;}

ul li{ float:left; position:relative; width:200px; height:200px; background:#ccc; margin:5px; overflow:hidden;}

ul li span{ position:absolute; width:100%; height:100%; background:rgba(255,0,0,0.3); left:-200px; top:0;}

</style>

<script>

function getStyle(obj,sName){

         return (obj.currentStyle||getComputedStyle(obj,false))[sName];

}

function move(obj,json,options){

         options = options||{};

         options.duration = options.duration||700;

         options.easing = options.easing||'ease-out';

        

         var start = {};

         var dis = {};

         for(var name in json){

                   start[name] = parseFloat(getStyle(obj,name));

                   dis[name] = json[name]-start[name];

         }

         var count = Math.floor(options.duration/30);

         var n = 0;

         clearInterval(obj.timer);

         obj.timer = setInterval(function(){

                   n++;

                   for(var name in json){

                            switch(options.easing){

                                     case 'linear':

                                               var cur = start[name]+dis[name]*n/count;

                                               break;

                                     case 'ease-in':

                                               var a = n/count;

                                               var cur = start[name]+dis[name]*Math.pow(a,3);


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2135.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • head
  • Doctype
  • !
  • Ч
  • met