2019獨角獸企業重金招聘Python工程師標準>>>

效果地址：

首先 腳本創建需要彈出的窗體

?function create_float_window() {

? ? ? ? var float_window_html = '';

? ? ? ? float_window_html += '<div id="float_window">' +

? ? ? ? ? ? ? ? '<input id = "clear" type="button"/>' +

? ? ? ? ? ? ? ? '<input id = "cancel" οnclick="clear_float_window()" type="button"/>' +

? ? ? ? ? ? ? ? '<input id = "save" οnclick="clear_float_window()" type="button"/>' +

? ? ? ? ? ? ? ? '</div>';

? ? ? ? var float_window = document.createElement('div');

? ? ? ? float_window.innerHTML = float_window_html;

? ? ? ? document.body.appendChild(float_window);

? ? }

然后：給三個小塊添加樣式：

input{

? ? ? ? ? ? background: none repeat scroll 0 0 #DDDDDD;

? ? ? ? ? ? border:1px solid #FFFFFF;

? ? ? ? ? ? border-radius:4px;

? ? ? ? ? ? height:25px;

? ? ? ? ? ? width:25px

? ? ? ? }

主要是 ?背景色和大小

然后：再給三個小框添加點擊的樣式（鼠標經過）

?input:hover{

? ? ? ? ? ? border-color:#AAAAAA;

? ? ? ? ? ? cursor:pointer;

? ? ? ? }

然后：添加整個窗體的浮動效果

?#float_window{

? ? ? ? ? ? display: inline;

? ? ? ? ? ? backgroud-color:#CCCCCC;

? ? ? ? ? ? border:1px solid #888888; /*加框*/

? ? ? ? ? ? border-radius:5px; /*圓角*/

? ? ? ? ? ? bottom:40px; /*底部邊距*/

? ? ? ? ? ? padding:5px;

? ? ? ? ? ? position: fixed; /*位置綁定*/

? ? ? ? ? ? right: 50px;

? ? ? ? ? ? z-index: 10;

? ? ? ? }

最后添加浮動小框的清除操作

?function clear_float_window() {

? ? ? ? $("#float_window").fadeOut("slow");

? ? ? ? $("#float_window").remove();

? ? }

最后一張實現的效果圖，

轉載于:https://my.oschina.net/NV9rBbk/blog/196490

總結

以上是生活随笔為你收集整理的浮动小窗口的学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。