2. 程式人生 > >jquery實現的一個網頁飄窗小外掛

jquery實現的一個網頁飄窗小外掛

阿新 • • 發佈：2019-02-14
//定義外掛 !function($){ /** * Description: jquery飄窗外掛，可自適應瀏覽器寬高的變化 * Author: YZCS * CreateTime: 2015-04-25 * param: args={startL:default, startT:default, angle:-Math.PI/4, speed: 125} * 引數說名: startL飄窗初始時距離左邊的距離, startT飄窗初始化距離頂部的距離, angle飄窗初始運動方向, speed運動速度(px/s) * CopyRight: GPL */
$.fn.autoMove = function(args){ //先定義一些工具函式判斷邊距 function isTop(pos, w_w, w_h, d_w, d_h){//飄窗到達上邊距 if(pos.top<=0){ return true; }else{ return false; } } function
isBottom(pos, w_w, w_h, d_w, d_h){//飄窗到達下邊距 if(pos.top>=(w_h-d_h)){ return true; }else{ return false; } } function isLeft(pos, w_w, w_h, d_w, d_h){//飄窗到達左邊距 if(pos.left<=0
){ return true; }else{ return false; } } function isRight(pos, w_w, w_h, d_w, d_h){//飄窗到達右邊距 if(pos.left>=(w_w-d_w)){ return true; }else{ return false; } } return this.each(function(){ var w_w = parseInt($(window).width()), w_h = parseInt($(window).height()), d_w = parseInt($(this).width()), d_h = parseInt($(this).height()), d_l = (w_w-d_w)/2, d_t = (w_h-d_h)/2, max_l = w_w - d_w; max_t = w_h - d_h; //位置及引數的初始化 var setobj = $.extend({startL:d_l, startT:d_t, angle:Math.PI/4, speed:100}, args); $(this).css({position: 'absolute', left: setobj['startL']+'px', top: setobj['startT']+'px'}); var position = {left: setobj['startL'], top: setobj['startT']};//飄窗位置物件 var that = $(this); var angle= setobj.angle; var time = 10;//控制飄窗運動效果，值越小越細膩 var step = setobj.speed * (time/1000);//計算運動步長 var decoration = {x:step*Math.cos(angle), y:step*Math.sin(angle)};//計算二維上的運動增量 var mvtid; $(window).on('resize', function(){//視窗大小變動時重新設定運動相關引數 w_w = parseInt($(window).width()), w_h = parseInt($(window).height()), max_l = w_w - d_w; max_t = w_h - d_h; }); function move(){ position.left += decoration.x; position.top += decoration.y; if(isLeft(position, w_w, w_h, d_w, d_h)||isRight(position, w_w, w_h, d_w, d_h)){ decoration.x = -1*decoration.x; } if(isRight(position, w_w, w_h, d_w, d_h)){ position.left = max_l; } if(isTop(position, w_w, w_h, d_w, d_h)||isBottom(position, w_w, w_h, d_w, d_h)){ decoration.y = -1*decoration.y; } if(isBottom(position, w_w, w_h, d_w, d_h)){ position.top = max_t; } //that.css({left:position.left, top:position.top}); that.animate({left:position.left, top:position.top}, time);//改用jquery動畫函式使其更加平滑 mvtid = setTimeout(move, time);//遞迴呼叫，使飄窗連續運動 } move();//觸發動作 that.on('mouseenter', function(){ clearTimeout(mvtid) });//新增滑鼠事件 that.on('mouseleave', function(){ move() }); }); }//end plugin definition }(jQuery);

相關推薦

jquery實現的一個網頁飄窗小外掛

//定義外掛 !function($){ /** * Description: jquery飄窗外掛，可自適應瀏覽器寬高的變化 * Author: YZCS * CreateTime: 2015-04-25

jquery 實現一個頁面多個tab頁

無法 text mage solid 出現 none poi code tle <!DOCTYPE html ><html ><head><meta http-equiv="Content-Type" content="text/h

如何用CSS和jQuery實現一個側滑導航菜單

his 事件監聽 也有 font ajax size add tar 出現 為了建立導航菜單，讓我們先看看html結構：<!DOCTYPE html><html lang="en"><head> <meta charset="U

jQuery實現一個簡單的購物車功能

名稱 展示 -1 set margin for button ans return 最近由於工作需要的原因，開始系統學習jQuery的知識，然後跟著一個視頻教程做了一個購物車的功能，現總結如下。 第一步：準備HTML頁面，代碼如下： <!DOCTYPE html P

jquery實現從網頁底部到網頁頂部的程式碼

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

Android-實現一個簡單的自動翻譯外掛

實現一個簡單的自動翻譯外掛 最近在開發專案是要將Android相關的資源進行國際化，需要將values目錄中所有相關的字串資源(中文)，生成匹配的一套英文且儲存在values-en目錄；當然國際化不僅僅是要英文還要提供臺灣等其他語言，這裡為了演示方便，只說下如

jQuery實現一個簡單的數字時鐘

 <!doctype html> <html lang="en">  <head>   <meta charset="UTF-8">   <meta name="Generator" content="EditPlus®

JQuery實現文字無縫滾動效果(Marquee外掛)

                推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。此jquery外掛，依託jquery庫，能實現各種滾動效果，且讓HTML程式碼符合W3C標準。官方演示，如下： Demo使用方法如下：1、載入javascript。<scripttype="te

JQuery實現文字無縫滾動效果 Marquee外掛

推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。 此jquery外掛，依託jquery庫，能實現各種滾動效果，且讓HTML程式碼符合W3C標準。 官方演示，如下： Demo 使用方法如下： 1、載入javascript。 &

Swift基礎之實現一個鏤空圖片的小Demo

前兩天看了別人的文章，涉及到了鏤空的展示，所以我在這裡把實現的內容寫成Swift語言的小Demo，供大家欣賞首先，需要建立導航檢視，然後建立兩種展示方式的按鈕let vc = ViewController();        let nav = UINavigationCon

jQuery 自定義網頁滾動條樣式外掛 mCustomScrollbar 的介紹和使用方法

系統預設的滾動條樣式，真的已經看的夠噁心了。試想一下，如果在一個很有特色和創意的網頁中，出現了一根系統中預設的滾動條樣式，會有多麼的彆扭。 為了自己定義網頁中的滾動條的方法，我真的已經找了很久了，就目前尋找的成果來說，找到了兩個比較不錯的 jQuery 外掛：jScrollPane 和 mCustomSc

用Axis2c 實現一個Web service 的小demo程式過程詳解

/*    * Copyright 2004,2005 The Apache Software Foundation.    *    * Licensed under the Apache License, Version 2.0 (the "License");    * you 

jQuery——實現一個3D動態輪播圖

先看效果圖(挺好看的小妹妹，製作完gif圖就這麼醜了)：css程式碼：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

實現一個隨機點名的小程式 ,並且將方法功能獨立出來,減少冗餘

import java.util.Scanner; import java.util.Random; /* 實現隨機點名器 1. 儲存所有學生姓名 2. 預覽所有學生姓名,遍歷陣列 3. 隨機數作為索引,到陣列中找元素 將功能獨立出來, 作成方法,呼叫方法即可

使用jQuery實現的網頁版的個人簡歷

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

如何使用Java語言實現一個網頁爬蟲

　網路上有許多資訊，我們如何自動的獲取這些資訊呢？沒錯，網頁爬蟲~! 在這篇博文中，我將會使用java語言一步一步的編寫一個原型的網頁爬蟲，其實網頁爬蟲並沒有它聽起來那麼難。緊跟我的教程，我相

從無到有實現一個網頁計算器

// 計算器建構函式，主入口 var Calculator = function Calculator () { // 左側數值 this.left = null; // 右側數值 this.right = null; // 運算子 this.operator = null; // 當前輸入模

簡單實現一個JSONP協議的小例子

以下內容參考於文章（http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html）實現的小例子，經過這篇文章和自己實現的例子，對jsonp有了更深層的理解，感謝 言歸正傳，以下是實現過程

使用jquery實現一個生成某個DOM元素的xpath函式

開發十年，就只剩下這套架構體系了！ >>>   

一個實現瀏覽器網頁與本地程式之間進行雙向呼叫的輕量級、強相容、可擴充套件的外掛開發平臺—本網通

       通過本網通外掛平臺可實現在網頁中的JavaScript指令碼無障礙訪問本地電腦的硬體、呼叫本地系統的API及相關元件，同時可徹底解決ActiveX元件在Chrome、FireFox、Opera、Edge、Safari等瀏覽器各版本的相容使用問題。 系統相容性：