龙空技术网

jQuery第三十六天练习

轻鸟545 228

前言:

此刻朋友们对“jquery36”大概比较注重,各位老铁们都需要知道一些“jquery36”的相关知识。那么小编在网摘上收集了一些关于“jquery36””的相关资讯,希望大家能喜欢,各位老铁们快快来了解一下吧!

<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>

标签: #jquery36