您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 图片特效 >

    jquery鼠标悬停到小图片显示放大图片的图片提示效果

    时间:2014-03-25 08:46 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • 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>
      <title>jquery悬停时的图片提示</title>
      <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
      <style type="text/css">
      body{
      margin:0;
      padding:40px;
      background:#fff;
      font:80% Arial, Helvetica, sans-serif;
      color:#555;
      line-height:180%;
      }
      img{border:none;}
      ul,li{
      margin:0;
      padding:0;
      }
      li{
      list-style:none;
      float:left;
      display:inline;
      margin-right:10px;
      border:1px solid #AAAAAA;
      }
      /* tooltip */
      #tooltip{
      position:absolute;
      border:1px solid #ccc;
      background:#333;
      padding:2px;
      display:none;
      color:#fff;
      }
      </style>
      <script type="text/javascript">
      //<![CDATA[
      $(function(){
      var x = 10;
      var y = 20;
      $("a.tooltip").mouseover(function(e){
      this.myTitle = this.title;
      this.title = "";
      var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
      var tooltip = "<div id='tooltip'><img src='"+ this.href +"' style="white-space:pre"> //把它追加到文档中
      $("#tooltip")
      .css({
      "top": (e.pageY+y) + "px",
      "left":  (e.pageX+x)  + "px"
      }).show("fast");  //设置x坐标和y坐标,并且显示
          }).mouseout(function(){
      this.title = this.myTitle;
      $("#tooltip").remove(); //移除
          }).mousemove(function(e){
      $("#tooltip")
      .css({
      "top": (e.pageY+y) + "px",
      "left":  (e.pageX+x)  + "px"
      });
      });
      })
      //]]>
      </script>
      </head>
      <body>
      <h3>jquery图片提示效果:把你的鼠标放在图片上试试:</h3>
      <ul>
      <li><a href="http://www.codesocang.com/uploads/131119/2-1311191534022G.jpg" class="tooltip" title="风景好美"><img src="http://www.codesocang.com/uploads/131119/2-1311191534022G.jpg" alt="风景好美" /></a></li>
      <li><a href="http://www.codesocang.com/uploads/allimg/131119/2-131119144Z90-L.jpg" class="tooltip" title="绿色自然"><img src="http://www.codesocang.com/uploads/allimg/131119/2-131119144Z90-L.jpg" alt="绿色自然"/></a></li>
      </ul>
      </body>
      </html>
    jquery鼠标悬停到小图片显示放大图片的图片提示效果由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/7024.html
    标签:网站源码