2020-10-19

最新推荐文章于 2024-09-30 23:36:44 发布

weixin_48745619

最新推荐文章于 2024-09-30 23:36:44 发布

阅读量57

点赞数

分类专栏： 3 文章标签： html5

本文链接：https://blog.csdn.net/weixin_48745619/article/details/109158980

版权

3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

图片放大html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>

       <script type="text/javascript" src="js/jquery-1.3.1.js" ></script>

       <script type="text/javascript">

   $(function(){
var $div="<div id='div1' style='border: 2px solid black;'><img width='700px' height='700px' ></div>";
$("a").mouseover(function(event){ //鼠标移入
$("body").append($div);//追加到网页中
var src=$(this).attr("href")
var arr=src.split(".jpg")
var src=arr.join("_big.jpeg")
$("#div1 img").attr("src",src);//设置显示图片的img标签的src路径
});


$("a").mouseout(function(){//鼠标移出
$("#div1").remove();//删除div
});

$("a").mousemove(function(event){//鼠标移动 event是事件对象 ,event.clientX 获得鼠标当前的X轴坐标,event.clientY 获得鼠标当前的Y轴坐标
var x=event.clientX+20;
var y=event.clientY+20;
$("#div1").css({position:"absolute",left:x,top:y});//设置div绝对定位坐标就是距离鼠标当前的位置
});

});
       </script>

       <style type="text/css">

body {
margin: 0;
padding: 40px;
background: #fff;
font: 80% Arial, Helvetica, sans-serif;
color: #555;
line-height: 180%;
}

img {
border: none;
}

ul, li {
margin: 0;
padding: 0;
}

li {
list-style: none;
float: left;
display: inline;
margin-right: 10px;
border: 1px solid #AAAAAA;
}

/* tooltip */
#tooltip {
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 2px;
display: none;
color: #fff;
}
       </style>
   </head>
   <body>
<ul>
<li>
<a href="img/bxgz_big.jpeg" class="tooltip" title="白雪公主">
<img src="img/bxgz.jpg" alt="白雪公主" />
</a>
</li>
<li>
<a href="img/sj_big.jpeg" class="tooltip" title="妖精">
<img src="img/sj.jpg" alt="妖精" />
</a>
</li>
<li>
<a href="img/kn_big.jpeg" class="tooltip" title="柯南">
<img src="img/kn.jpg" alt="柯南" />
</a>
</li>
<li>
<a href="img/pdx_big.jpeg" class="tooltip" title="蜡笔小新">
<img src="img/pdx.png" alt="蜡笔小新" />
</a>
</li>
</ul>
   </body>
</html>

html留言板

<!DOCTYPE html>
<html>

       </style>
       <script type="text/javascript">
           $(function(){

           $("#btn1").click(function(){
               var text=$("#txtName").val();
               var text1=$("#txtCom").val();
               $("#olid").append("<li>昵称为"+text+"的用户说了"+text1)
           })
       })
       </script>
   </head>

<body>

       <h3>留言版信息</h3>
   <ol id="olid">
       <li id="tr1">昵称为“安妮”的用户说了“那个……你看见过我的小熊吗？”</li>
   </ol>
   <br />
   昵称：<input id="txtName" type="text" name="name" value="" />
   <br />
   评论：<textarea id="txtCom"></textarea>
   <br />
   <input id="btn1" type="button" name="name" value="评论" />
       <!--<div>
           <table>