👦

 

jquery

jquery实现鼠标点击显示文字上浮效果

##功能效果图如下

##功能代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="jquery-3.1.0.min.js"></script>
        <title></title>
        <style>
            body{
                position: absolute;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>

<script>
$(function(){
 //鼠标点击显示文字上浮效果
    var click_count=0;
    $(document).click(function(e){ 
        var text=new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"); 
        // var text = str.split(","); 
        var color=new Array(//颜色数组
            "#C01E22",
            "#0088cc",
            "#FF5E52",
            "#2CDB87",
            "#00D6AC",
            "#EA84FF",
            "#FDAC5F",
            "#FD77B2",
            "#0DAAEA",
            "#C38CFF",
            "#FF926F",
            "#8AC78F",
            "#C7C183",
            "#9370DB",
            "#2f889a",
            "#9e5ae2");
        var n=Math.floor(Math.random()*color.length+1)-1;
        click_count=(click_count+1)%text.length;
        var $i=$("<span>").text(text[click_count]);
        var x=e.pageX,y=e.pageY;//鼠标点击坐标
        $i.css({
            "position":"absolute",
            "z-index":"10000",
            "top":y-15,
            "left":x,
            "color":color[n],
            "font-size":"14px",
            "font-weight":"700",
            "cursor":"default"
        });
        $("body").append($i);
        $i.animate({
            "top":y-180,//纵向偏移量
            "opacity":"0"},2000,function(){
        $i.remove();//移除显示的文字
        });
        e.stopPropagation();//防止冒泡})
    });
});
</script>
    </body>
</html>
CDN

CDN加速合并引入多个相同域名js文件

前导必备

  • 这里演示使用的CDN是jsdelivr

未合并引入多个相同域名js文件的写法如下：

1
2
3
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

合并引入多个相同域名js文件的写法如下：

1
<script src="https://cdn.jsdelivr.net/combine/npm/jquery@1.12.4/dist/jquery.min.js,npm/aplayer/dist/APlayer.min.js,npm/meting@2/dist/Meting.min.js"></script>

总结

当需要引入相同域名下多个js文件时，合并引入多个相同域名js文件可以减少网络连接次数，从而提升网站加载速度。

basic knowledge

关于图片格式

JPG、GIF、PNG和BMP有以下优缺点:

优点

JPG：JPEG图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息，也即是进行了有损压缩。JPEG图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。

GIF：GIF是无损的，采用GIF格式保存图片不会降低图片质量。但得益于数据的压缩，GIF格式的图片，其文件大小要远小于BMP格式的图片。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。

PNG：PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。

BMP：这是一种比较老的图片格式。BMP是无损的，但同时这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常具有较大的文件大小。虽然同时支持索引色和直接色是一个优点。

缺点

JPG：与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。

GIF：GIF格式仅支持8bit的索引色，即在整个图片中，只能存在256种不同的颜色。

PNG：PNG-8本身也是支持动画的，只是浏览器支持得不好，不像GIF那样受到广泛的支持。

BMP：太大的文件格式格式导致它几乎没有用武之地，现在除了在Windows操作系统中还比较常见之外，几乎看不到它。

总结如下:

想要画质好(存储空间大)的照片建议用PNG格式，想要存储空间小(画质低)的照片建议使用JPG格式，静态透明图像建议用PNG格式，由于PNG-8在浏览器中支持得不好，网页中想要使用动态图像或者动态透明图像推荐使用GIF格式图片，BMP几乎不用。