1. 程式人生 > >實現瀏覽器-右下角-小廣告功能(您有新的訊息)

實現瀏覽器-右下角-小廣告功能(您有新的訊息)

<script language="javascript">
    var Message={
    set: function() {//最小化與恢復狀態切換
    var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'恢復'];
    this.minbtn.status=set[0];
    this.win.style.borderBottomWidth=set[1];
    this.content.style.display =set[2];
    this.minbtn.innerHTML =set[3]
    this.minbtn.title = set[4];
    this.win.style.top = this.getY().top;
    },
    close: function() {//關閉
    this.win.style.display = 'none';
    window.onscroll = null;
    },
    setOpacity: function(x) {//設定透明度
    var v = x >= 100 ? '': 'Alpha(opacity=' + x + ')';
    this.win.style.visibility = x<=0?'hidden':'visible';//IE有絕對或相對定位內容不隨父透明度變化的bug
    this.win.style.filter = v;
    this.win.style.opacity = x / 100;
    },
    show: function() {//漸顯
    clearInterval(this.timer2);
    var me = this,fx = this.fx(0, 100, 0.1),t = 0;
    this.timer2 = setInterval(function() {
    t = fx();
    me.setOpacity(t[0]);
    if (t[1] == 0) {clearInterval(me.timer2) }
    },6);//10 to 6
    },
    fx: function(a, b, c) {//緩衝計算
    var cMath = Math[(a - b) > 0 ? "floor": "ceil"],c = c || 0.1;
    return function() {return [a += cMath((b - a) * c), a - b]}
    },
    getY: function() {//計算移動座標
    var d = document,b = document.body, e = document.documentElement;
    var s = Math.max(b.scrollTop, e.scrollTop);
    var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;
    var h2 = this.win.offsetHeight;
    return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'}
    },
    moveTo: function(y) {//移動動畫
    clearInterval(this.timer);
    var me = this,a = parseInt(this.win.style.top)||0;
    var fx = this.fx(a, parseInt(y));
    var t = 0 ;
    this.timer = setInterval(function() {
    t = fx();
    me.win.style.top = t[0]+'px';
    if (t[1] == 0) {
    clearInterval(me.timer);
    me.bind();
    }
    },6);//10 to 6
    },
    bind:function (){//繫結視窗滾動條與大小變化事件
    var me=this,st,rt;
    window.onscroll = function() {
    clearTimeout(st);
    clearTimeout(me.timer2);
    me.setOpacity(0);
    st = setTimeout(function() {
    me.win.style.top = me.getY().top;
    me.show();
    },100);//600 mod 100
    };
    window.onresize = function (){
    clearTimeout(rt);
    rt = setTimeout(function() {me.win.style.top = me.getY().top},100);
    }
    },
    init: function() {//建立HTML
    function $(id) {return document.getElementById(id)};
    this.win=$('msg_win');
    var set={minbtn: 'msg_min',closebtn: 'msg_close',title: 'msg_title',content: 'msg_content'};
    for (var Id in set) {this[Id] = $(set[Id])};
    var me = this;
    this.minbtn.onclick = function() {me.set();this.blur()};
    this.closebtn.onclick = function() {me.close()};
    this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支援webdings字型
    this.minbtn.innerHTML=this.char[0];
    this.closebtn.innerHTML=this.char[2];
    setTimeout(function() {//初始化最先位置
    me.win.style.display = 'block';
    me.win.style.top = me.getY().foot;
    me.moveTo(me.getY().top);
    },0);
    return this;
    }
    };
    Message.init();
    </script>
</body>
</html>

相關推薦

實現瀏覽器-右下-廣告功能訊息

