（jQuery倒计时，表情图输出，图片跟随鼠标，放大镜）

最新推荐文章于 2022-03-21 16:24:35 发布

置顶 AutisticRoad

最新推荐文章于 2022-03-21 16:24:35 发布

阅读量380

点赞数

文章标签： jquery html html5 css

本文链接：https://blog.csdn.net/AutisticRoad/article/details/107845680

版权

jQuery倒计时

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //定义一个计时器
            var time = setInterval(showtime, 1000);
            //页面加载的时候设置游戏啊按钮不能点击
            $("input").attr('disabled', true);
            //设置字符串参数
            var str = "请阅读协议";
            //从5开始倒数
            var sum = 5;
            function showtime() {
                if (sum > 0) {
                    $("input").val("请阅读协议" + sum + "秒");
                    sum--;
                    //修改显示文本
                } else {
                    $("input").val("同意");
                    $("input").attr('disabled', false);
                    clearInterval(time);
                }
            }
        });

    </script>
</head>
<body>
    <input type="button" name="name" value="请阅读协议5秒" />
</body>
</html>

表情图输出

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //定义存储位置和表情名字信息
            var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '发呆', '4.gif': '得意', '5.gif': '流泪', '6.gif': '害羞', '7.gif': '闭嘴', '8.gif': '睡', '9.gif': '大哭', '10.gif': '尴尬', '11.gif': '发怒', '12.gif': '调皮', '13.gif': '呲牙', '14.gif': '惊讶', '15.gif': '难过', '16.gif': '酷', '17.gif': '冷汗', '18.gif': '抓狂', '19.gif': '吐', '20.gif': '偷笑', '21.gif': '可爱', '22.gif': '白眼', '23.gif': '傲慢', '24.gif': '饥饿', '25.gif': '困', '26.gif': '惊恐', '27.gif': '流汗', '28.gif': '憨笑', '29.gif': '大兵', '30.gif': '奋斗', '31.gif': '咒骂', '32.gif': '疑问', '33.gif': '嘘', '34.gif': '晕', '35.gif': '折磨', '36.gif': '衰', '37.gif': '骷髅', '38.gif': '敲打', '39.gif': '再见', '40.gif': '擦汗', '41.gif': '抠鼻', '42.gif': '鼓掌', '43.gif': '糗大了', '44.gif': '坏笑', '45.gif': '左哼哼', '46.gif': '右哼哼', '47.gif': '哈欠', '48.gif': '鄙视', '49.gif': '委屈', '50.gif': '快哭了', '51.gif': '阴险', '52.gif': '亲亲', '53.gif': '吓', '54.gif': '可怜', '55.gif': '菜刀', '56.gif': '西瓜', '57.gif': '啤酒', '58.gif': '篮球 ', '59.gif': '乒乓', '60.gif': '咖啡', '61.gif': '饭', '62.gif': '猪头', '63.gif': '玫瑰', '64.gif': '凋谢', '65.gif': '示爱', '66.gif': '爱心', '67.gif': '心碎', '68.gif': '蛋糕', '69.gif': '闪电', '70.gif': '炸弹', '71.gif': '刀', '72.gif': '足球', '73.gif': '瓢虫', '74.gif': '便便', '75.gif': '月亮', '76.gif': '太阳', '77.gif': '礼物', '78.gif': '拥抱', '79.gif': '强', '80.gif': '弱', '81.gif': '握手', '82.gif': '胜利', '83.gif': '抱拳', '84.gif': '勾引', '85.gif': '拳头', '86.gif': '差劲', '87.gif': '爱你', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '爱情', '91.gif': '飞吻', '92.gif': '跳跳', '93.gif': '发抖', '94.gif': '怄火', '95.gif': '转圈', '96.gif': '磕头', '97.gif': '回头', '98.gif': '跳绳', '99.gif': '挥手', '100.gif': '激动', '101.gif': '街舞', '102.gif': '献吻', '103.gif': '左太极', '104.gif': '右太极', '105.gif': '淡定', '106.gif': '晕', '107.gif': '不满', '108.gif': '睡觉', '109.gif': '小调皮', '110.gif': '咒骂', '111.gif': '发怒', '112.gif': '偷笑', '113.gif': '微笑', '114.gif': '震惊', '115.gif': '囧' };
            //注册按钮点击事件
            $("input").click(function () {
                $.each(userFaces, function (index, dom) {
                    //循环遍历数据，向div里面添加图片
                    $("div").append("<img src='../Img/faces/" + index + "' alt='" + dom + "' width='40' />");
                });
                //为已经添加到div里的所有img添加点击事件
                $("div img").click(function () {
                    //弹出提示框显示图片信息
                    alert($(this).prop("alt"));
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="头像" />
    <div style="width:400px;margin:0 auto;border:1px solid blue;">
    </div>
</body>
</html>

图片跟随鼠标

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //当鼠标再文档中出现的时候触发事件
            $(document).mousemove(function (s) {
                //设置img的位置跟随鼠标移动，添加css样式脱离文档流，使用pageX和pageY获取X和Y轴坐标改变图片位置
                $("img").css("position", "absolute").css("left", s.pageX-50).css("top", s.pageY-20);
            });
        });
    </script>
</head>
<body>
    <img src="../Img/60.gif" title="埃罗老师" width="150" />
</body>
</html>

放大镜

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img {
            width: 21%;
            margin: 2%;
            float: left;
        }

        .imgdiv {
            margin: 0 auto;
        }
    </style>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //创建鼠标滑过img时候的事件
            $("img").mousemove(function (s) {
                //为div切换图片
                //设置img的位置跟随鼠标移动，添加css样式脱离文档流，使用pageX和pageY获取X和Y轴坐标改变图片位置
                //console.log($(this).prop("src"));
                //改变位置的同时，为图片切换当前放入的背景图
                $("div:eq(1)").css("position", "absolute").css("background-image", "url('" + $(this).attr("src") + "')").css("left", s.pageX + 10).css("top", s.pageY + 10);
            });
            //当鼠标画出img的时候取消div的背景图
            $("img").mouseout(function () {
                $("div:eq(1)").css("background-image", "");
            });
        });
    </script>
</head>
<body>
    <div class="imgdiv">
        <img src="../Img/1 (1).jpg" alt="Alternate Text" />
        <img src="../Img/1 (1).png" alt="Alternate Text" />
        <img src="../Img/1 (2).jpg" alt="Alternate Text" />
        <img src="../Img/1 (3).jpg" alt="Alternate Text" />
    </div>
    <div style="width:1200px;height:600px;background-size:100%;background-repeat:no-repeat;">

    </div>
</body>
</html>

AutisticRoad

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
（jQuery倒计时，表情图输出，图片跟随鼠标，放大镜）

jQuery倒计时<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="../Scripts/jquery-1.11.3.js"></script> <script> $(function () { //定义一个计时
复制链接

扫一扫