JavaScript螢幕滑動小視窗

阿新 • • 發佈：2018-11-05

<html>
<head>
    <meta charset="UTF-8">
    <title>ZG·Dragon</title>
    <style>
    #div1{
        position:relative;
        width:899px;
        height:599px;
        margin:0 auto;
        border:1px solid black;
        background-color:#eeff66;
    }
    #img 
{
        position:relative;
        width:100; 
        height:100; 
        background-color:white;
        border-radius:20%;
        box-shadow:5px 5px 0px 0px RGBA(0,0,0,0.4);
    }
    </style>
    <script>
        var img=document.getElementById("img");
        var x=0,y=0;
        var t;
         
var f;
        var xSpeed=1.2;
        var ySpeed=1.2;
        
        function floatimg(){
        var o=document.getElementById('div1');
        var w=o.clientWidth*0.88+2;
        var h=o.clientHeight*0.82+2;
        if(x>=w){
            t=1;
            //document.getElementById("img").style.boxShadow="0px 0px 0px 0px black"; 

        }
        /*else{
            document.getElementById("img").style.boxShadow="4px 4px 0px 0px RGBA(0,0,0,0.4)";
        }*/
        if(x<=0){
            t=0;
        }
        if(t==1){
            x-=xSpeed;
        }
        if(t==0){
            x+=xSpeed;
        }
        if(y>=h){
            f=1;
        }
        if(y<=0){
            f=0;
        }
        if(f==1){
            y-=ySpeed;
        }
        if(f==0){
            y+=ySpeed;
        }
        
        document.getElementById("img").style.left=x+"px";
        document.getElementById("img").style.top=y+"px";
        setTimeout(floatimg,10);
        }
    </script>

    
</head>
<body onload="floatimg()">

<div id="div1">
<img src="0000.jpg" id="img" alt="圖片">
</div>

</body>
</html>

可以實現一個簡單的浮動的小窗體

JavaScript螢幕滑動小視窗

<html> <head> <meta charset="UTF-8"> <title>ZG·Dragon</title> <style> #div1{ position:relati

Python: tkinter視窗螢幕居中,設定視窗最大,最小尺寸

轉自：http://blog.csdn.net/yao_yu_126/article/details/23717355 #!/usr/bin/env python #coding=utf-8 ''''' 視窗螢幕居中,設定視窗最大,最小尺寸...

小白也能學會的模擬螢幕滑動與手勢密碼繪製

前言 App自動化測試中有兩個很重要的操作，螢幕滑動與繪製手勢密碼。目前很多App在啟動時，都存在啟動時的引導動畫或者載入上下文內容時需要手動上滑或者下滑載入頁面，所以在自動化測試的過程中模擬手的滑動操作看起來就很重要了；第二個比較重要的是模擬手動繪製九宮格完成手勢密碼的設定，這種手勢密碼在我瞭解的範圍內，

javascript運動的小框架

