首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用原生JS实现鼠标点击爱心效果 !!!

使用原生JS,实现鼠标点击爱心效果 !!! 引言: 在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的。其实实现起来也很简单,下面一起来学习一下吧。...这样的效果很常用,在很多网页博客中都有使用 实现思路 首先我们需要获取到当前鼠标点击的位置 需要在当前位置生成一个标签 需要给标签添加随机的自定义内容 随机的文本颜色 添加文本的淡出效果 清除淡出的标签...js中直接操作动画帧的样式比较复杂,所以采用定时器实现相同的功能,将标签的top值逐渐减小,这样标签就会实现上升的效果 4....文字逐渐变淡效果 @keyframes remove { 100% { opacity: 0; } } 逐渐变淡的效果是通过css3动画来实现的很简单,动画是通过js来给元素绑定的...鼠标点击实例化标签,并在点击位置生成 body.addEventListener('click', function (e) { let x = e.pageX; let y = e.pageY

4.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS-制作网页特效——选项卡效果(水平,点击)

    //总结:这个样式的思维很重要,以前刚开始做,想的都是,怎么获取到自己点击的是哪一个li,然后给他以对应的div样式。后来发现难点是,怎么找到另外两个没有被点击的li和他们对应的div。...className了,而要改成style,上一行的className就要删掉 } //j循环的外边 this.className = "on";//this代指tapLi[i],当前所点击的...,给他添加类名 tapDiv[this.index].className = "";//this.index=tapLi[i].index,具体作用下边alert做调试得知,就是得到一个对应你点击的...这样,给当前被点击li对应的div空类名,去除掉j循环中添加在他身上的hide枷锁,他就得意重见天日了! //这里最后把className忘记了,害得我调试了半天。...--清爽js代码如下--> 1 2 window.onload = function() { 3

    3.5K90

    iOS点击查看大图的动画效果

    对于图片来说,除了表情包,几乎都会被点击查看大图。今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图。...将大图放到最上层,否则会被后添加的阴影盖住 [self.view bringSubviewToFront:_bigImageView]; } 看代码,我们首先调用了大图的初始化方法,但是注意,此时还并没有将大图添加到界面上...然后我们使用了一个延迟函数,确保在图片收缩回小图以后,再将图片移除界面,保证动画的效果。 至此,就完成了我们整个的动画了。...这个例子中图片是中规中矩地放在居中位置,你也可以试一下将小图放在其他位置,其实真实的app中很少有居中放置的,从别的地方伸缩放大缩小效果会更加有趣的。...当然了,如果小图的位置不好获取,那就直接设为从屏幕的中点开始缩放,效果也不错。另外,你可能会疑惑为什么我要另行添加一个大图的对象,而不直接对小图的尺寸进行动画呢?

    1.7K20
    领券