jquery案例

    效果图:这次我们要实现的效果分别是 当鼠标移入视口时 熊猫的眼睛跟随 鼠标的方向进行转动第二个就是当密码框 获取到焦点时 图片向上移动html:我们将熊猫分为 三个部分去写 首先耳朵单独设置俩个div 通过定位的方式去设置位置然后脸部/身体/输入框 分为三个部分去设置  <div class="box">       <!-- 熊猫

2023-10-10  70
jquery案例

   效果图:通过查看这次的效果 可以分析俩个点 当我们移入下面的四个按钮之一 时 对手机的颜色进行更改其实是通过几张跟颜色对应的图片通过结对定位的方式 集中在一起 html: <div class="box">       <div class="boxImg">     

2023-10-10  75
jquery案例

   效果图:动态的伸缩搜索框 主要是通过点击对它进行样式的张开 以及最后变成一个圆 所以主要的核心在于对样式的处理html:我们设置一个父元素 里面分为俩个部分 放大镜标志以及输入框按钮区域<div class="box">       <div class="icon">     &nbsp

2023-10-09  78
jquery案例

 效果图:正常我们看到这个效果的时候  能想到这个效果需要通过获取的鼠标来进行操作 其次在css方面 我们要对图片以及它的层级样式做一个处理html:html结构方面我们在一个盒子里设置俩个子元素 一个作为承载图片 另一个设置为圆镜<div class="box">       <div class="boxImg"></div

2023-10-09  84
jquery案例

效果图:在鼠标进行滚动时 上方的蓝色进度条 会随着我们滚动文章的的多少而进行变化 从这上面我们可以得到的信息是 需要通过 页面头部卷入的多少来进行操作在头部 我们把进度条单独设置一个div 将它通过定位的方式 来固定到下面 先不设置宽度 css:html:后面将我们的文章内容单独设置在一个盒子当中 对它进行css修饰    <div class="books">    &nb

2023-10-08  116
jquery案例

   效果图:通过特效我们可以看出 在鼠标移入的时候 图片向上动 所以可以通过定位的方式 来调整它的top值html:<div class="header">       <h2>JQUERY-图片滚动预览</h2>       <ul class="left&quo

2023-10-08  77
jquery案例

  效果图:鼠标悬停到图片上放大 而且放大的图片随着鼠标的移动一起移动 在鼠标移除图片时 放大的图片也跟着一起 显而易见 这次的效果需要通过 获取鼠标的坐标来进行操作html:设置俩个容器 一个存放图片 另一个作为承载放大图片的容器 给分别给它们设置好样式放大图片的容器设置好定位  以及隐藏当我们鼠标移入图片时 获取到鼠标的X,Y的坐标 打印在控制台上查看一下 $(".box").mousemove(function (e)&

2023-10-07  78
jquery案例

  效果图:我们需要将 在textarea中输入的 的文字 通过点击发布的方式 将它显示在我们下面的列表当中 点击中删除的按钮 可以删除对应的内容html:我们在texterea中写入好内容 点击发布按钮时 获取到文本框中的值 打印在控制台上 看看是否能获取到在添加到列表时 我们判断一下输入的内容是否为空 为空的情况下 提醒输入内容再发布 $(".btn").click(function () {    &

2023-10-07  84
jquery案例

  效果图:  这次我们需要做的处理 分别是 当我们点击下拉框选项时 怎么将内容添加到 上面的内容框当中   取消点击时 怎么将内容框对应的 数据进行删除      html:     我们设置一个内容区域  下面的下拉框我们通过定位的方式  设置到一起 给ul设置display:none     这次我想通过获取点击p标签的文本内容来设

2023-10-06  81
jquery案例

    效果图:我们主要是通过给li设置一个相对定位 将导航栏的内容以及 滑块都设置在里面给三个li设置成绝对定位 并且均分ul将作为滑块的li的单独设置绝对定位 bottom设置为-59 来靠底部处于第一个li下面所以设置为left:0当我们点击li时 获取当前点击的li下标、然后进行if判断 点前滑块该移动到哪个li下面通过在animate中设置left 来进行移动完整代码:<!DOCTYPE html> <html lang=&qu

2023-10-04  75

zblog模板

牛资源