图片预览效果 - Newbie_小白

图片预览效果
HTML：
<!DOCTYPE >
<html>

   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>无标题文档</title>
      <style type="text/css">
         * {
            margin: 0px;
            padding: 0;
            font-family: "微软雅黑", "arial", " sans-serif";
            font-size: 16px;
         }
         
         body {
            margin: 20px;
         }
         
         #ul li {
            list-style: none;
            float: left;
            display: inline;
            margin-right: 10px;
            border: 1px solid #AAA;
            padding: 10px;
         }
         
         #ul li img {
            padding: 3px;
            cursor: hand;
            border: none;
         }
         /*#ul li:last-child{
            display: none;
         }*/
         
         .clsImg {
            position: absolute;
            border: 1px #ccc solid;
            width: 486px;
            height: 322px;
            display: none;
         }
      </style>
      <script type="text/javascript" src="js/jquery-2.2.2.min.js">
      </script>

      <script type="text/javascript">
         $(function() {
            var x = 10;
            var y = 20;
            $("#ul li img").mousemove(function(e) {
               $("#imageTip").attr("src", this.src) //设置提示图片的路径
                  .css({
                     "top": (e.pageY + y) + "px",
                     "left": (e.pageX + x) + "px"
                  }).show(1000); //显示图片
            });
            $("#ul li img").mouseout(function() {
               $("#imageTip").hide(); //隐藏图片
            });
         })
      </script>
   </head>

   <body>
      <ul id="ul">
         <li>
            <img src="img/floower (1).jpg" alt="">
         </li>
         <li>
            <img src="img/floower (2).jpg" alt="">
         </li>
         <li>
            <img src="img/floower (3).jpg" alt="">
         </li>

      </ul>
      <img src="img/floower (1).jpg" alt="" class="clsImg" id="imageTip">

   </body>

</html>

result：

运行
：
posted on 2016-05-16 10:44 Newbie_小白阅读(171) 评论(0) 编辑收藏举报