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. perfview微软开源的cpu以及内存性能分析工具

    perfview 是一个强大的分析工具,能用来分cpu,内存,磁盘io...多种指标,使用简单,功能强大 用来分析windows应用的性能问题,是一个很不错的选择 下载地址 https://githu ...

  2. 开源推荐 - CoDo开源一站式DevOps平台

    一群有梦想的年轻人开源了一个云管理平台,他们的口号是:让天下没有996的运维 有幸参与到CoDo项目的开发,这是一个非常棒的一站式开源运维平台,分享给大家 平台介绍 CODO是一款为用户提供企业多混合 ...

  3. day 24

    I am a slow walker, but I never walk back. 我走得很慢,但是我从来不会后退.

  4. 【转】java 泛型详解

    java 泛型详解 对java的泛型特性的了解仅限于表面的浅浅一层,直到在学习设计模式时发现有不了解的用法,才想起详细的记录一下. 本文参考java 泛型详解.Java中的泛型方法. java泛型详解 ...

  5. 容错框架之Hystrix小记

    微服务框架下,一个服务依赖于很多服务.在高并发访问下,系统所依赖的服务的稳定性对系统的影响非常大,依赖有很多不可控的因素,比如网络连接变慢,资源突然繁忙,暂时不可用,服务脱机等,一个被调用服务出问题可 ...

  6. [LeetCode] 10. Regular Expression Matching 正则表达式匹配

    Given an input string (s) and a pattern (p), implement regular expression matching with support for  ...

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

    ODB的组成部分: 1: 操作系统的ODB编译器 2: odb核心库libodb 3: 各种数据库的相关链接库 使用ODB访问数据需要的库和头文件(不懂, 请看https://www.cnblogs. ...

  8. 原创｜强大！Nginx 配置在线一键生成“神器”

    Nginx作为一个轻量级的HTTP服务器,相比Apache优势也是比较明显的,在性能上它占用资源少,能支持更高更多的并发连接,从而达到提高访问效率;在功能上它是一款非常优秀的代理服务器与负载均衡服务器 ...

  9. 框架之jQuery妙用

    1.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...

  10. 【操作系统之十四】iptables扩展模块

    1.iprange 使用iprange扩展模块可以指定"一段连续的IP地址范围",用于匹配报文的源地址或者目标地址.--src-range:匹配报文的源地址所在范围--dst-ra ...