整合營銷服務(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ū)留言哦，歡迎大家點評。
謝謝大家一直以來的支持。
使用第三方瀏覽器過程中，前進(jìn)、后退、刷新、新建、關(guān)閉、向下翻頁、向下翻頁等操作都是通過點擊按鈕來完成，第三方瀏覽器一般帶有鼠標(biāo)手勢操作，充分利用這一功能，可以極大的簡化操作而帶來更為便捷的瀏覽體驗。
下面分享一下使用鼠標(biāo)手勢在360瀏覽器中的操作方法。
所謂的鼠標(biāo)手勢，就是屏幕上按住鼠標(biāo)右鍵不動，來畫特定的運行軌跡，以實現(xiàn)特定的功能。
1.1后退
在瀏覽網(wǎng)頁過程中，后操作操作是使用相當(dāng)頻繁的操作步驟，一般操作我們會直接點擊瀏覽器的后退按鈕，但如何使用鼠標(biāo)手勢，只需按住鼠標(biāo)右鍵不動，向左滑動即可實現(xiàn)后退的目的。
1.2前進(jìn)
進(jìn)行的后退操作，要進(jìn)行前進(jìn)操作，同樣只需按住鼠標(biāo)右鍵不動，向右滑動網(wǎng)頁就前進(jìn)到剛才瀏覽的界面。
1.3向上翻頁
按住鼠標(biāo)右鍵不動，向上滑動，網(wǎng)頁就向上翻一頁。
1.4 向下翻頁
按住鼠標(biāo)右鍵不動，向下滑動，網(wǎng)頁就向下翻一頁。
2.1定位到頁面頂部
按住鼠標(biāo)右鍵不動，先向下滑動再向上滑動，就可以回到網(wǎng)頁的最頂部。
2.2定位到頁面底部
按住鼠標(biāo)右鍵不動，先向上滑動再向下滑動，就可以回到網(wǎng)頁的最底部。
2.3關(guān)閉當(dāng)前頁面
按住鼠標(biāo)右鍵不動，先向左下方滑動再向右滑動，就可以把當(dāng)面頁面關(guān)閉。
2.4刷新當(dāng)前頁面
常規(guī)操作是按f5或者右鍵點擊刷新，用鼠標(biāo)手勢是按住鼠標(biāo)右鍵不動，先向右滑動再向下滑動。
2.5自定義手勢
如果以上手勢你覺得不合適你的習(xí)慣，你在瀏覽器設(shè)置可以自定義，以達(dá)到你想的效果。
以上就是鼠標(biāo)手勢在瀏覽網(wǎng)頁時的應(yīng)用，充分利用鼠標(biāo)手勢可以提高效率，減少操作量，是一種新的瀏覽體驗！文中錯誤及不足在所難免，希望你批評指正。
T之家 3 月 6 日消息，根據(jù)微軟官方披露的 Microsoft Edge 策略支持文檔，微軟計劃最早在 Edge 112 版本中添加鼠標(biāo)手勢功能。
目前，這一功能已出現(xiàn)在 Edge 瀏覽器的 Dev 預(yù)覽版灰度測試中，IT之家小伙伴可在設(shè)置中開啟鼠標(biāo)手勢，并進(jìn)行高度自定義。
從圖中可以看到，Edge 瀏覽器的鼠標(biāo)手勢包含十多項操作，每一項都可以自定義功能。
微軟表示，此功能為用戶提供了一種簡單的方法來完成任務(wù)，例如向前或向后滾動、打開新選項卡、刷新頁面等。他們可以通過按住鼠標(biāo)右鍵在網(wǎng)頁上繪制某些模式來完成任務(wù)，而不是單擊按鈕或使用鍵盤快捷方式。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
