据说没有人能看到头，jquery实现

最新推荐文章于 2025-12-06 19:48:00 发布

原创最新推荐文章于 2025-12-06 19:48:00 发布 · 377 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #stylesheet #function #div #html #border

本文介绍了一个使用jQuery实现的动态网页效果，通过鼠标操作使图片区域无限增长，提供了一段有趣的互动体验。代码包含HTML、CSS、JS等元素，适合前端开发者学习。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>My JSP 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="../jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
       var temp = $('#mg');
       var s = $('#t');
       var n = 0;
       $('#h').mouseover(function(){
         var s1 = this.id;
         if(n==0)
         {
           $('#'+s1 + 'div').remove();
           temp.clone(true).appendTo($('#'+s1));
           n++;
         }
        });

       $('#h').mouseout(function(){
         var s1 = this.id;
         if(n!=0)
         {
           $('#'+s1+ 'span').remove();
           s.clone(true).appendTo($('#'+s1));
           n--;
         }
        });
     });
    </script>
</head>

<body>
     <table >
     <tr witdh="100%" height="100%">
     <td id="h" witdh="100%" height="100%">
        <a href="#" ><div id="t">请往下看（据说没人能看到头！）</div></a>
    </td>
   </tr>
   </table>
   <div style="display: none;">
     <span id="mg">
      <img alt="" src="../file/11111/22.jpg" border="0" >
     </span>
   </div>
</body>
</html>