首页 新闻 搜索 专区 学院

博客园 css布局动画特效等

0
悬赏园豆:50 [待解决问题]

我是初学html+javascript+css
上次看到博客的装修美化什么的。。
我应用了,但是里面的代码我看不懂。希望有个大佬能解读解释一下...

https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js

<script type="text/javascript">
(function() {var coreSocialistValues = ["努力", "奋斗", "坚持", "不懈", "勤奋", "好学", "拉拉", "噜噜", "咧咧", "嘻嘻", "哈哈", "哼哼"], index = Math.floor(Math.random() * coreSocialistValues.length);document.body.addEventListener('click', function(e) {if (e.target.tagName == 'A') {return;}var x = e.pageX, y = e.pageY, span = document.createElement('span');span.textContent = coreSocialistValues[index];index = (index + 1) % coreSocialistValues.length;span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join('');document.body.appendChild(span);animate(span);});function animate(el) {var i = 0, top = parseInt(el.style.top), id = setInterval(frame, 16.7);function frame() {if (i > 180) {clearInterval(id);el.parentNode.removeChild(el);} else {i+=2;el.style.top = top - i + 'px';el.style.opacity = (180 - i) / 180;}}}}());
</script>

真不想白嫖,还是想明白其中的原理的。。。

upze的主页 upze | 初学一级 | 园豆:129
提问于:2019-05-16 16:34
< >
分享
所有回答(1)
0

很多函数没用过,看得懂的那些好像就是根据js函数改变图片位置。现在一般做动画也不会这么写,非要通过js操作的话,用jQuery不是更方便吗?

linktodream | 园豆:204 (菜鸟二级) | 2019-05-23 11:50

用jQ 做动画调用的都是那些函数呢,,

支持(0) 反对(0) upze | 园豆:129 (初学一级) | 2019-05-24 21:20

@upze: 我说的用jQuery移动元素,本质上时通过jQuery改变css布局,比如\((element).css("left",\)(element).css("left")-20px),就是把element元素左移20个像素,前提是采用绝对定位。具体函数可以百度jQuery的使用文档。

支持(0) 反对(0) linktodream | 园豆:204 (菜鸟二级) | 2019-05-24 21:43

@HelloTF: 好吧

支持(0) 反对(0) upze | 园豆:129 (初学一级) | 2019-05-24 21:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册