DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jquery預覽圖片實現鼠標放上去顯示實際大小
jquery預覽圖片實現鼠標放上去顯示實際大小
編輯:JavaScript綜合知識     

 本文為大家介紹的這個示例為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="Content-Type" content="text/html; charset=UTF-8" />  <title>jQuery圖片預覽-jQuery在線演示-jQuery學習</title>  <link href="http://www.jquery001.com/css/Stylesheet_min.css" rel="stylesheet" type="text/css" />  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  <style type="text/css">  img  {  border: none;  }      ul, li  {  margin: 0;  padding: 0;  }      li  {  list-style: none;  float: left;  display: inline;  margin-right: 10px;  }      #imglist img  {  width: 150px;  height: 120px;  }      #imgshow  {  position: absolute;  border: 1px solid #ccc;  background: #333;  padding: 5px;  color: #fff;  display: none;  }  </style>  <script type="text/javascript">  var ShowImage = function () {  xOffset = 10;  yOffset = 30;  $("#imglist").find("img").hover(function (e) {  $("<img id='imgshow' src='" + this.src + "' />").appendTo("body");  //下面是兩種樣式賦值方法  //$("#imgshow").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("slow");  $("#imgshow").css({"top":(e.pageY - xOffset) + "px","left":(e.pageX + yOffset) + "px"}).fadeIn("slow");  }, function () {  $("#imgshow").remove();  });  };      jQuery(document).ready(function () {  ShowImage();  });  </script>      </head>  <body>  <div id="page-wrap">  <div id="content-wrap">  <div id="content-left" class="demo">  <ul id="imglist">  <li><a>  <img src="http://g.hiphotos.baidu.com/image/w%3D2048/sign= 0a53d9eca1cc7cd9fa2d33d90d39203f/35a85edf8db1cb13efa8fe12df54564e93584bea.jpg" alt=" 圖片" /></a></li>  <li><a>  <img src="http://a0.att.hudong.com/70/44/14300000029584127555444098375.jpg" alt="圖片" /></a></li>  </ul>  </div>  </div>      </div>  </body>  </html> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved