jquery实现图片跟随鼠标的实例

2024-10-20 12:29:01

jquery实现图片跟随鼠标的实例

开发后台写页面困难的一比啊，想写个鼠标移动某连接右侧显示二维码，并跟随鼠标移动的功能，各种查资料，花了一小天终于搞出来了，代码的记下来，浪费了我这么多时间，记你一辈子，这个可以直接在W3School直接运行，可以根据某行显示某个特定的图片，自己定义就行

实现代码：

<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jquery图片跟随鼠标</title>
  <script type="text/javascript">
    function hideImg(num){
      if(num.className == "1_name"){
        $('#1_erweima').hide();
      }else if(num.className == "2_name"){
        $('#2_erweima').hide();
      }
    } 

    function showImg(num) {
      var intX = window.event.clientX;
      var intY = window.event.clientY;
      if (num.className == "1_name") {
        $('#1_erweima').css("left", intX + 20 + "px");
        $('#1_erweima').css("top", intY + 10 + "px");
        $('#1_erweima').show();
      } else if (num.className == "2_name") {
        $('#2_erweima').css("left", intX + 20 + "px");
        $('#2_erweima').css("top", intY + 10 + "px");
        $('#2_erweima').show();
      }
    }
  </script>
</head>
<body>
<table>
  <tr>
    <th>
      <a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="1_name" target="_blank" onmouseout="hideImg(this)" onmousemove="showImg(this)" onmouseover="showImg(this)" style="color: #1192cc;">我是百度，会跟随</a>
    </th>
  </tr>
  <tr>
    <th>
      <a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="1_name" target="_blank" style="color: #1192cc;">我是百度</a>
    </th>
  </tr>
  <tr>
    <th>
      <a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="2_name" target="_blank" onmouseout="hideImg(this)" onmousemove="showImg(this)" onmouseover="showImg(this)" style="color: #1192cc;">我也是百度，也跟随</a>
    </th>
  </tr>
  <div id="1_erweima" style="display:none;right:20;position:absolute;">
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" />
  </div>
  <div id="2_erweima" style="display:none;right:20;position:absolute;">
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" />
  </div>
</table>
</body>
</html>

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

基于jquery实现一张图片点击鼠标放大再点缩小

复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery-1.8.3.min.js"></script> <sc
基于jquery实现的鼠标滑过按钮改变背景图片

复制代码代码如下: $(document).ready(function () { //按钮样式切换 $("#btFeedBack").hover( function () { $(this).removeClass("btFeed").addClass("btFeedhover"); }, function () { $(this).removeClass("btFeedhover").addClass("btF
jquery实现鼠标拖动图片效果示例代码

复制代码代码如下: <!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"> <head> <meta http-equiv=&qu
jquery给图片添加鼠标经过时的边框效果

一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可错误代码如下:注意红色部分设置 (出发点就错了) 复制代码代码如下: <html> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></s
jQuery当鼠标悬停时放大图片的效果实例

这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码代码如下: <UL id=gallery sizcache="6" sizset="7"> <LI sizcach
基于jquery的滚动鼠标放大缩小图片效果

今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项: 复制代码代码如下: $(function(){ $(".body img").each(function(){ if($.browser.msie){ $(this).bind("mousewheel",function(e){ var e=e|
基于jquery的仿百度的鼠标移入图片抖动效果

1.查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息.这样就断定代码在另一个页面中.于是想当然的以为是用的框架连接的地址.结果没查到,却看到了一个这样的信息: 复制代码代码如下: <div id ="task-intro-box"></div> <div id ="task-awards"></div> <div id ="
jquery实现图片跟随鼠标的实例

jquery实现图片跟随鼠标的实例开发后台写页面困难的一比啊,想写个鼠标移动某连接右侧显示二维码,并跟随鼠标移动的功能,各种查资料,花了一小天终于搞出来了,代码的记下来,浪费了我这么多时间,记你一辈子,这个可以直接在W3School直接运行,可以根据某行显示某个特定的图片,自己定义就行实现代码: <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"><
js实现精美的图片跟随鼠标效果实例

本文实例讲述了js实现精美的图片跟随鼠标效果实现方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>精美js鼠标跟随代码</title> </head> <body> <script> A=doc
jQuery实现图片跟随效果

本文实例为大家分享了jQuery实现图片跟随效果的具体代码,供大家参考,具体内容如下实现效果要实现的功能: * 鼠标进来,显示大图片: * 鼠标出去,隐藏大图片: * 鼠标在大图片里边动,大图片跟着动. 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title he
javascript实现图片跟随鼠标移动效果的方法

本文实例讲述了javascript实现图片跟随鼠标移动效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片跟着鼠标走</title&g
js实现图片跟随鼠标移动效果

本文实例为大家分享了js实现图片跟随鼠标移动效果的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 1000px; height: 600px; background: #cecece; margin: 20px auto; } img{ width: 5
jQuery自定义图片上传插件实例代码

摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片效果调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q
js图片跟随鼠标移动代码

在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下. 在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里,http://www.jb51.net/article/17266.htm. 我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只
jquery实现图片列表鼠标移入微动

本效果使用jQuery和CSS实现了图片列表,当鼠标移入时图片向左微动,移出则复原. 其中的jQuery事件使用mouseenter 和 mouseleave ,事件绑定方法使用新推荐的on方法. 代码如下: <!DOCTYPE html> <html> <head><meta name="viewport" content="width=device-width, initial-scale=1" /> <ti
jQuery实现div跟随鼠标移动

重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动代码如下:(注意看绿色部分的解释) <!DOCTYPE html> <html> <head> <meta charset="{utf-8}"> <title></title> <script src="../jquery-3.2.

jquery实现图片跟随鼠标的实例

相关推荐

随机推荐