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. Excel-统计函数

    1.Count系列函数 COUNT 数字个数----下面结果为 4 counta 非空的字数 ----下面为6 COUNTBLANK ------非空个数  ---- 下面为9 如何将字符串形式的数字 ...

  2. python的设计模式之MVC模式

    模型-视图-控制器模式 关注点分离(Separation of Concerns,SoC)原则是软件工程相关的设计原则之一.SoC原则背后的思想是将一个应用切分成不同的部分,每个部分解决一个单独的关注 ...

  3. 关于js的<、>、=、<=、>=的比较

    判断两个值的大小的时候.需要先转换为同一类型.比如parseInt转换. 示例:if(a<b)  if(parseInt(a)<parseInt(b)) 后一种方式不容易出错.

  4. Hello 2019 D 素因子贡献法计算期望 + 概率dp + 滚动数组

    https://codeforces.com/contest/1097/problem/D 题意 给你一个n和k,问n经过k次操作之后留下的n的期望,每次操作n随机变成一个n的因数 题解 概率dp计算 ...

  5. ASP.NET Core MVC 中自定义视图

    ASP.NET Core MVC 中的视图发现 ASP.NET Core MVC 中有提供了几个 View()的重载方法. 如果我们使用下面提供 View()的重载方法,它将查找与 Action 方法 ...

  6. [LeetCode] 375. Guess Number Higher or Lower II 猜数字大小之二

    We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...

  7. C++版本 ORM 访问数据库之ODB 的oracle Demo测试(二)

    有上篇文章已经说了odb的环境编译, 现在直接拿来给的例子进行数据库的增删改查操作测试 1. ODB访问oracle数据库_ 插入操作(insert) 直接运行上篇编译好的exe文件会出现如下错误 错 ...

  8. 建模语言UML

    建模语言UML Unified Modeling Language (UML)又称统一建模语言或标准建模语言,它是一个支持模型化和软件系统开发的图形化语言,为软件开发的所有阶段提供模型化和可视化支持, ...

  9. 手写bind函数

    实现bind函数 参考MDN提供的Polyfill方案 Function.prototype.myBind = function(context){ //这里对调用者做一个判断,如果不是函数类型,直接 ...

  10. 以Integer类型传参值不变来理解Java值传参

    最近在写代码的时候出了一个错误,由于对值引用理解的不深,将Integer传入方法中修改,以为传入后直接修改Integer中的值就不用写返回值接收了,虽然很快发现了问题,但还是来总结一下 首先是代码: ...