運動框架寫一個運動小框架1、需要獲取元素對象document.getElementById();2、需要在函數裏面回去樣式值function Css(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[arr]; }else{

JavaScript 常用的小功能集合

false button navigator pre string ret per int() 鼠標右鍵 1. 得到當前用戶使用的瀏覽器的內核版本 function getExplorer(){ 　　 var browser = ""; var explo

【JavaScript】動畫-小案例：小球運動

rand ner res onf mage borde 技術 star 初始最近的講js運動框架時，做了一個小案例，隨機生成幾個小球，然後讓他們在頁面中跳動，碰到邊界就彈回來並修改顏色。效果如下：代碼如下： 1 <!doctype html>

初學JavaScript之顏色小遊戲

20px inf time select 改變顏色 interval one 準備顏色 /*老師布置的的顏色小遊戲的作業，根據問題顯示的文字找出對應的顏色判斷小遊戲，可能有很多需要改進的代碼，後面會多多改進的，謝謝2018-07-15 12:45:59*/<!DO

javascript的一些小知識

每一個 www. lean http 適應 and 左移和數邏輯把外部javascript文件放在瀏覽器的後面，可以提高瀏覽器的加載速度defer="defer"，等到瀏覽器加載完畢後才執行腳本，只對外部腳本鏈接有效使用var定義的變量是局部變量，

VUE：漸進式JavaScript框架（小白自學）

相關 run 擴展插件路由 htm hello 延展 rip 移動 VUE：漸進式JavaScript框架一、官網英文　　https://vuejs.org/ 中文　　https://cn.vuejs.org/ 二：漸進式即有一個核心庫，在需要的時候再逐漸

HTML+Javascript製作拼圖小遊戲詳解（二）

上一篇我們說了網頁的基本佈局。接下來將為大家帶來具體的實現方法。拼圖通表格來實現，做一個方形的表格，改變其大小使之如圖所示。試想一下如果我們將一張圖片剪成6張分別放入對應位置，然後再把它打亂，這樣就可以進行拼圖了。可是，將圖片放入和打亂圖片倒是不難，可想要實現移動圖片，這就有一點麻煩了。不

VM之Linux：Linux的Ubuntu中，解決安裝後螢幕太小的問題

1.操作環境 vmware14Pro ubuntu 16.04LTS 2.問題描述在使用vmware14Pro安裝ubuntu 16.04LTS系統後，螢幕始終比較小，無法根據vmware的變化而變化。 3.問題原因問題在於未設定vmware的選單選項或者未安裝vmwar

基於vm12pro的Ubuntu-18.04.1安裝vmtools，解決螢幕過小問題

（1）用 “cd”命令轉到要刪除的檔案所在位置（2）通過語句 sudo rm -rf + 要刪除的檔案進行刪除然後輸入./vmware-install.pl回車即可，大部分情況下

移動螢幕外的視窗返回螢幕

平時工作中筆記本外接顯示器分屏，很多工作視窗放在分屏的顯示器上。結果有一天攜帶筆記本外出辦公時傻眼了，開啟的程式都不在螢幕上顯示。這時就需要將螢幕外的視窗移回螢幕中，有兩個方法：方法一： 1.保持要移動的視窗為啟用狀態，按 Alt+空格啟用視窗選單（因為視窗在螢幕外，所以看不到，沒關係）

HTML+Javascript製作拼圖小遊戲詳解（終）

上次我們已經講解了製作的原理，並且展示了主要程式碼。這次我將完整的程式碼給大家，僅供參考。 HTML部分如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

安卓手機錄製螢幕視訊小妙招

　　生活中會有很多小妙招，那麼今天小編要介紹的是關於安卓手機錄製螢幕視訊的小妙招，你們是不是有時候在錄製完一段小視訊的時候就想要分享朋友圈，而有些軟體卻不支援，還想錄制一小片段的時候，還是不支援，那麼針對你們的種種問題，今天的這個小妙招足夠為你們排憂解難。　　錄屏大師http://www.xunjiesh

JavaScript前端開發小遊戲之智慧拼圖

HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /

JavaScript實用程式碼小技巧

JSON.stringify 我們平時經常會用到JSON 物件，比如當我們要實現物件的深拷貝時，我們可以用JSON 物件的JSON.stringify和JSON.parse 來拷貝一個完全一樣的物件，而不會對原物件產生任何引用關係。在使用localStorage 時，也會用到它，因為localSto

Android-螢幕滑動（一）

以動畫方式滑動到下一頁下面用一個小demo來簡單記錄下用動畫的方式跳轉頁面到下一頁，直接上程式碼吧：首先建立一個佈局檔案activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout

關於javascript的一個小問題-邏輯值

今天看一本關於js的書籍，其中有一個小案例：利用js+html實現下圍棋操作其中有段程式碼 var s=((x-9)%9?0:(x-9)/9)+1+(((y-9)%9?0:(y-9)/9)+1)*3; 是判斷19*19棋盤上的各座標點的背景圖片的通過一個三目運算子

JavaScript學習之小白篇（五-函式的作用域及建立物件）

好好學習，天天向上。Are you ready? 一、作用域及作用域鏈 1. 什麼是作用域？ 2. JS在ES5這個版本中有哪些作用域？ 1》script作用域（全域性作用域）宣告在全域性作用域的變數，叫全域性變數，同時也是window物件的屬性宣告在全域性作用域的函式，叫全域性函

JavaScript螢幕滑動小視窗

相關推薦