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. CSS/H5保留显示 textarea输入的空格和换行

    .show { white-space: pre-wrap; }

  2. 知识点总结 REACT

    1.react中如何创建一个组件 ES6:class 组件名 extends Component{} ES5:var App=React.createClass({}) 2.render函数什么时候会 ...

  3. [勘误] Head First Java (2nd edition)中文版勘误

    附上英文原版高清pdf:链接: https://pan.baidu.com/s/1X5Aikj6krROnp3oXuTVl8Q 提取码: f6xd 标注本文: 上面的图是中文译本中的错误 下面的图是英 ...

  4. java十题

    这是我收集的10个最棘手的Java面试问题列表.这些问题主要来自 Java 核心部分 ,不涉及 Java EE 相关问题.你可能知道这些棘手的 Java 问题的答案,或者觉得这些不足以挑战你的 Jav ...

  5. 记一次难忘的排错debug经历（找了5天左右）（涉及内存覆盖）

    strcpy和memcpy都没有处理内存覆盖问题. 函数描述 The memcpy function copies count bytes of src to dest. If the source ...

  6. 论文阅读: Building a 3-D Line-Based Map Using Stereo SLAM

    Abstract 一个把直线用作feature的SLAM系统. 跟点相比, 直线对于环境的结构提供了更丰富的信息, 也让其鞥有可能推断地图的空间语义. 使用了Plucker line coordian ...

  7. 通过JS下载 or 唤起App

    判断唤起app的连接是否在WeChat中打开 let isWeiXin = navigator.userAgent.toLowerCase().indexOf('micromessenger') != ...

  8. 【linux】lvm扩展根分区

    lvm扩展根目录 1.lvm的基本概念 physical volume (PV) 通常是一快硬盘.相当于一个物理设备,磁盘空间物理卷PV. volume group (VG) 相当于LVM的卷组,属于 ...

  9. JS修改URL参数，并修改前页面的地址

    function changeURLArg(url,arg,arg_val){ var pattern=arg+'=([^&]*)'; var replaceText=arg+'='+arg_ ...

  10. Mysql 问题集

    [1]实现如下需求 需求: 实现方案: (1)复现场景 SQL语句: -- [1]删除表 DROP TABLE tbl_name; -- [2]创建表 )); INSERT INTO tbl_name ...