Javascript製作仿蘋果觸控螢幕效果
這次帶給大家Javascript製作仿蘋果觸控螢幕效果，Javascript製作仿蘋果觸控螢幕效果的注意事項有哪些，下面就是實戰案例，一起來看一下。
Javascript製作仿蘋果小白點
直接引入程式碼到頁面即可
程式碼有部分冗餘的地方,有興趣的小夥伴可也自己修改
如果有什麼BUG記得留言 告訴我哦
var new_element_N=document.createElement("style");
new_element_N.innerHTML = '#drager {' +
' position: fixed;' +
' width: 35px;' +
' height: 35px;' +
' background-color: rgba(0, 0, 0, 0.2);' +
' z-index: 10000;' +
' cursor: pointer;' +
' top: 0px;' +
' left: 0px;' +
' border-radius: 30%;' +
' padding: 6px;' +
' }' +
' ' +
' #drager>div {' +
' border-radius: 50%;' +
' width: 100%;' +
' height: 100%;' +
' background-color: rgba(0, 0, 0, 0.3);' +
' transition: all 0.2s;' +
' -webkit-transition: all 0.2s;' +
' -moz-transition: all 0.2s;' +
' -o-transition: all 0.2s;' +
' }' +
' #drager:hover>div{' +
' background-color: rgba(0, 0, 0, 0.6);' +
' } ';
document.body.appendChild(new_element_N);
new_element_N=document.createElement('div');
new_element_N.setAttribute("id","drager");
new_element_N.style.top="100px";
new_element_N.style.left="100px";
new_element_N.innerHTML = ' <div></div>' ;
document.body.appendChild(new_element_N);
//
//
var posX;
var posY;
var screenWidth =document.documentElement.clientWidth;
var screenHeight = document.documentElement.clientHeight;
var fdiv = document.getElementById("drager");
fdiv.onmousedown=function(e)
{
screenWidth =document.documentElement.clientWidth;
screenHeight = document.documentElement.clientHeight;
if(!e){ e = window.event; } //IE
posX = e.clientX - parseInt(fdiv.style.left);
posY = e.clientY - parseInt(fdiv.style.top);
document.onmousemove = mousemove;
}
document.onmouseup = function()//释放时自动贴到最近位置
{
document.onmousemove = null;
if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(screenHeight/2)){//在上半部分
if((parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)<=(screenWidth/2)){//在左半部分
if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//靠近上方
fdiv.style.top="0px";
}else{//靠近左边
fdiv.style.left="0px";
}
}else{//在右半部分
if((parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2)<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//靠近上方
fdiv.style.top="0px";
}else{//靠近右边
fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
}
}
}else{ //下半部分
if((parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)<=(screenWidth/2)){//在左半部分
if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)){//靠近下方
fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
}else{//靠近左边
fdiv.style.left="0px";
}
}else{//在右半部分
if( (screenHeight-(parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight)/2))<=(screenWidth-(parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth)/2)) ){//靠近上方
fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
}else{//靠近右边
fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
}
}
}
}
function mousemove(ev)
{
if(ev==null){ ev = window.event;}//IE
if((ev.clientY - posY)<=0){//超过顶部
fdiv.style.top="0px";
}else if((ev.clientY - posY) >(screenHeight-parseInt(fdiv.clientHeight))){//超过底部
fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
}else{
fdiv.style.top = (ev.clientY - posY) + "px";
}
if((ev.clientX- posX)<=0){//超过左边
fdiv.style.left="0px";
}else if((ev.clientX - posX) >(screenWidth-parseInt(fdiv.clientWidth))){//超过右边
fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
}else{
fdiv.style.left = (ev.clientX - posX) + "px";
}
// console.log( posX +" "+ fdiv.style.left);
}
window.onload = window.onresize = function() { //窗口大小改变事件
screenWidth =document.documentElement.clientWidth;
screenHeight = document.documentElement.clientHeight;
if( (parseInt(fdiv.style.top)+parseInt(fdiv.clientHeight))>screenHeight){//窗口改变适应超出的部分
fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
}
if( (parseInt(fdiv.style.left)+parseInt(fdiv.clientWidth))>screenWidth){//窗口改变适应超出的部分
fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
}
document.onmouseup.apply()
};
fdiv.addEventListener('touchstart', fdiv.onmousedown, false);
fdiv.addEventListener('touchmove', function(event) {
// 如果这个元素的位置内只有一个手指的话
if (event.targetTouches.length == 1) {
event.preventDefault();// 阻止浏览器默认事件，重要
var touch = event.targetTouches[0];
if((touch.pageY)<=0){//超过顶部
fdiv.style.top="0px";
}else if(touch.pageY>(screenHeight-parseInt(fdiv.clientHeight))){//超过底部
fdiv.style.top=(screenHeight-parseInt(fdiv.clientHeight))+"px";
}else{
fdiv.style.top = (touch.pageY-parseInt(fdiv.clientHeight)/2) + "px";
}
if(touch.pageX<=0){//超过左边
fdiv.style.left="0px";
}else if( touch.pageX >(screenWidth-parseInt(fdiv.clientWidth))){//超过右边
fdiv.style.left=(screenWidth-parseInt(fdiv.clientWidth))+"px";
}else{
fdiv.style.left = (touch.pageX-parseInt(fdiv.clientWidth)/2) + "px";
}
}
}, false);
fdiv.addEventListener('touchend', document.onmouseup , false);
fdiv.ondblclick=function(){//双击事件可能在手机端浏览器会与网页缩放事件冲突
alert("发挥你们的想象力吧");
}相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是Javascript製作仿蘋果觸控螢幕效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
建議：優秀JS開源人臉偵測辨識項目
Apr 03, 2024 am 11:55 AM
人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計
股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟
Dec 17, 2023 pm 06:55 PM
股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
win11開啟觸控螢幕教程
Jan 07, 2024 pm 03:05 PM
如果我們的電腦支援平板模式，那麼可以直接切換來開啟觸控屏，如果不支援呢，其實也是可以使用win11觸控鍵盤的，不過無法達到觸控螢幕的效果。 win11開啟觸控螢幕教學：1、先點選底部開始選單，如圖所示。 2.接著開啟開始功能表中的「設定」3、然後點選左邊欄的「個人化」設定。 4.隨後在右邊找到並開啟「觸控鍵盤」5、開啟後就能在其中開啟觸控鍵盤了。 。
PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法
Dec 18, 2023 pm 03:39 PM
隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人
