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. 学习input

    认识input: 在网页中,我们经常都会遇到一些交互页面,比如登录.注册.评论等页面.你知道在html中用的是那些标签吗?今天我们要学习的就是其中最主要的一个标签,即<input>标签. ...

  2. DVWA SQL Injection(Blind) 通关教程

    SQL Injection(Blind),即SQL盲注,与一般注入的区别在于,一般的注入攻击者可以直接从页面上看到注入语句的执行结果,而盲注时攻击者通常是无法从显示页面上获取执行结果,甚至连注入语句是 ...

  3. Python3 使用企业微信 API 发送消息

    #coding=utf- import requests import json Secret = "TUbfeW8nFQakwOS4czm13SCnxSUPOqY2K0XHtM8XLT34 ...

  4. ORA-01722 invalid number 一个比较隐蔽的可能错误原因

    在Oracle数据库中,数据类型为char或者varchar的字段,里面存储的数据,可以是纯数字串,比如:  3433,也可以是带有英文字符的字符串,比如:  3433a. Oracle对于纯数字串, ...

  5. Oracle 10G RAC集群安装

    一,基本环境配置 01,hosts cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.loc ...

  6. 万亿数据下Hadoop的核心竞争力

    1.前言 在大数据时代,Hadoop有着得天独厚的优势.然而,每个企业的技术储备和需求特点不同,他们希望从海量的客户数据中挖掘真正的商业价值,像Google.Facebook.Twitter等这样的企 ...

  7. 使用nodemon提高nodejs调试效率

    1.安装 nodemon 直接用npm安装既可,键入命令: npm -g install nodemon .如果不行,检查电脑有没有联网,联网后输入 sudo npm -g install nodem ...

  8. swiper轮播，添加鼠标移入事件停止轮播，移出重新开启轮播

    已测过无问题.

  9. python之lambda、filter、map、reduce的用法说明(基于python2)

    python中有一些非常有趣的函数,面试的时候可能会遇到.今天也来总结一下,不过该类的网上资料也相当多,也没多少干货,只是习惯性将一些容易遗忘的功能进行整理. lambda 为关键字.filter,m ...

  10. Eureka概述

    1:Eureka是什么 Eureka是Spring Cloud Netflix的一个子模块,也是核心模块之一.Eureka是一个基于REST的服务,用于定位服务,以及·实现云端中间层服务发现和故障转移 ...