jquery案例

      效果图:效果的签到表情 通过自动轮播的的方式进行播放 并且设置暂停了自动播放  以及清除定时器、html: <div class="box">       <h1>你今天心情怎么样</h1>       <div class=&quot

2023-11-07  83
jquery案例

        效果图:当鼠标点击左侧小图标时 进行向左移动并且进行翻转 以及左侧出现菜单栏  菜单内部的内容动态展示html: <div class="box">       <div class="boxLeft">       &

2023-11-05  78
jquery案例

   效果图:滑动:当鼠标进行滑动时左侧的小标点进行堆积显示 就是滑到哪一步 就会将前面的一起叠加起来 并且通过点击也会类似于锚点一样 返回到对应的位置html:类似于左侧步骤分为俩部分设置 正常状态下的是由跟图片一起的标点进行展示 当滑动时将由单独设置的标点通过js进行展示   <div class="top">导航栏</div>     <di

2023-11-04  80
jquery案例

   效果图:当鼠标点击切换时 可以看见按钮从左边滚动到右边  并且按钮上的表情从不开心变成了笑脸 主要是通过点击事件 进行样式的改变 所以最重要的还是样式html:css:先设置按钮的基础样式 并且写两个类分别为off on 通过切换这俩个样式 来进行按钮的更改 * {         padding: 0;    

2023-11-04  75
jquery案例

   效果图:当进入页面加载时 可以看到进度条 以及数字在同步的进行html:这次的进度条 就用hr标签来实现 也可以用其他方法先声明一个变量赋值为0用于后面的赋值操作然后设置一个定时器 为30毫秒执行一次 先通过选择文本以及进度条的标签 给他们的文本以及进度条宽度进行同步的百分比改变采用先赋值后自增 通过if判断 当num大于101时进行定时器清除完整代码:<!DOCTYPE html> <html lang="en&quot

2023-11-02  79
jquery案例

   效果图:当鼠标移入到浏览器界面上时 眼球会跟随则鼠标进行移动 但是不会超出html: <div class="box">       <div class="eyeLeft">         <div class=&quo

2023-11-01  79
jquery案例

    效果图:当鼠标点击到对应的右侧小图片 时候 左侧的大图片进行滚动切换 并且右边没有被选中的图片上面抖音一层遮罩层 并且当点击到任何一个图片时橙色的边框会移动到对应的图片上html:在box中设置俩个子元素 分别是左侧的图片区域 以及右侧的小图区域  <div class="box">       <div class="l

2023-10-31  91
jquery案例

           效果图:勾选效果按钮变换样式在效果中可以看到 当点击日历是会出现勾选的效果 并且当勾选的数量大于21天时下面的样式会变成抽奖按钮 html:在视图层写好基本结构 数据通过js进行动态添加<div class="items">       <div class="main&quot

2023-10-30  82
jquery案例

   效果图:从上面可以看见 我们通过点击上面的导航 切换进行筛选的内容 当点击停止时 将被选中的显示html:给所有的li添加上id 方便后面的区分 <div class="box">       <div class="top-list">       &nbs

2023-10-30  83
jquery案例

   效果图:点击左上角的颜色方块可以对我们的标签进行颜色的更改 在输入框中输入文字 通过回车键 进行标签的添加并且点击标签可以对标签进行删除html:<ul class="colors">       <span>tag Color</span>       <li&nbsp

2023-10-27  83

zblog模板

牛资源