博客园 css布局动画特效等
0
悬赏园豆：50
[已解决问题]
解决于 2020-10-28 15:51
我是初学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>
真不想白嫖，还是想明白其中的原理的。。。
最佳答案
1
很多函数没用过，看得懂的那些好像就是根据js函数改变图片位置。现在一般做动画也不会这么写，非要通过js操作的话，用jQuery不是更方便吗？
收获园豆：50
用jQ 做动画调用的都是那些函数呢，，
@upze: 我说的用jQuery移动元素，本质上时通过jQuery改变css布局，比如\((element).css("left",\)(element).css("left")-20px)，就是把element元素左移20个像素，前提是采用绝对定位。具体函数可以百度jQuery的使用文档。
@HelloTF: 好吧
