程序员开发实例大全宝库

网站首页 > 编程文章 正文

jQuery第三十六天练习（jquery第三章上机作业答案）

zazugpt 2024-08-17 01:56:28 编程文章 28 ℃ 0 评论 
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    let x = 10;
    let y = 20;
    $(".box").mouseover(function(e){
      this.myTitle = this.title;
      this.title = "";
            
      let imgTitle;
            
      if (this.myTitle){
          imgTitle = "<br />"+this.myTitle;
      }
      else{
          imgTitle = "";
      }
      let hdw = "<div id='two'><img src='"+ this.href +"' alt='hdw' />"+imgTitle+"<\/div>";
      $("body").append(hdw);
          $("#two").css({
            "left":(e.pageX+x)+"px",
             "top":(e.pageY+y)+"px"	
          }).show("fast");
      }).mouseout(function(){
          this.title = this.myTitle;	
          $("#two").remove();	
      }).mousemove(function(e){
          $("#two").css({
             "left":(e.pageX+x)+"px",
             "top":(e.pageY+y)+"px"	
          });	
    });
    
});
</script>
<style type="text/css">
body { 
    font:12px "宋体"; 
    padding:100px; 
}

img { border:none;}

#two { 
    border:1px solid #ccc; 
    background:#eee;   
    line-height:30px;  
    position:absolute; 
    border:5px solid #ccc; 
    display:none; 
    text-align:center; 
    font-size:14px; 
    font-weight:bold;
}
</style>
</head>
<body>
    <a href="images/dt.jpg" class="box" title="风景"><img src="images/xt.PNG" alt="hdw" /></a>
</body>
</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表