整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
面文章有制作水晶魔方，這次我們升級一下它的功能，通過鼠標(biāo)控制魔方旋轉(zhuǎn)。
大家先看效果
CSS3之3D魔方鼠標(biāo)控制酷炫效果
這酷炫的效果，你怎么看？
這次效果，咱們需要用JS實現(xiàn)。主要是監(jiān)聽鼠標(biāo)事件，計算鼠標(biāo)滑動距離，改變魔方的rotateX、rotateY
CSS3之3D魔方鼠標(biāo)控制酷炫效果
JS有哪些鼠標(biāo)事件呢？
1、click：單擊事件。
2、dblclick：雙擊事件。
3、onmousedown：鼠標(biāo)按下時觸發(fā)事件，不管按住左鍵/右鍵還是滑輪都可以
4、onmousemove：鼠標(biāo)移動實時觸發(fā)事件
5、onmouseup：鼠標(biāo)松開時觸發(fā)事件
6、mousemove：鼠標(biāo)移動事件。
7、mouseover：移入事件。
8、mouseout：移出事件。
9、mouseenter：移入事件。
10、mouseleave：移出事件。
11、contextmenu：右鍵事件。
那需要監(jiān)聽哪些事件呢？了解了他們的作用，我們就知道如何處理了。
鼠標(biāo)按下時，記錄鼠標(biāo)當(dāng)前所處位置，移動時又可以獲取實時位置，用移動時獲取的實時位置減去鼠標(biāo)按下時的位置，就可以得到鼠標(biāo)移動的相對位置。鼠標(biāo)松開，可以結(jié)束計算。
CSS3之3D魔方鼠標(biāo)控制酷炫效果
下面看看具體代碼實現(xiàn)
這里用到了Jquery，大家自行下載使用
// 角度初始化
var RotateY = 0;
var RotateX = 0;
// 用個變量來攔截onmousemove，
var flag = false;
// 起點位置
var old_x = 0;
var old_y = 0;
document.onmousedown = function (e) {
flag = true;
// 按下鼠標(biāo)時，記錄起點位置
old_x = e.pageX;
old_y = e.pageY;
}
document.onmousemove = function (e) {
// 必須是按下后移動才有效果
if (flag) {
/**
* 新位置減去老位置
* 得到鼠標(biāo)移動的X/Y距離
*/
var _x = e.pageX - old_x;
var _y = e.pageY - old_y;
/**
* 除以70得到需要旋轉(zhuǎn)的角度
* 除數(shù)越大，鼠標(biāo)移動后旋轉(zhuǎn)的角度越小，
* 相反，除數(shù)是1，鼠標(biāo)輕輕拖動，也會旋轉(zhuǎn)的非常厲害
*/
RotateY += _x / 70;
RotateX += -(_y / 70);
/**
* 添加transform，盒子進(jìn)行3D旋轉(zhuǎn)
*/
$('.box').css({
transition: 'linear',
transform: 'rotateX(' + RotateX + 'deg) rotateY(' + RotateY + 'deg)'
});
}
};
document.onmouseup = function () {
flag = false;
// 鼠標(biāo)抬起時結(jié)束
};
這樣就可以實現(xiàn)魔方跟隨鼠標(biāo)移動旋轉(zhuǎn)了，但是大家可以看到上方的示例圖，有一個展開和收起的效果，是如何實現(xiàn)的呢？
之前咱們的魔方圖是這樣的
CSS3之3D魔方鼠標(biāo)控制酷炫效果
現(xiàn)在，畫出2個魔方，一個小一點，使小的魔方剛好在大魔方中心位置
<div class="content">
<div class="box">
<!-- 外層魔方 -->
<div class="out-front">前</div>
<div class="out-back">后</div>
<div class="out-left">左</div>
<div class="out-right">右</div>
<div class="out-top">上</div>
<div class="out-bottom">下</div>
<!-- 內(nèi)層魔方 -->
<span class="in-front"></span>
<span class="in-back"></span>
<span class="in-left"></span>
<span class="in-right"></span>
<span class="in-top"></span>
<span class="in-bottom"></span>
</div>
</div>
按照之前章節(jié)的樣式，進(jìn)行調(diào)節(jié)。使小的魔方剛好在大魔方中心位置。
CSS3之3D魔方鼠標(biāo)控制酷炫效果
樣式如下：
.content {
margin-top: 200px;
perspective: 1000px;
/* 視距 */
}
.box {
width: 200px;
height: 200px;
position: relative;
color: #fffdf5;
font-size: 36px;
font-weight: bold;
text-align: center;
line-height: 200px;
transform-style: preserve-3d;
/* 默認(rèn) 2D */
transition: transform 1s;
/*transform動畫效果*/
/*不讓鼠標(biāo)選中文字*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.box>div {
width: 200px;
height: 200px;
border: 1px solid #FF2869;
position: absolute;
background-color: #333;
opacity: 0.5;
transition: transform 0.4s;
/*transform動畫效果*/
}
.box .out-front {
transform: translateZ(100px);
background: url(./b1.jpg);
background-size: cover;
}
.box .out-back {
transform: translateZ(-100px) rotateY(180deg);
background: url(./b2.jpg);
background-size: cover;
}
.box .out-left {
transform: translateX(-100px) rotateY(-90deg);
background: url(./b3.jpg);
background-size: cover;
}
.box .out-right {
transform: translateX(100px) rotateY(90deg);
background: url(./b4.jpg);
background-size: cover;
}
.box .out-top {
transform: translateY(-100px) rotateX(90deg);
background: url(./b5.jpg);
background-size: cover;
}
.box .out-bottom {
transform: translateY(100px) rotateX(-90deg);
background: url(./b6.jpg);
background-size: cover;
}
.box>span {
display: block;
width: 100px;
height: 100px;
border: 1px solid #FF2869;
position: absolute;
top: 50px;
left: 50px;
}
.box .in-front {
transform: translateZ(50px);
background: url(./b1.jpg);
background-size: cover;
}
.box .in-back {
transform: translateZ(-50px) rotateY(180deg);
background: url(./b2.jpg);
background-size: cover;
}
.box .in-left {
transform: translateX(-50px) rotateY(-90deg);
background: url(./b3.jpg);
background-size: cover;
}
.box .in-right {
transform: translateX(50px) rotateY(90deg);
background: url(./b4.jpg);
background-size: cover;
}
.box .in-top {
transform: translateY(-50px) rotateX(90deg);
background: url(./b5.jpg);
background-size: cover;
}
.box .in-bottom {
transform: translateY(50px) rotateX(-90deg);
background: url(./b6.jpg);
background-size: cover;
}
CSS3之3D魔方鼠標(biāo)控制酷炫效果
然后我們通過JS控制展開和收起效果
var clickNum = 1; //點擊次數(shù)
$('.box').children().click(function () {
// 如果點擊次數(shù)是奇數(shù)就展開，偶數(shù)就收起
if (clickNum % 2 == 0) {
// 收起
$('.out-front').css({
transform: 'translateZ(100px)'
});
$('.out-back').css({
transform: 'translateZ(-100px) rotateY(180deg)'
});
$('.out-left').css({
transform: 'translateX(-100px) rotateY(-90deg)'
});
$('.out-right').css({
transform: 'translateX(100px) rotateY(90deg)'
});
$('.out-top').css({
transform: 'translateY(-100px) rotateX(90deg)'
});
$('.out-bottom').css({
transform: 'translateY(100px) rotateX(-90deg)'
});
} else {
// 展開
$('.out-front').css({
transform: 'translateZ(200px)'
});
$('.out-back').css({
transform: 'translateZ(-200px) rotateY(180deg)'
});
$('.out-left').css({
transform: 'translateX(-200px) rotateY(-90deg)'
});
$('.out-right').css({
transform: 'translateX(200px) rotateY(90deg)'
});
$('.out-top').css({
transform: 'translateY(-200px) rotateX(90deg)'
});
$('.out-bottom').css({
transform: 'translateY(200px) rotateX(-90deg)'
});
}
clickNum++;
});
// box 的所有子元素添加鼠標(biāo)手勢樣式
$('.box').children().mouseenter(function () {
$(this).css({ cursor: 'pointer' });
});
OK，這樣我們的 CSS3 3D魔方鼠標(biāo)控制酷炫效果就實現(xiàn)了。
大家學(xué)到了什么？JS鼠標(biāo)事件都了解了吧？CSS3 3D場景都學(xué)會了嗎？
關(guān)注我，學(xué)習(xí)更多前端知識，但不止于前端哦！
小伙伴們，有問題可以評論區(qū)留言哦，歡迎大家點評。
謝謝大家一直以來的支持。
易拖拽
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft; //拖拽距離
disY=oEvent.clientY-oDiv.offsetTop; //拖拽距離
oDiv.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
oDiv.onmouseup=function ()
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>程序問題:鼠標(biāo)拖拽過快,鼠標(biāo)指針與拖拽div對象脫離
解決方法:直接給document加事件(因為div對象范圍太小,鼠標(biāo)移動就與拖拽div對象脫離)
將oDiv改成document對象
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>程序問題: FF下，空Div拖拽Bug(殘影)
解決方法: 阻止默認(rèn)事件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
return false; //阻止默認(rèn)事件(拖動殘影)
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>防止拖出頁面
然大多數(shù)時候，鍵盤黨的電腦高手們都會嫻熟地運(yùn)用各種快捷鍵來提高各種操作的效率，這種方式固然夠快夠精練，但卻需要一定的記憶力和練習(xí)才能積累下來靈活運(yùn)用。
而除快捷鍵以外，我們手上的「鼠標(biāo)」其實也能變成另一個強(qiáng)大好用的效率加·速·器！MouseInc 是一款小巧綠色免費的系統(tǒng)全局鼠標(biāo)手勢軟件，它能為你自定義一些鼠標(biāo)手勢來完成各種常用頻繁的軟件操作，比起快捷鍵也更容易上手，妥妥的裝機(jī)必備輔助工具……
MouseInc 是一款 Windows 上小巧好用且免費綠色的鼠標(biāo)手勢軟件 / 鼠標(biāo)增強(qiáng)輔助工具。類似于 WGestures，可以幫你將鼠標(biāo)打造成實用高效的操作利器，僅用鼠標(biāo)就能完成很多復(fù)雜的功能和動作，讓你使用電腦更加方便，更有效率。
那么什么是「鼠標(biāo)手勢」呢？其實就是按住鼠標(biāo)右鍵不放，然后在屏幕上畫出一個特定的手勢線條，當(dāng)手放開時，鼠標(biāo)手勢軟件會識別出用戶所畫的手勢圖案的不同，來執(zhí)行一組預(yù)定的動作，這樣就能通過鼠標(biāo)來做出類似鍵盤按下“快捷鍵”的作用，比如劃個 L 線來關(guān)閉當(dāng)前窗口。
MouseInc 提供了很多不同的動作和功能供你設(shè)置，而且除了鼠標(biāo)手勢以外，還提供了很多額外的輔助功能，比如截圖、文字識別、創(chuàng)建自定義全局熱鍵、復(fù)制增強(qiáng)、搜索增強(qiáng)等多種實用功能。
雙擊 MouseInc.exe 啟動軟件之后，可以在右下角系統(tǒng)托盤圖標(biāo)里找到它，右鍵選擇“打開設(shè)置”即可調(diào)出設(shè)置界面。如首次啟動時軟件界面為英文，可以點擊右上角的“Lang”將語言修改為“中文簡體”即可。
MouseInc 的鼠標(biāo)手勢能做點什么？
通過 MouseInc 的自定義鼠標(biāo)手勢，我們可以做出很多「動作」，比如：復(fù)制粘貼、關(guān)閉窗口、最大最小化窗口、快速截圖、搜索選中文字、OCR 識別文字、打開文件夾、調(diào)整音量、調(diào)整顯示器亮度等等，而且它還可以通過鼠標(biāo)手勢來「模擬按下快捷鍵」、「運(yùn)行.exe / 批處理」等功能，可以組合起來做出很多不同的功能。
MouseInc 還支持復(fù)合動作，比如選中一個網(wǎng)址，畫 P 直接打開 ping 命令。選中文本以后，畫 S 直接打開瀏覽器搜索選中的文字等。
更多的用途和功能就下載回去細(xì)細(xì)把玩吧，MouseInc 也提供了比較詳細(xì)的文檔可以參考，后面也有演示的視頻。
全局鼠標(biāo)手勢
以前比較流行的鼠標(biāo)手勢是在瀏覽器里作為插件出現(xiàn)的，作用范圍也只限于瀏覽器內(nèi)。而 MouseInc 則能「作用于系統(tǒng)全局」的，你可以將手勢應(yīng)用在任意軟件上，包括瀏覽器，所以它可以代替瀏覽器里的各種鼠標(biāo)手勢插件了。
MouseInc 也可以設(shè)置程序黑名單，在部分應(yīng)用或者游戲等里面，不會啟用鼠標(biāo)手勢防止出現(xiàn)混亂情況。
MouseInc 是純綠色的軟件，軟件體積僅 200 多 KB，無需安裝，單文件無依賴，占用系統(tǒng)資源極低，可以便攜運(yùn)行，隨便放在硬盤或 U 盤里的任何目錄下都能運(yùn)行，所有配置保存在同目錄的 MouseInc.json 文件里。
作者也曾承諾過，MouseInc 將永久免費，而且無廣告、不掃描硬盤、不上傳任何隱私。所以 MouseInc 還是很良心的，值得一試。
話說回來，在大部分使用電腦 (無需頻繁打字) 的時間里，很多人都像我一樣「單手使用鼠標(biāo)」操作電腦。毫不夸張地說，這時鼠標(biāo)手勢的方便程度就會明顯比鍵盤高了！你不必強(qiáng)迫自己用另一只手來按鍵盤，就能實施各種各樣的動作，絕對是懶人必備的神器！習(xí)慣后真的會離不開。
你想想，上網(wǎng)時只需一只手握著鼠標(biāo)就能：左右切換瀏覽器的標(biāo)簽頁、關(guān)閉網(wǎng)頁、刷新、前進(jìn)后退、調(diào)整音量等等都能輕松搞定，這難道還要去按鍵盤嗎？
當(dāng)然了，鼠標(biāo)手勢與鍵盤熱鍵兩者其實并不沖突，我認(rèn)為是互補(bǔ)關(guān)系的。比如在編程或者使用一些較為復(fù)雜的專業(yè)軟件時，功能操作非常多，而鼠標(biāo)手勢是無法定義得太多的，加上雙手頻繁打字的話，按快鍵又比鼠標(biāo)更快，所以快捷鍵的作用還是非常巨大且無法被完全取代的。
而在 MouseInc 里，除了定制鼠標(biāo)手勢外，它其實也提供了「自定義全局快捷鍵」的功能，如果你是鍵盤黨，一樣可以用它來增強(qiáng)你的熱鍵。
所以，如果想要更好地提升工作效率以及電腦使用的便捷程度，我建議是全局鼠標(biāo)手勢 + 快捷鍵一起搭配使用才是王道。
MouseInc 除了鼠標(biāo)手勢的“本行”功能外，還提供了不少特色的其他輔助功能，大家可以多多摸索嘗試：
總之， MouseInc 是一款不可多得的免費系統(tǒng)全局鼠標(biāo)手勢軟件，也是追求高效工作的朋友必備的利器，如果你對鼠標(biāo)手勢的操作有興趣，那么你不應(yīng)該錯過它！
在 WGestures、StrokIt 等同類鼠標(biāo)手勢工具停止更新后，MouseInc 作為一個新力軍還一直保持著更新，加上免費、小巧、省資源以及純綠色的特性，MouseInc 顯得更加值得選擇。比較可惜的是，目前它僅支持 Windows，使用 Mac 的同學(xué)只能眼饞了。原文：https://www.huajclub.com/3302.html
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
