欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3讓div隨鼠標(biāo)移動而抖動起來

  發(fā)布時間:2014-02-10 16:13:25   作者:佚名   我要評論
一些背景圖片隨著鼠標(biāo)的移動的反向的移動,感覺跟不錯,下面為大家介紹喜愛使用css3讓div隨鼠標(biāo)移動而抖動起來,感興趣的朋友可以參考下
最近發(fā)現(xiàn)一個網(wǎng)站,感覺用戶體驗(yàn)不錯,特別是一些背景圖片隨著鼠標(biāo)的移動的反向的移動,感覺跟不錯,于是就試著寫了個小demo模仿一下

復(fù)制代碼
代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.layer {
width:400px;
height:400px;
background-color:#FF7373;
transa
}
.A {
position: absolute;
top: 23px;
left: 10px;
}
.B {
position: absolute;
top: 223px;
left: 516px;
}
.C {
position: absolute;
top: 384px;
left: 1000px;
}
</style>
</head>
<body>
<div class="layer A"></div>
<div class="layer B"></div>
<div class="layer C"></div>
</body>
<script type="text/javascript">
var items = document.getElementsByClassName("layer");
document.addEventListener('mousemove', function (evt){
var x = evt.clientX;
var y = evt.clientY;
//console.log(x);
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
var halfWidth = winWidth / 2;
var halfHeight = winHeight / 2;
var rx = x - halfWidth;
var ry = halfHeight - y;
var length = items.length;
var max = 30;
for (var i = 0 ; i < length ; i++) {
var dx = (items[i].getBoundingClientRect().width/max)*(rx / -halfWidth);
var dy = (items[i].getBoundingClientRect().height/max)*(ry / halfHeight);
items[i].style['transform'] = items[i].style['-webkit-transform'] = 'translate('+dx+'px,'+dy+'px)';
}
}, false);
</script>
</html>

說明一下分別拿到每個div的長度和寬度,通過比例算出相對于窗口的合適的偏移量,max是每個div左右偏移最多不超過的值

效果展示

相關(guān)文章

  • css3 transform過渡抖動問題解決

    這篇文章主要介紹了css3 transform過渡抖動問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2020-10-23
  • css3動畫效果抖動解決方法

    這篇文章主要介紹了css3動畫效果抖動解決方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-03
  • CSS 控制Html頁面高度導(dǎo)致抖動問題的原因

    CSS 控制Html頁面高度導(dǎo)致抖動,這類由高度導(dǎo)致頁面抖動的問題,其實(shí)究其根本原因是滾動條是否顯示導(dǎo)致的
    2014-08-11
  • CSS3新浪微博模板商店鼠標(biāo)懸停圖片抖動特效

    一款鼠標(biāo)懸停在圖片上,圖片搖晃抖動的CSS3特效代碼
    2014-03-06
  • CSS 控制因Html頁面高度導(dǎo)致抖動的問題解決方法

    由高度導(dǎo)致頁面抖動的問題,其實(shí)究其根本原因是滾動條是否顯示導(dǎo)致的,具體解決方法如下,有類似情況的朋友可以參考下,希望對大家有所幫助
    2013-08-23
  • CSS3實(shí)現(xiàn)紅包抖動效果

    這篇文章主要介紹了CSS3實(shí)現(xiàn)紅包抖動效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-12-23

最新評論