您的位置：首页 > Web前端 > JQuery

jquery 放大图片

2015-11-05 15:37 736 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-2.1.1.min.js" ></script>
</head>
<script type="text/javascript">
$(function(){
var x=10;
var y=-20;
$("a.tooltip").mouseover(function(e){  //当鼠标指针位于元素上方时，会发生 mouseover 事件。
this.mutitle=this.title; //获取当前的元素的title
this.title="";
var imgtitle=this.mutitle?"<br/>"+this.title:"";
var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='预览效果 '/>"+imgtitle+"</div>";
$('body').append(tooltip);  //追加文档
$("#tooltip").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show('fast');    //设置坐标 x和y，显示
}).mouseout(function(){   //鼠标移开时候
this.title=this.mutitle;
$('#tooltip').remove(); //删除这个id
}).mousemove(function(e){ //当鼠标指针在指定的元素中移动时
$('#tooltip').css({ //显示的位置
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
})
//图片放大

/*
* 鼠标移动元素时
* 创建一个div元素 并且附带着放大的图片效果
*追加当当前文档当中
* 设置 图片的位置 并显示show（‘fast’）快
*
* 鼠标离开的时候 删除创建的id
*
* 当鼠标移动时候 速则设置放大图片的位置
* */
</script>
<style>
img
{

}
</style>
<body>
<ul>
<li><a href="2.jpg" title="mac "   class="tooltip" ><img src="2.jpg" alt="mac" /></a></li>
</ul>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航