专栏首页用户7363577的专栏原生js实现div跳动效果---很多炫酷效果的基本原理

原生js实现div跳动效果---很多炫酷效果的基本原理

效果预览:

这块实现起来很简单,原生的js实现更简单。为什么写这个呢?因为这个其实是很多网页动态效果的一个原型,不管是什么大型的网站,其实底层的原理都是一样的,基本思路是,画出DIV,然后载入页面的时候加载到每一个div元素,然后就是控制鼠标的事件,移入和移出的时候执行偏移函数。

不BB,上代码:

div{width: 100px;height: 100px; float: left;margin-left: 2rem;}
<div style="background-color: darkolivegreen;" name="div"></div>
<div style="background-color: darkblue;" name="div"></div>
<div style="background-color: crimson;" name="div"></div>
<div style="background-color: gold;" name="div"></div>
window.onload = function(){
			var div0 = document.getElementsByTagName("div")[0];
			var div1 = document.getElementsByTagName("div")[1];
			var div2 = document.getElementsByTagName("div")[2];
			var div3 = document.getElementsByTagName("div")[3];
			div0.onmouseover = function(){
				div0.style.marginTop = "30px";
			}
			div0.onmouseout = function(){
				div0.style.marginTop = "0px";
			}
			div1.onmouseover = function(){
				div1.style.marginTop = "30px";
			}
			div1.onmouseout = function(){
				div1.style.marginTop = "0px";
			}
			div2.onmouseover = function(){
				div2.style.marginTop = "30px";
			}
			div2.onmouseout = function(){
				div2.style.marginTop = "0px";
			}
			div3.onmouseover = function(){
				div3.style.marginTop = "30px";
			}
			div3.onmouseout = function(){
				div3.style.marginTop = "0px";
			}
		}

看完代码是不是都傻了,怎么可以那么简单,是的,就是那么的简单,很多的时候我们看到的效果其实实现的原理是很简单的,只是看我们是不是可以巧妙的运用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 讲一下怎么区分伪类、伪元素,同时优雅的处理页面浮动的问题

    首先介绍一下什么是伪类:伪类其实我们经常用的到,只是我们自己不会刻意的说这个是伪类这样的一个东西,我下面简单的举个例子就明白了怎么回事

    何处锦绣不灰堆
  • 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样...

    何处锦绣不灰堆
  • Js+Css做一个可弹起压下效果的按钮

    好几天没写js和css了,昨天看一个大神的博客的时候无意中看到他的一个效果做的很不错,思来想去觉得自己做一个会比较好,毕竟,本来就是一个学习的过程!

    何处锦绣不灰堆
  • bootstrap 左边栏菜单 常用样式

    <style> /* Custom Styles / ul.nav-tabs{ width: 140px; margin-top: 20px; ...

    用户5760343
  • 居中的文字在小屏幕下后面的换行 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 百亿级通用推荐系统实践

    腾讯云推荐系统应用在腾讯的QQ空间、QQ、企鹅FM、QQ会员和黄钻贵族等12个不同的业务的200多个不同推荐场景,每天处理的推荐请求有上百亿个。那么,腾讯云是如...

    吕慧伟
  • 个性化推荐沙龙 | 腾讯云推荐引擎实践

    吕慧伟,腾讯云布道师,腾讯社交网络运营部高级工程师,腾讯通用推荐系统神盾开发负责人,腾讯云推荐引擎架构师。中国科学院计算技术研究所博士,美国阿贡国家实验室博士后...

    携程技术
  • 报告| 2018中国人工智能商业落地研究报告

    近年来,人工智能发展迅猛,持续在医疗、金融、安防、自动驾驶等各个领域创造新的可能。因而人工智能的商业应用前景也越发令人期待,亿欧智库发布的《2018中国人工智能...

    用户1310347
  • 围棋之后,AI玩FPS游戏也能秀人类一脸!

    基于经典第一人人称射击游戏毁灭战士DOOM的AI挑战赛“Visual Doom AI Competition @ CIG 2016”尘埃落定,Facebook团...

    刀刀老高
  • border、margin、padding属性的区别

    可以先看下这个视频教程:http://my.tv.sohu.com/us/97014746/64226777.shtml

    跟着阿笨一起玩NET

扫码关注云+社区

领取腾讯云代金券