jquery案例

           效果图:扑克发牌效果图是通过给每一个扑克 通过在css中设置好对应的位置 然后在js里面通过each遍历以及setTimeout来进行给对应的扑克设置不同的延时html:给每一个的扑克东设置正反俩个面 当鼠标移入时 进行翻转    <div id="projects">      &n

2023-12-01  71
jquery案例

           效果图:在输入框中 进行字母和数字输入的时候 可以看见 输入的数字字母 会从输入框内不同的位置大小 飞出html:css:     * {         padding: 0;        &n

2023-11-27  81
jquery案例

   效果图:案例中当数字在进行加载的同时 旁边会有俩条光线依靠这着 进行旋转html:我们首先将基本样式 以及动画进行设置      * {         padding: 0;         margin: 0; &nbs

2023-11-27  81
jquery案例

     效果图:可以看见我们进行号码的随机筛选 并且将中间四位数进行了遮挡 一共设置了三个等级奖项 并且给每一个奖项设置了 固定的人数 当人数已经足够的时候 在此点击按钮机会进行提示 人数已满 切换下一个奖项html:  <div class="box">         <div class=&q

2023-11-27  72
jquery案例

  效果图:从效果图当中 可以清楚的看见 当载入页面的时候 文字次左侧移动到中间 并且从后向前的进行移动 直至消失html:css中 我们将文字进行居中设置 然后设置好作为移动的关键帧动画 添加代div中   * {         padding: 0;         mar

2023-11-23  74
jquery案例

         效果图:效果中的星星布满整个屏幕 这里我们通过jQuery去动态的创建节点 并且随机的去设定位置以及颜色html::在入口函数中 去创建俩个变量 一个为星星的个数 另一个为星星的颜色数组通过for循环去遍历num创建demo节点 首先对尺寸以及颜色进行随机筛选然后给视图层中的demo节点选中 向内部插入元素 并将刚才随机的尺寸以及颜色写入 再对它的left 跟top 进行随机设置设置一个间隔定时器  让它每隔10000

2023-11-23  83
jquery案例

     效果图:案例中三个方块 分别对应的是小时/分钟/秒 当任何一个方块中的数字进行改变时 对应的方块就会进行跳动 这里我们需要引入css库html:在js中我们先封装一个处理事件的函数 获取当前的小时 分钟 秒然后将视图层中的demo节点获取我们在这里进行if判断 当前demo节点中的文本 不等于现在获取的时间(字符串) 而右边获取到是数据需要通过三元运算符进行出路 当hours小于10返回一个0 大于10返回空字符串 跟当前的hours相加 最后进

2023-11-22  76
jquery案例

        效果图:通过mousewheel插件进行一个页面滚动 当鼠标向下滚动的时候 页面进行一个切换 包括右侧的小按钮进行一个高亮显示 并且文字进行一个动画显示 我们也可以通过点击小按钮进行页面的跳转html:    <div class="slide-wrapper">       <div&nbsp

2023-11-21  80
jquery案例

         效果图:当页面加载的时 时光轴移动到最后一位 并且可以通过鼠标进行左右的拖动 这次的效果主要是通过插件swiper进行实现的html:    <div class="time-line-box">       <div class="swiper-containe

2023-11-19  74
jquery案例

     效果图:从效果中可以看见 当鼠标点击第一个是 图片一次从左向右进行展开 当点击第二个是 图片是从中间 依次向俩边展开html: <ul class="cards">       <li class="title">        &nb

2023-11-18  83

zblog模板

牛资源