使用javascript如何为鼠标设置特效
短信预约 -IT技能 免费直播动态提醒
本篇文章给大家分享的是有关使用javascript如何为鼠标设置特效,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
JavaScript是什么
JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
1、网页上制作添加鼠标点击特效
<script type="text/javascript">var a_idx = 0;jQuery(document).ready(function($) {$("body").click(function(e) {var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国","敬业", "诚信", "友善", "手麻了", "歇会儿");var $i = $("<span/>").text(a[a_idx]);a_idx = (a_idx + 1) % a.length;var x = e.pageX,y = e.pageY;$i.css({"z-index": 9999,"top": y - 20,"left": x,"position": "absolute","font-weight": "bold","color": "#ff6651"});$("body").append($i);$i.animate({"top": y - 180,"opacity": 0},1500,function() {$i.remove();});});});</script>
2、网页上制作鼠标跟随的特效
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script></script></head><body><div id="div1">鼠标跟随文字</div><script>var div=document.getElementById("div1");document.οnmοusemοve=function(event){pos(div,10,20,event);}function pos(o,x,y,event){var posX=0; var posY=0;var e=event || window.event;//兼容IE浏览器if(e.pageX || e.pageY)//如果支持pageX或者pageY{posX=e.pageX;posY=e.pageY;}else if(e.clientX || e.clientY){posX=e.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;posY=e.clientY+document.documentElement.scrollTop+document.body.scrollTop;}o.style.position="absolute";o.style.left=(posX+x)+"px";o.style.top=(posY+y)+"px";}</script></body></html>
以上就是使用javascript如何为鼠标设置特效,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341