<script language="javascript">     var Message={     set: function() {//最小化與恢復狀態切換     var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化

IE瀏覽器右下廣告怎麼去除

1 開啟瀏覽器,進入瀏覽器設定視窗,選擇工具--internet選項 2 進入internet選項視窗之後,選擇“安全視窗”,並點選“自定義級別”。 3 找到活動指令碼,並選擇“禁用”。點選確定,關閉視窗。OK,重新整理頁面,小廣告消失。

道雲筆記去除右下廣告

版本 Windows桌面版 V6.0.0 路徑 D:\Youdao\YoudaoNote\theme\default\skin.xml 刪除 約2985行 <PanelAd Bounds="0,0,0,161" DockStyle="botto

問題7:如何實現用戶的歷史記錄功能最多n條

NPU app while less ase 退出 添加 數字 pri 實例:制作猜字遊戲,添加歷史記錄功能,顯示用戶最近猜過的數字 解決方案:使用容量為n的隊列存儲歷史記錄 使用標準庫colections中的deque,一個雙端循環隊列 程序退出前,可以使用pick

從左上角走到右下的走法數量中間障礙

Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How many unique paths would there be? An obstacle and empty s

程式購物車功能支援手動輸入數量以及側邊欄和列表欄聯動的實現

小組剛完成一個小程式專案,第一版正式釋出了,過程中也遇到了很多問題,這裡記錄一下我負責的模組中的購物車功能的實現過程。後期再把其他小夥伴的模組也一併貼上來分析一下,自己也學習一下他們的獨門技能!效果圖如下: 在這裡,計數器、購物籃做成元件用於複用,由於左右聯動的功能

java實現桌面右下彈窗模仿,類似於qq訊息彈窗

最近需要一個java實現桌面彈窗的小功能,類似於電腦桌面右下角的小廣告一樣的功能,在csdn上找到一個很好的一個,功能很多,我去除了一點不需要的程式碼,改了下外觀等。 原作者:https://www.cnblogs.com/hgxbo/p/5508384.html 修改後的

Javascript中document.execCommand()的用法 ( 實現瀏覽器菜單的很多功能 )

靈活 css true htm upload 目錄 listbox 而不是 lds document.execCommand()方法處理Html數據時常用語法格式如下:document.execCommand(sCommand[,交互方式, 動態參數])其中:sComman

jQuery實現網頁右下懸浮層提示

off eight slide ring height containe htm enter else 最近有同事提到類似網頁右下角的消息懸浮提示框的制作。我之前也做過一個類似的例子,很簡單。是仿QQ消息。現在感覺之前的那個例子只是說了實現原理,整體上給你的感覺還是太醜,今

Struts2+Spring+Hibernate實現員工管理增刪改查功能之ssh框架整合

pri support scrip ext ack efault ring src 兩張 前言 轉載請標明出處:http://www.cnblogs.com/smfx1314/p/7795837.html 本項目是我寫的一個練習,目的是回顧ssh框架的整合以及

日常學習隨筆-用鏈表的形式實現普通二叉樹的新增、查找、遍歷前、中、後序等基礎功能側重源碼+說明

新增 rabl super 例子 信息 count TP title 處理 一、二叉樹 1、二叉樹的概念 二叉樹是每個節點最多有兩個子樹的樹結構。通常子樹被稱作“左子樹”(left subtree)和“右子樹”(right subtree),其次序不能任意顛倒。 2、性質

關於去除 000webhost 主機免費版右下廣告條水印的解決方案

前言 000webhost 虛擬主機的確挺好用,也免費。但美中不足的是他會給你在右下角加一個 “Powered By 000webhost" 的水印(如下圖1),很影響網站體驗。而且這東西在不科學上網的情況下經常背景還載入不出來,是很醜的一條(如下圖2)。     &n

使用jQuery實現瀏覽器滾動條返回頂部功能

<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"/> <title ng-bind="title">使用jQuery實現返回頂部功能</ti

給定一個m*n的格子或棋盤,問從左上角走到右下的走法總數每次只能向右或向下移動一個方格邊長的距離。

比如一個2*3的矩陣, 1 2 3 4 5 6 從1出發走到6,則可能的走法為:1 2 3 6, 1 2 5 6, 1 4 5 6共有三種。 這道題可以看成是深度優先遍歷一顆樹。解法為: public class MatrixTraversal { public s

頁面右下廣告案例

 <script src="jquery-1.8.3.js"></script>    <script type="text/javascript">      &

PHP實現微信開發中提現功能企業付款到使用者零錢

一.實現該功能目的     這幾天在小程式裡要實現使用者從系統中提現到零錢的功能,查了一下文件可以使用 企業付款到使用者零錢 來實現;  官方文件:https://pay.weixin.qq.com/wiki/doc/api/tools/mch_pay.php?chapt

mvp實現Xrecyclerview的上下拉和購物車功能仿餓了麼

  首先先匯入咱們的依賴 implementation 'com.android.support:design:28.0.0' implementation 'com.google.code.gson:gson:2.8.5' implementation 'cn.b

微信程式上傳圖片功能附後端程式碼

幾乎每個程式都需要用到圖片,在小程式中我們可以通過image元件顯示圖片。 當然小程式也是可以上傳圖片的,微信小程式文件也寫的很清楚。 上傳圖片 首先選擇圖片 通過wx.chooseImage(OBJECT)實現 官方示例程式碼 ? 1 2

矩陣中從左上角到右下最短路徑五種方法

題目:給定一個n*m的矩陣,矩陣中元素非負,從左上角到右下角找一條路徑,使得路徑上元素之和最小,每次只能向右或者向下走一個方格。如下圖所示:最短路徑是圖中綠色部分的元素。 方法一(轉換為圖中的最短路徑):我們可以把矩陣中的每個方格當做圖中的一個頂點,相鄰的方格之間

算法系列- 棧:如何實現瀏覽器的前進和後退功能

整理自極客時間-資料結構與演算法之美。原文內容更完整具體,且有音訊。購買地址: 1.如何理解棧 關於“棧”,有一個非常貼切的例子,就是一摞疊在一起的盤子。我們平時放盤子的時候,都是從下往上一個一個放;取的時候,我們也是從上往下一個一個地依次取,不能從中間任意抽出。後進先出,先進後出