鼠标点击产生"富强""民主""文明"方法

2020-05-13 10:09:03

参考地址 JQuery 实现鼠标点击特效"富强""民主""文明"方法

最近逛好多博客发现都有一个鼠标点击弹窗的事件, 感觉非常棒

#就像这个样子的

 

百度了一下 发现还是实现还是比较简单的(当然我也不会),但是copy 是程序员最喜欢的事,所以我就转载这个文章,也当是自己的一个小笔记,贴上代码

# js 部分的代码

<script>//定义获取词语下标var a_idx = 0;jQuery(document).ready(function($) {//点击body时触发事件$("body").click(function(e) {//需要显示的词语var a = new Array("富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善");//设置词语给span标签var $i = $("<span/>").text(a[a_idx]);//下标等于原来下标+1  余 词语总数a_idx = (a_idx + 1)% a.length;//获取鼠标指针的位置,分别相对于文档的左和右边缘。//获取x和y的指针坐标var x = e.pageX, y = e.pageY;//在鼠标的指针的位置给$i定义的span标签添加css样式$i.css({"z-index" : 999999,"top" : y - 20,"left" : x,"position" : "absolute","font-weight" : "bold","color" : "#ff6651"});//在body添加这个标签$("body").append($i);//animate() 方法执行 CSS 属性集的自定义动画。//该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。//详情请看http://www.w3school.com.cn/jquery/effect_animate.asp$i.animate({//将原来的位置向上移动180"top" : y - 180,"opacity" : 0//1500动画的速度}, 1500, function() {//时间到了自动删除$i.remove();});});});</script>

#实际演示效果  点我查看效果


  • 2018-10-28 11:14:29

    矢量资源工具Vector_Asset_Studio

    Android Studio有一个称为“Vector Asset Studio”的工具, 它可以将SVG文件和PSD文件转化为工程可用的矢量可绘制资源(vector drawable resources),

  • 2018-10-28 11:16:09

    Android vector标签 PathData 画图超详解

    SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写。在xml文件中的标签是<vector>,画出的图形可以像一般的图片资源使用,例子如下

  • 2018-10-30 00:16:41

    android ToolBar 设置颜色

    app:popupTheme——有时候我们有需求:ActionBar文字是白的,ActionBar Overflow弹出的是白底黑字让ActionBar文字是白的,那么对应的theme肯定是Dark。可是让ActionBar弹出的是白底黑字,那么需要Light主题。这时候popupTheme就派上用场了。android:theme 与app:theme——在AppCompat v21里,提供了一个快速方便的方法设置Toolbar的主题,使用app:theme。而新版本22.1.x中,AppCompat 允许对 Toolbar 使用 android:theme代替 app:theme。最好的一点是:它会自动继承父视图的theme ,并且兼容所有APIv11以上的设备。

  • 2018-11-01 22:08:19

    Android Toolbar左、中、右对齐

    默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是,Android Toolbar为自身的NavigationIcon(app:navigationIcon)最靠右,Logo(app:logo)紧接NavigationIcon、Title(app:title)接续Logo、保留了默认的位置(从左边到右)。这些Android Toolbar保留的系统设置字段将挤压开发者自己安放在Toolbar中的子view,如图所示: