jq插件仿百度图片中移动鼠标的效果

最新推荐文章于 2019-08-10 23:38:05 发布
最新推荐文章于 2019-08-10 23:38:05 发布
阅读量214 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhy1006894859/article/details/85005910
版权

demo地址：https://download.csdn.net/download/hhy1006894859/10850963

html代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/imgslide.css">
    <title>图片滑动的插件</title>
</head>
<body>
<div class="imgwrap">
    <img src="../images/1.jpg" alt="">
    <span class="content">1</span>
</div>
<div class="imgwrap">
    <img src="../images/2.jpg" alt="">
    <span class="content">2</span>
</div>
<div class="imgwrap">
    <img src="../images/3.png" alt="">
    <span class="content">3</span>
</div>
<div class="imgwrap">
    <img src="../images/4.jpg" alt="">
    <span class="content">4</span>
</div>

<div class="imgwrap">
    <img src="../images/2.jpg" alt="">
    <span class="content">2</span>
</div>
<div class="imgwrap">
    <img src="../images/3.png" alt="">
    <span class="content">3</span>
</div>
<div class="imgwrap">
    <img src="../images/1.jpg" alt="">
    <span class="content">1</span>
</div>
<div class="imgwrap">
    <img src="../images/4.jpg" alt="">
    <span class="content">4</span>
</div>
</body>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/imgslide.js"></script>
<script>
    imgSlide({
        "father":"imgwrap",// 父元素的class值
        "son":"content",// 子元素的class值
        "time":100,// 动画时间
    })
</script>

css代码：（sass）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  .imgwrap {
    border: 1px red solid;
    float: left;
    position: relative;
    //margin-left: 200px;
    //margin-top: 200px;
    overflow: hidden;
    img {
      display: block;
      height: 300px;
    }
    .content {
      display: block;
      width: 100%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      position: absolute;
      //top: auto;
      //right: -100%;
      //bottom: 0;
      //left: auto;
      background: rgba(0,0,0,0.5);
      color: #ffffff;
      //display: none;
    }
  }
}

js代码：（插件代码）

// 判断鼠标进入div的方向的方法(js代码)
function direction(obj,e,status) {
    /* 以矩形中心为原点，水平向右x正方向，竖直向上y正方向建立坐标系
    * obj:触发事件的对象
    * e:所触发的事件的时间对象
    * status:回调函数返回方向 0:上,1:右,2:下,3:左
    * w:矩形的宽度 h:矩形的高度
    * x:目标点的x坐标 y:目标点的y坐标
    * dot: 目标点相对原点坐标的斜率
    * k1：矩形对角线的斜率
    * k2：矩形另外一条对角线的斜率
    * */
    var w = obj.offsetWidth;// 框的宽度；
    var h = obj.offsetHeight;// 框的高度；
    var x = e.clientX - obj.offsetLeft - (w / 2);
    var y = -(e.clientY - obj.offsetTop - (h / 2));
    var k1 = h/w;// 获得矩形对角线的斜率
    var k2 = -k1;// 另外一条对角线的斜率
    var dot = y/x;// 获得该点的斜率
    var dirArr = [
        {"index":0,"data":"上"},
        {"index":1,"data":"右"},
        {"index":2,"data":"下"},
        {"index":3,"data":"左"}
    ];// 分别代表上、右、下、左
    if( dot <= k1 && dot >= k2 ) {
        return x >= 0?status(dirArr[1]):status(dirArr[3])
    }else {
        return y >= 0?status(dirArr[0]):status(dirArr[2])
    }

}

// 确定要进入或者离开容器动画的元素的初始位置
function initAnimateDomPos(fatherDom,dom,dir,isShow,flag,callback) {
    /* 用来确定进入容器动画的元素的初始位置
    * fatherDom:动画元素的父元素
    * dom:动画元素
    * dir:鼠标活动方向
    * isShow:动画元素是显示还是隐藏
    * flag:1进入 2:离开
    * callback:回调函数,返回动画元素的宽度
    * */
    var h_box = fatherDom.offsetHeight;// 获得进行动画元素的父级容器的高度
    var w_box = fatherDom.offsetWidth;// 获得进行动画元素的父级容器的宽度
    var h = null;// 获得进行动画元素的高度
    var w = null;// 获得进行动画元素的宽度
    if(isShow) {
        // 动画元素是显示的
        h = dom.offsetHeight;
        w = dom.offsetWidth;
    }else {
        dom.style.display = "block";
        h = dom.offsetHeight;
        w = dom.offsetWidth;
        dom.style.display = "none";
    }

    // js获取非行内的css样式
    var borderTopWidth = parseInt(window.getComputedStyle(fatherDom).borderTopWidth);
    var borderBottomWidth = parseInt(window.getComputedStyle(fatherDom).borderBottomWidth);

    var top = h_box - h - borderTopWidth - borderBottomWidth;// 绝对定位的top值

    if(dir == 0) {
        // 从上
        dom.style.left = 0;
        dom.style.right = "auto";
        dom.style.bottom = "auto";
        dom.style.top = top + "px";
        callback();
    }else if(dir == 1) {
        // 从右
        dom.style.left = "auto";
        dom.style.bottom = 0;
        dom.style.top = "auto"
        if(flag == 1) {
            //划入
            dom.style.right = -w + "px";
            callback();
        }else if(flag == 2) {
            // 划出
            dom.style.right = 0;
            callback(w)
        }
    }else if(dir == 2) {
        // 从下
        dom.style.left = 0;
        dom.style.right = "auto";
        dom.style.top = "auto"
        dom.style.bottom = 0;
        callback();
    }else if(dir == 3) {
        // 从左
        dom.style.right = "auto";
        dom.style.bottom = 0;
        dom.style.top = "auto"
        if(flag == 1) {
            //划入
            dom.style.left = -w + "px";
            callback();
        }else if(flag == 2) {
            // 划出
            dom.style.left = 0;
            callback(w)
        }
    }
}

// 根据进入方向执行不同的动画的方法
function animateFun(fatherDom,dom,dir,flag,animateDomJq,time) {
    /* 用来确定进入容器动画的元素的初始位置
    * fatherDom:动画元素的父元素
    * dom:动画元素
    * dir:鼠标活动方向
    * flag:1进入 2:离开
    * animateDomJq:jq获取的动画元素
    * time:动画的持续时间 单位：ms
    * */
    var isShow = flag == 1?false:flag == 2?true:null;//isShow:动画元素是显示还是隐藏
    initAnimateDomPos(fatherDom,dom,dir,isShow,flag,function (width) {
        if(dir == 0) {
            // 从上
            if(flag == 1) {
                // 进入
                animateDomJq.stop(true,true).slideDown(time)
            }else if(flag == 2) {
                // 离开
                animateDomJq.stop(true,true).slideUp(time)
            }
        }else if(dir == 1) {
            // 从右
            if(flag == 1) {
                // 进入
                dom.style.display = "block"
                animateDomJq.stop(true,true).animate({
                    "right":0
                },time)
            }else if(flag == 2) {
                // 离开
                animateDomJq.stop(true,true).animate({
                    "right":-width + "px",
                },time,function () {
                    animateDomJq.hide();

                })
            }
        }else if(dir == 2) {
            // 从下
            if(flag == 1) {
                // 进入
                animateDomJq.stop(true,true).slideDown(time)
            }else if(flag == 2) {
                // 离开
                animateDomJq.stop(true,true).slideUp(time)
            }
        }else if(dir == 3) {
            // 从左
            if(flag == 1) {
                // 进入
                dom.style.display = "block"
                animateDomJq.stop(true,true).animate({
                    "left":0
                },time)
            }else if (flag == 2) {
                // 离开
                animateDomJq.stop(true,true).animate({
                    "left":-width + "px"
                },time,function () {
                    animateDomJq.hide();

                })
            }
        }
    })
}

// 鼠标移入和移出调用的方法
function enterOrLeave(e,fatherJq,domClass,flag,time) {
    /*
    * e:事件对象
    * fatherJq：jquery获得的父元素
    * domClass：动画元素的class属性值
    * flag:1:进入，2：离开
    * time:动画时间
    * */
    var _this = fatherJq[0];// 获得该元素(动画元素的父元素)
    var animateDom = fatherJq.find("."+domClass)[0];// 获得该元素中的动画元素
    var animateDomJq = fatherJq.find("."+domClass);// 获得该元素中的动画元素

    direction(_this,e,function (res) {
        animateFun(_this,animateDom,res.index,flag,animateDomJq,time)
    })
}


var imgSlide = function (obj) {
    $("body").on("mouseenter","."+obj.father,function (e) {
        enterOrLeave(e,$(this),obj.son,1,obj.time)
    })
    $("body").on("mouseleave","."+obj.father,function (e) {
        enterOrLeave(e,$(this),obj.son,2,obj.time)
    })
}

调用该插件的代码：

imgSlide({
        "father":"imgwrap",// 父元素的class值
        "son":"content",// 子元素的class值
        "time":100,// 动画时间
    })

 

看淡江湖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
仿百度图片鼠标移动效果（jq插件）
12-14
仿照百度图片网页上面，鼠标从容器的不同方向移入移除出现不同的效果。
仿百度鼠标滑过 图片自动滑动分页
04-24
仿百度鼠标滑过，相册自动上下切换图片。兼容各种浏览器
仿百度图片做的瀑布流
06-25
仿百度图片做的瀑布流 jquery html5 javascript
Jquery实现百度的鼠标移入图片抖动的特效
weixin_30593261的博客
04-25 168
代码能说明一切： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > &lt...
jQuery学习20---鼠标移动时图片跟着移动，还有提示层的显示
奋斗、
06-30 5107
#tooltips { width:200px; height:200px; border:solid 1px red; position:absolute; } $(function() { //图片跟着鼠标移动的效果 /* $(document).mousemove(function(e) {
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
09-05
标题中的“当鼠标移动到图片上时跟随鼠标显示放大的图片效果”是一种常见的网页交互设计，通常用于增强用户体验，特别是展示商品详情或图像集时。这种效果通过JavaScript库，如jQuery，来实现，使得用户在鼠标悬停时...
jq鼠标滚动视差效果.rar_jq鼠标滚动视差效果
09-20
【标题】"jq鼠标滚动视差效果"是一个利用JavaScript库jQuery实现的互动视觉特效，它在用户滚动鼠标滚轮时，创造出一种深度感和动态视差。这种效果常见于现代网页设计中，能够提升用户体验，使浏览过程更具沉浸感。 ...
jquery根据鼠标位置移动背景图片插件
12-11
当用户在页面上移动鼠标时，该插件会捕捉到鼠标的当前位置，并据此调整指定元素的背景图片定位。这通常是通过CSS的`background-position`属性来实现的。开发者可以设置背景图片的初始位置，然后由插件动态更新这个...
jq鼠标滚动视差效果特效代码
03-20
在"jq鼠标滚动视差效果"中，jQuery扮演了关键角色，负责监听用户的鼠标滚动事件，并根据事件触发相应的视差滚动效果。 视差滚动的核心在于对页面元素的位置进行精确控制。当用户滚动页面时，不同元素会以不同的速度...
仿百度排列图片预览插件-Simple Lightbox
祈澈菇凉
09-11 602
很久以前遇到过这样的一个面试题，要求手写代码，实现百度图片的排列预览，并且可以左右点击查看下一张照片，当时没有做出来，这个问题也就一直放在了脑后，工作之后，遇到这样的需求之后，第一反应想到的是在源码网站里面找一个插件，方便省事，不在像从前那般手敲代码，一敲就是一整天的感觉。 图片.png 正好前几天在群里解答一个人的问题，遇到了类似的插件，于是...
用jq实现仿百度搜索框
热门推荐
luckylqh的博客
04-23 1万+
百度搜索框看似简单，但是涉及到了数据交互，如果能用vue来实现的话会简单很多，现在用jq模仿了一下，写的代码不是一般的多啊！ 当然头部要引入jq了html部分 <input type="text" id="txt" /> <input type="button" id="btn" value="百度一下"/> <div class="box" id="
JavaScript笔记
阿呆
08-10 3808
day06 JavaScript 网页所有的交互都要使用JavaScript Javascript的发展 网景找到ECMA(欧洲计算机联盟协会)统一了Javascript标准 我们要学习的就是这一套统一的标准 JavaScript的特点 可以使用任何文本编译工具编写 由浏览器内置的JavaScript引擎执行代码 解释执行:事先不编译,逐行执行 基于对象:内置了大量写好的对象 学习javasc...
实现百度的鼠标移入图片抖动的特效(提供步骤和源码)
weixin_33924770的博客
09-15 243
　　今天无聊，在上网时候发现了这个效果（效果演示地址：http://www.baidu.com/search/baike/usertask/mingmantianxia/）.     　　在鼠标放到图片上， 图片会有个上下抖动的特效。很喜欢这种感觉。在于是摸索了一下，下面是一些步骤。 　　 　　1。查看源文件，在查看后很纳闷的发现，此页并没有包含那些奖品信息。这样就断定代码在另一个页...
banner 跟随鼠标呈现视差效果
weixin_33819479的博客
11-01 608
参考 Element 官网，利用 js / jq 和 css3， 实现某图片随着鼠标移动呈现的视差效果。 <!DOCTYPE html> <html> <head> <title>banner 跟随鼠标呈现视差效果</title> <meta charset="utf-8" /> <style...
前端实现数据的分批加载（相当于分页），前端模糊查询
hhy1006894859的博客
12-17 9774
一、分批加载 当前端在渲染dom元素时，数据多的时候渲染非常慢。并且很容易造成页面卡死，解决这个问题通常是用分页来解决的。 分页有两种方式：1、后台进行分页，前端通过传参的方式每次请求接口进行分页。2、前台进行分页，请求一次接口返回所有的数据，前端通过js进行分页。 本文所实现的是：请求一次接口返回所有数据，通过js将所有的数据进行二次分组，分割成每10个(或多个)一组，加载时，先加载一部分...
js中对可编辑的div进行光标位置插入内容，和移动光标到最后
hhy1006894859的博客
05-07 6658
直接上代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=...
js实现导入导出Excel（结合js-xlsx）
hhy1006894859的博客
12-18 6640
本文是单纯用前端实现导入导出Excel的功能。 说明： 1、导入要求导入的数据是文本格式。 2、导出是导出json数据到excel文件 demo的githup地址：https://github.com/hushaohhy/imexport   代码如下： 1、通过以下命令行安装js-xlsx，在dist中复制出xlsx.full.min.js引入到页面中 。 js-xlsx的git...
bootstrap-closable-tab可关闭的tab标签页（插件）
hhy1006894859的博客
12-12 6552
Demo下载地址：https://download.csdn.net/download/hhy1006894859/10846105 这是从网上找的一款可以关闭的tab标签页插件： 1、这是基于bootstrap的插件，因此要引入bootstrap的相关插件 前提得引入jquery： 2、引入该插件： 代码如下： //子页面不用iframe，用div展示 var closab...
js实现base64的转化
hhy1006894859的博客
12-19 5776
本文实现的功能： 一、前言 1、字符串转base64。 2、base64转字符串。 3、input file选择的图片转base64。 4、input file选择图片在线预览。 5、input file 修改上传类型。   二、插件 插件所在github地址：https://github.com/hushaohhy/base64 将base64之间的转化封装成了插件如下： ...
jq鼠标移入图片放大切跟随鼠标移动
最新发布
11-28
JQ是指jQuery，是一个流行的JavaScript库，用于简化网页开发中的DOM操作。要实现鼠标移入图片放大，并且跟随鼠标移动，可以通过以下步骤： 1. 在HTML中添加一个图片元素，并为其添加一个唯一的ID，以便后续操作。 2. 使用jQuery的.hover()方法来监测鼠标移入和移出图片的事件。 3. 在鼠标移入事件的处理函数中，使用jQuery的.animate()方法来逐渐增大图片的尺寸。 4. 在鼠标移动事件的处理函数中，获取鼠标的当前位置，然后使用jQuery的.css()方法来动态调整图片的位置。 具体步骤可如下所示： HTML: ``` <img id="myImage" src="图片的URL" alt="图片"> ``` JavaScript: ``` $(document).ready(function(){ $("#myImage").hover( function(){ // 鼠标移入事件处理函数 $(this).animate({ width: '+=50px', // 图片宽度增加50像素 height: '+=50px' // 图片高度增加50像素 }, 200); // 动画持续时间为200毫秒 }, function(){ // 鼠标移出事件处理函数 $(this).animate({ width: '-=50px', // 图片宽度减少50像素 height: '-=50px' // 图片高度减少50像素 }, 200); // 动画持续时间为200毫秒 } ); $("#myImage").mousemove(function(event){ // 鼠标移动事件处理函数 var imagePosition = $(this).offset(); // 获取图片在页面中的位置 var mouseX = event.pageX - imagePosition.left; // 获取鼠标相对于图片的水平位置 var mouseY = event.pageY - imagePosition.top; // 获取鼠标相对于图片的垂直位置 $(this).css({left: mouseX, top: mouseY}); // 动态设置图片的位置 }); }); ``` 以上代码将在页面加载完成后绑定鼠标移入、移出以及移动事件，当鼠标移入图片时，图片逐渐放大，当鼠标移出图片时，图片逐渐恢复原始尺寸；同时，当鼠标在图片上移动时，图片将跟随鼠标的位置移动。注意，需要将代码中的"图片的URL"替换为实际图片的URL。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值