信息中心

提供网站前端、SEO、APP和公众号小程序开发技术信息

首页 >  网站前端

采用JavaScript实现图片跟随鼠标案例晃动不卡顿特效

文章分类: 网站前端 浏览量:198 发布时间:2020-04-20 21:03:17

本文提供采用JavaScript实现图片跟随鼠标案例晃动特效,特效可以参考珠海网站建设www.zhuseo.com首页的幻灯片和服务页面的特效,效果非常好看。
JS 实现图片跟随鼠标的移动和晃动

HTML代码部分:

<img src="/templets/default/bnr/1-3.png" alt="珠海APP开发作品展示">  
 </div>  
 <div id="dd" class="fadeIn animated dd" >  
 <img src="/templets/default/bnr/1-4.png" alt="珠海网站建设作品展示" >  
 </div>  
 <div id="ee" class="fadeIn animated ee" >  
 <img src="/templets/default/bnr/1-5.png" alt="珠海微信公众号开发作品展示">  
 </div>  
 <div id="ff" class="fadeIn animated ff" >  
 <img src="/templets/default/bnr/1-6.png" alt="珠海微信小程序开发作品展示">  
 </div>  
 <div id="gg" class="fadeIn animated gg" >  
 <img src="/templets/default/bnr/1-7.png" alt="珠海网站建设移动端高端作品展示">  
 </div>  
 <div class="fadeIn animated hh" >  
 <img src="/templets/default/bnr/1-8.png" alt="背景线条">  
 </div>  
 

JS 代码部分:

<script type="text/javascript">  
 document.onmousemove = function (e) {  
 e = e||window.event;  
 var x = 0.5-e.clientX/document.body.offsetWidth;  
 var y = 0.5-e.clientY/document.body.offsetHeight;  
 document.getElementById("dd").style.transform ="translate("+x*-50+"px,"+y*-50+"px)";  
 document.getElementById("ee").style.transform ="translate("+x*-50+"px,"+y*-50+"px)";  
 document.getElementById("ff").style.transform ="translate("+x*-50+"px,"+y*-50+"px)";  
 document.getElementById("gg").style.transform ="translate("+x*-50+"px,"+y*-50+"px)";  
 };  
 </script>  
 

说明:
1.具体代码可以在首页或者服务页面,直接右键查看源代码即可。
2.在HTML代码部分,注意 id="",这里必须是id不能是class。
3.图片的css必须是position是absolute,当然,也可以不用图片,我们用background:url的背景图片形式来代替,这样会省很多图片的css样式问题。
4.上面的JS代码都不要动,仅仅换id名称(里面的dd  ee  ff  gg)就行,其中var x 代表X轴的比例,0.5的数值可以按照自己的需求更改,var y轴同理。
5.特别注意,一单有了这个JS,千万就不能用那个变换css3了,如果加了transition:0.5s类是变换特效,会造成图片跟随鼠标晃动的过程中被transition影响,导致一直卡顿卡顿的。

以上就是采用JavaScript实现图片跟随鼠标案例晃动不卡顿特效的代码和说明,仅供大家参考。

7*24服务电话(以解决问题为最终目标)

173-0756-4526

直接负责:MR.潘:17307564526

技术负责:MR.王:18186226660

邮箱:694394062#qq.com
地址:珠海香洲区紫荆路振国巷9号科汇大厦

COPYRIGHT © 2010-2020 蓝黛科技珠海网站建设 珠海SEO www.zhuseo.com ALL RIGHTS RESERVER 版权所有 粤ICP备17099728号-1