jquery实现小动画

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>Document</title>

   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

   <style>

     *{

       margin:0;

       padding:0;

     }

       .box{

         margin:20px auto;

         width:462px;

         height:77px;

         position:relative;

       }

       .box .imgbox {

         width:100%;

         overflow:hidden;

       }

       .box .imgbox li{

         float:left;

         width:100px;

         height:77px;

         border:1px solid #000;

         margin-right:18px;

         list-style:none;

       }

       .box .imgbox li:nth-last-child(1){

         margin-right:0px;

       }

       .box .imgbox li img{

         display:block;

         width:100%;

         height:100%;

       }

       .mark{

         position:absolute;

         top:0;

         left:0;

         width:400px;

         height:300px

         box-sizing:border-box;

         border:1px solid #000;

       }

       .box .mark img {

         display:block;

         width:100%;

         height:100%;

       }

   </style>

 </head>

 <body>

   <section class="box">

     <ul class="imgbox">

       <li><img src="./small.jpg" data-bigimg="big.jpg" alt=""></li>

       <li><img src="./d.jpg" data-bigimg="d_big.jpg" alt=""></li>

       <li><img src="./t.jpg" data-bigimg="t_big.jpg" alt=""></li>

       <li><img src="./w.jpg" data-bigimg="w_big.jpg" alt=""></li>

     </ul>

     <!-- <div class="mark">

       <img src="./small.jpg" alt="" style="width:400px;height:300px">

     </div> -->

   </section>

   <script>

     $(function(){

       var $imglist = $(".box>.imgbox>li"),

           $mark = null,

           $box = $(".box");

       $imglist.on("mouseover",function(event){

         <!-- 创建mark盒子显示大图片：根据经过的li标签中的小图片，动态创建li中的大图片到mark盒子中 -->

           var img_url = $(this).children("img").attr("data-bigimg")

           if(!$mark){

             $mark = $(`<div class="mark">

               <img src="${img_url}" alt="">

             </div>`)

             $box.append($mark)

           }

       }).on("mousemove",function(event){

         <!-- console.log($box.offset().left) -->

         var {top:contop,left:conleft} = $box.offset(),

             curL = event.pageX - conleft + 20,

             curT = event.pageY - contop + 20;

             $mark.css({

               top:curT,

               left:curL

             })

       }).on("mouseout",function(){

         if($mark){

           $mark.remove()

           $mark = null

         }

       })

     })

   </script>

 </body>

 </html>

效果展示：

jquery实现一些小动画一的更多相关文章

  1. jquery实现一些小动画二

    jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...

  2. 利用jQuery实现用户名片小动画

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...

  3. 关于JQuery（最后一点动画效果*）

    1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...

  4. jquery IE6 下animate 动画的opacity无效

    jquery IE6 下animate 动画的opacity无效,其实是有效的,因为IETester的一个小BUG 原生IE6 没问题...呵呵~~

  5. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  6. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  7. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  8. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

随机推荐

  1. mongo db 去除 _class 字段

    import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.NoSuc ...

  2. Linux引导过程与服务控制

    一:系统引导流程: 开机自检(BIOS)-->MBR引导-->GRUB菜单-->加载内核(kernel)-->init进程初始化  二:系统引导级别: 0 poweroff.t ...

  3. 8.18 NOIP模拟测试25(B) 字符串+乌鸦喝水+所驼门王的宝藏

    T1 字符串 卡特兰数 设1为向(1,1)走,0为向(1,-1)走,限制就是不能超过$y=0$这条线,题意转化为从(0,0)出发,走到(n+m,n-m)且不越过$y=0$,然后就裸的卡特兰数,$ans ...

  4. [LeetCode] 829. Consecutive Numbers Sum 连续数字之和

    Given a positive integer N, how many ways can we write it as a sum of consecutive positive integers? ...

  5. Spring security 知识笔记【入门】

    一.生成spring boot项目文件 二.pom文件如下 <?xml version="1.0" encoding="UTF-8"?> <p ...

  6. python与rpc服务

    什么是rpc 随着企业 IT 服务的不断发展,单台服务器逐渐无法承受用户日益增长的请求压力时,就需要多台服务器联合起来构成「服务集群」共同对外提供服务. 同时业务服务会随着产品需求的增多越来越肿,架构 ...

  7. Codeforces Round #607 (Div. 1) Solution

    从这里开始 比赛目录 我又不太会 div 1 A? 我菜爆了... Problem A Cut and Paste 暴力模拟一下. Code #include <bits/stdc++.h> ...

  8. nodejs的child_process

    child_process  模块提供了衍生子进程的能力 异步方式:spawn.exec.execFile.fork 同步方式:spawnSync.execSync.execFileSync 说明: ...

  9. python面试题第一份

    阅读目录 1 Python的函数参数传递 2 Python中的元类(metaclass) 3 @staticmethod和@classmethod 4 类变量和实例变量 5 Python自省 6 字典 ...

  10. CSS3幸运大转盘最简单的写法

    点击开始 直接css动画 如果你要自己控制转到哪里 那就多写几个class 根据不同角度 运行不同的class..<pre>.zhuandong{ animation: zhuandong ...