Home >Web Front-end >JS Tutorial >jquery implements the method of sliding the mouse over the small picture to view the large picture_jquery

jquery implements the method of sliding the mouse over the small picture to view the large picture_jquery

WBOY
WBOYOriginal
2016-05-16 15:49:311474browse

The example in this article describes the method of using jquery to slide the mouse over a small image to view a large image. Share it with everyone for your reference. The specific implementation method is as follows:

1. CSS part:

<style type="text/css">
ul{
  list-style:none;
}
li{
  float:left;
  margin-left:10px;
}
img{
  border:#CCCCCC solid 1px;
}
#max{
  position:absolute;
  display:none; /*隐藏层*/
}
</style>

2. HTML part:

苹果产品列表:
<ul>
<li><a href="images/apple_1_bigger.jpg"><img src="images/apple_1.jpg" /></a>
<li><a href="images/apple_2_bigger.jpg"><img src="images/apple_2.jpg" /></a>
<li><a href="images/apple_3_bigger.jpg"><img src="images/apple_3.jpg" /></a>
<li><a href="images/apple_4_bigger.jpg"><img src="images/apple_4.jpg" /></a>
</ul>

3. javascript part:

<script>
$(document).ready(function(){
  //e 事件对象,可以通过该事件对象获取事件的参数 e.pageX - X轴,距浏览器的左边的距离 e.pageY - y轴,距浏览器的顶端的距离 
  $("a").mouseover(function(e){
  //鼠标移上去 向body追加大图元素
    //大图的路径:当前连接的href属性值为大图的路径
    var $imgSrc = $(this).attr("href");
    var $maxImg ="<div id='max'><img src='"+$imgSrc+"'></div>";
    //在body中添加元素
    $("body").append($maxImg);
    //设置层的top和left坐标,并动画显示层
    $("#max").css("top", e.pageY+20).css("left",e.pageX+10).show('slow'); 
  }).mouseout(function(){
  //鼠标移开删除大图所在的层
    $("#max").remove();
  }).mousemove(function(e){
  //鼠标移动时改变大图所在的层的坐标
    $("#max").css("top", e.pageY+20).css("left",e.pageX+10);
  });
});
</script>

I hope this article will be helpful to everyone’s jquery programming design.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn