寫了一個好玩的彈性列表效果

阿新 • • 發佈：2017-12-24

add var time cli back undefine all inner eof

閑來沒事，隨遍寫寫，有需要的盡管拿去用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #list{
                width:302px;
                margin:50px auto;
                padding:0;
                list 
-style: none;
            }
            #list li{
                height:40px;
                font:12px/40px ‘宋體‘;
                border:1px solid #000;
                position: relative;
                cursor: pointer;
            }
            #list span{
                width:12px;
                height:12px;
                line 
-height: 12px;
            }
        </style>
        <script>
            var Tween = {
            linear: function (t, b, c, d){  //勻速
                return c*t/d + b; 
            },
            easeIn: function(t, b, c, d){  //加速曲線
                return c*(t/=d)*t + b;
            },
            easeOut:  
function(t, b, c, d){  //減速曲線
                return -c *(t/=d)*(t-2) + b;
            },
            easeBoth: function(t, b, c, d){  //加速減速曲線
                if ((t/=d/2) < 1) {
                    return c/2*t*t + b;
                }
                return -c/2 * ((--t)*(t-2) - 1) + b;
            },
            easeInStrong: function(t, b, c, d){  //加加速曲線
                return c*(t/=d)*t*t*t + b;
            },
            easeOutStrong: function(t, b, c, d){  //減減速曲線
                return -c * ((t=t/d-1)*t*t*t - 1) + b;
            },
            easeBothStrong: function(t, b, c, d){  //加加速減減速曲線
                if ((t/=d/2) < 1) {
                    return c/2*t*t*t*t + b;
                }
                return -c/2 * ((t-=2)*t*t*t - 2) + b;
            },
            elasticIn: function(t, b, c, d, a, p){  //正弦衰減曲線（彈動漸入）
                if (t === 0) { 
                    return b; 
                }
                if ( (t /= d) == 1 ) {
                    return b+c; 
                }
                if (!p) {
                    p=d*0.3; 
                }
                if (!a || a < Math.abs(c)) {
                    a = c; 
                    var s = p/4;
                } else {
                    var s = p/(2*Math.PI) * Math.asin (c/a);
                }
                return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
            },
            elasticOut: function(t, b, c, d, a, p){    //正弦增強曲線（彈動漸出）
                if (t === 0) {
                    return b;
                }
                if ( (t /= d) == 1 ) {
                    return b+c;
                }
                if (!p) {
                    p=d*0.3;
                }
                if (!a || a < Math.abs(c)) {
                    a = c;
                    var s = p / 4;
                } else {
                    var s = p/(2*Math.PI) * Math.asin (c/a);
                }
                return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
            },    
            elasticBoth: function(t, b, c, d, a, p){
                if (t === 0) {
                    return b;
                }
                if ( (t /= d/2) == 2 ) {
                    return b+c;
                }
                if (!p) {
                    p = d*(0.3*1.5);
                }
                if ( !a || a < Math.abs(c) ) {
                    a = c; 
                    var s = p/4;
                }
                else {
                    var s = p/(2*Math.PI) * Math.asin (c/a);
                }
                if (t < 1) {
                    return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
                            Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
                }
                return a*Math.pow(2,-10*(t-=1)) * 
                        Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
            },
            backIn: function(t, b, c, d, s){     //回退加速（回退漸入）
                if (typeof s == ‘undefined‘) {
                   s = 1.70158;
                }
                return c*(t/=d)*t*((s+1)*t - s) + b;
            },
            backOut: function(t, b, c, d, s){
                if (typeof s == ‘undefined‘) {
                    s = 3.70158;  //回縮的距離
                }
                return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
            }, 
            backBoth: function(t, b, c, d, s){
                if (typeof s == ‘undefined‘) {
                    s = 1.70158; 
                }
                if ((t /= d/2 ) < 1) {
                    return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
                }
                return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
            },
            bounceIn: function(t, b, c, d){    //彈球減振（彈球漸出）
                return c - Tween[‘bounceOut‘](d-t, 0, c, d) + b;
            },       
            bounceOut: function(t, b, c, d){
                if ((t/=d) < (1/2.75)) {
                    return c*(7.5625*t*t) + b;
                } else if (t < (2/2.75)) {
                    return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
                } else if (t < (2.5/2.75)) {
                    return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
                }
                return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
            },      
            bounceBoth: function(t, b, c, d){
                if (t < d/2) {
                    return Tween[‘bounceIn‘](t*2, 0, c, d) * 0.5 + b;
                }
                return Tween[‘bounceOut‘](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
            }
        }
        function getStyle(obj,attr)
        {
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }
            else{
                return getComputedStyle(obj,false)[attr];
            }
        }
        function starMove(obj,json,time,fx,callBack)
        {
            var iNowTime=getNow();
            var iCur={};
            for(var attr in json)
            {
                if(attr=="opacity")
                {
                    iCur[attr]=Math.round(getStyle(obj,attr)*100);
                }
                else
                {
                    iCur[attr]=parseInt(getStyle(obj,attr));        
                }
            }
            clearInterval(obj.oTimer);
            obj.oTimer=setInterval(function(){
                var iTime=time-Math.max(0,iNowTime-getNow()+time);    
                for(var attr in json)
                {
                    var iVal=Tween[fx](iTime,iCur[attr],json[attr]-iCur[attr],time)
                    if(attr=="opacity")
                    {
                        obj.style.opacity=iVal/100;
                        obj.style.filter="alpha(opacity="+iVal+")"
                    }
                    else
                    {
                        obj.style[attr]=iVal+"px";
                    }
                }
                if(iTime==time)
                {
                    clearInterval(obj.oTimer);
                    if(callBack)
                    {
                        callBack.call(obj);
                    }
                }
            },14);
        
        }
        function getNow()
        {
            return new Date().getTime();
        }
        </script>
        <script>
            window.onload = function(){
                var oList = document.getElementById(‘list‘);
                var aLi = oList.getElementsByTagName(‘li‘);
                var iLiHeight = aLi[0].offsetHeight;
                for(var i=0;i<aLi.length;i++){
                    var sHtml = aLi[i].innerHTML;
                    aLi[i].innerHTML = ‘‘;
                    for(var j=0;j<sHtml.length;j++){
                        aLi[i].innerHTML += ‘<span>‘+sHtml[j]+‘</span>‘;
                    }
                    var aSpan = aLi[i].children;
                    for(var j=0;j<aSpan.length;j++){
                        aSpan[j].style.left = aSpan[j].offsetLeft+‘px‘;
                        aSpan[j].style.top = aSpan[j].offsetTop+‘px‘;
                        aSpan[j].startTop = aSpan[j].offsetTop;
                    }
                    for(var j=0;j<aSpan.length;j++){
                        aSpan[j].style.position = ‘absolute‘;
                        
                        (function(aSpan,num2){
                            var iStart = 0;
                            var iSpanHeight = aSpan[0].offsetHeight;
                            aSpan[num2].onmouseover = function(ev){
                                iStart = ev.clientY;
                            }
                            aSpan[num2].onmousemove = function(ev){
                                var iDis = ev.clientY-iStart;
                                var iNum = iDis>0 ? 1 : -1;
                                if(this.startTop+iDis>=0 && this.startTop+iDis<(iLiHeight - iSpanHeight)){
                                    for(var j=0;j<aSpan.length;j++){
                                        if(Math.abs(iDis)>Math.abs(num2-j)){
                                            aSpan[j].style.top = aSpan[j].startTop+(Math.abs(iDis)-Math.abs(num2-j))*iNum+‘px‘;
                                        }else{
                                            aSpan[j].style.top = aSpan[j].startTop+‘px‘;
                                        }
                                        
                                    }
                                }
                            }
                            aSpan[num2].onmouseout = function(ev){
                                for(var j=0;j<aSpan.length;j++){
                                    starMove(aSpan[j],{top:aSpan[j].startTop},500,‘elasticOut‘);
                                }
                            }
                        })(aSpan,j);
                    }
                }
            }
            
        </script>
    </head>
    <body>
        <ul id="list">
            <li>一個好玩的彈性列表效果一個好玩的彈性列表效果</li>
            <li>一個好玩的彈性列表效果一個好玩的彈性列表效果</li>
            <li>一個好玩的彈性列表效果一個好玩的彈性列表效果</li>
            <li>一個好玩的彈性列表效果一個好玩的彈性列表效果</li>
        </ul>
    </body>
    <script>
    </script>
</html>

寫了一個好玩的彈性列表效果

add var time cli back undefine all inner eof 閑來沒事，隨遍寫寫，有需要的盡管拿去用。 <!DOCTYPE html> <html> <head> <meta c

寫了一個簡單輪播效果實現

char line query span size html ef6 ava top <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

寫了一個簡單的Linux Shell用來下載文件

logs -- spi http col 內容 style bre shell #!/bin/sh for (( i=0; i<30; i=i+1 )); do # 利用spider來探測請求的資源是否存在，並把請求的結果寫入到一個文件 wget -

無聊的我寫了一個代碼。。。P1605 迷宮

技術 open closed char log one void ide type 搜索水題哎直接不行了。 #include <ctype.h> #include <cstdio> void read(int &x)

寫了一個Mac快速設置、打開和關閉Web代理的Shell命令

快速還要痛點 blog 如果 head 編程 shell腳本編程偏好設置緣由（痛點）每次在Mac上設置Web代理，都需要點開"系統偏好設置 -- 網絡 -- 高級 -- 代理"，然後分別設置Web代理（HTTP）和安全Web代理（HTTPS），設置完後，還要點"好

最近開始努力學python 寫了一個python小代碼：判斷一個登陸程序，如果賬號密碼輸錯3次，鎖定賬號無法再登陸

登陸 readlines 輸入連續 nbsp 努力一個取數據 lis 1 count = 0 2 username = ‘zhangsan‘ 3 userpassword = ‘111111‘ 4 5 f = open(‘lock.txt‘,‘r+‘

一位從vb系轉到JAVA的朋友在一個類中寫了一個類似VB中MSGBOX的方法

fin return gen interface man text string listener com //此方法放一個自定義的JAVA類中 public static boolean msgBoxPlus(Activity objPage, String strTi

asio寫了一個聊天的基本框架

sch mut sstream 示例 www. empty bind json logs 示例代碼 1 #include "Util.h" 2 #include "MyAsio.h" 3 #include "TcpConnectionManager.h

用DataTables做了一個行分組的效果，順便學習了ajxs的用法

pro 1-1 arch eval func -m script web rem 具體效果如下：折疊 ???? 展開 ???? 前臺代碼 <%@ page language="java" contentType="text/html; charset=UTF-8"

DS作業·寫了一個鏈表

int delet str let push app als work ios 用struct手寫了個list 有push_back,push_front,insert,erase reserve，size,setpos,rbegin 功能。坑：一開始想用template

原生JS寫了一個小demo，根據輸入的數字生成不同背景顏色的小方塊兒~

top == UNC 定位元素 demo TE tostring eight 地方昨天練習寫了這個小demo，個人覺得通過設置定位元素left和top的值，來實現換行的功能，這種方法很巧妙~ 另外，如下代碼中的隨機顏色的獲取，還請各位前輩多多指教：需要改進的地方；或者有

CCF-棋局評估 201803-04（版本 2.0）------（之前寫了一個臃腫的1.0版，還沾沾自喜 233）

核心 color namespace ace for play class 一個 while 核心：博弈搜索樹　　雙方得分互為相反數　　　dfs (x,y,player): 玩家player下完（x,y)之後的得分最大值易錯：先判斷輸贏，再判斷

給女朋友用Python寫了一個自動抽獎程序！Python在手，獎品我有！

com () 單身代碼女孩子 nbsp 不能是不是 apt 我相信大部分的女孩子都是喜歡買買買的，我還沒有見過不喜歡買東西的女孩子，當然很多東西也是有抽獎這項優惠的，很多小程序都有抽獎這個功能的，好了廢話不多說了，為了給女朋友寫這款抽獎程序，可謂是嘔心瀝血！不過看到她

就因為用寫了一個自助提卡系統！居然一個月掙的比一年多！勿商用

信息其中技術 .com 查詢 api map lmap 過多相關環境源碼信息：你猜啊漏洞類型：Forwarded-For註入搭建成功之後如下：看到如下頁面是不是有似曾相識的感受：進群：125240963 即可獲取數十套PDF哦！上圖是安

差點被輔導員暴揍！就因為我給他寫了一個USB病毒！Python賊牛逼

shutil模塊 http 文件名一個形式 () 時間 stat 以及如何判斷U盤的插入與否？進群：548377875 即可獲取數十套PDF哦！就像標題所示，我們真的只用了10行（其實是11行，湊個整：）完成了這個“病毒”。我們可

仿一個好玩的滑動效果

tde 滑動效果 wce else 技術 cto rev opacity art 起因昨天跑步的時候，看到一個app（華為手機自帶的運動健康）上的滑動效果很有意思，回來之後就想著，能不能在dom上實現一下，於是有了這篇文章。首先看一下效果圖，滑動下面的綠色滑塊可以看到效果

用pyhton寫了一個飛機大戰

import pygamefrom plane_sprites import *class PlaneGame(object): """飛機大戰主遊戲""" def __init__(self): print("遊戲初始化") # 1，繪製螢幕視窗 self.screen = pygame.displa

c# 多個字串做分隔符, 雖然可以用正則做分隔符, 但是遇到特殊符號還真不好寫.自己寫了一個.

[TestMethod] public void TestMethod2() { string str = "aaa|||bbb|||ccc"; var rr= MySplit(str, "|

使用pyqt寫了一個檢查大資料環境的gui

背景：在xx公司上班，該公司有款超融合的產品，當前已經梳理出來在超融合平臺部署大資料軟體的最佳實踐，該指令碼主要是為了檢查當前部署的大資料環境是否符合最佳實踐的部署使用方法：輸入超融合的主控的ip地址和密碼，輸入ambari節點的主控和密碼，然後上傳大資料虛擬機器的vmid資訊，點選檢查即可觸發檢查 &

寫了一個好玩的彈性列表效果

相關推薦