zblog主题

Solide

专注于前端开发记录

文章 248  访问 17133
最新动态
jquery案例

    时间暂停开始:  效果图:          1.先获取当前时间  进行验证 然后设置一个定时器 每隔一秒钟执行一次 实现时钟正常                      2. 当点击暂停是 给定时器进行移除操作   

2023-08-12  75
jquery案例

    五星评分案例:     主要是通过mouseover 获取设置好的id数值 然后进行遍历 依次给li更改背景图片来实现的效果    效果图:   当我鼠标移动到当前li  获取id值  并通过获取到的id值进行遍历更改背景图 来实现好评                完整代码:&l

2023-08-12  74
jquery案例

           外卖购物车:          效果图:    这次要实现的效果主要是tab切换以及商家总价计算 商品数量计算     点击任意一个tab选项时  先获取下标值 将其添加给对应的商品列表给其display 更改为block  给其他设置none   进行对应的显示&n

2023-08-12  77
Vue

  嵌套路由以及路由元:         使用 vue Router路由管理器,显示组件 ,并且 显示的组件中还有新的子级路由链接以及内容。 children数组 表示 子路由规则    路由嵌套案例:        其完整代码:<!DOCTYPE html> <html lang="en">

2023-08-06  87
jquery案例

      侧边栏:

  效果图:

image.png

     先获取其视窗的高度 然后获取对应所需要的div距离顶部高度 并打印出来查看

image.png

2023-08-06  85
jquery案例

  手风琴案例:    这次主要只有mouseover 以及 animate mouseleave等方法  效果图:      css方面主要是 给ul设置一个宽高 然后使用display:flex 进行布局  li设置为160px 对超出边框多余的部分进行隐藏 给图片       对图片设置ul同等宽高       &nbsp

2023-08-06  76
jquery案例

   状态框弹出及隐藏    这次主要使用 show  以及hide给里面设置参数 进行反馈    效果图:  选择框弹出:              选择确认执行的函数结果:       选择取消执行的函数:          &nbsp

2023-08-03  84
jquery案例

   普通二级导航栏   这次我们使用的方法 是show() hide()  以及最初的hover()  效果图:    选中li 进行hover 当鼠标放在当前li身上 该li子元素进行显示、$(".list li").hover(    function () {      $(this).children("dl").sh

2023-08-03  75
jquery案例

  文本框添加删除        这次主要效果是 通过点击事件来获取文本框中的value值 并创建一个新标签 添加到末尾 然后再通过点击事件用伪类来进行选择末尾删除          效果图:      先绑定添加按钮进行点击事件 通过选址文本框使用val来获取内容  然后打印再控制台查看是否获取     &

2023-08-02  81
jquery案例

     下拉框二级联动        这次主要使用jquery中 each 以及append change来实现效果    效果图:  先分别按对应的数组下标创建俩个数组先使用each遍历第一个数组为省级数组 然后创建一个新的标签 将index 跟value写进去 添加到对应的下拉框中 然后给省级数组添加change事件 将点击得到value赋值新Index  va

2023-08-01  65