js或者jquery使图片放大的问题?
我想实现如图的效果,鼠标触碰就会放大,移开鼠标就会变回原样?怎么做,急求,我知道用jquery或者js的鼠标事件,可是具体不知道如何操作???...
我想实现如图的效果,鼠标触碰就会放大,移开鼠标就会变回原样?怎么做,急求,我知道用jquery或者js的鼠标事件,可是具体不知道如何操作???
展开
2个回答
展开全部
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></script>
<script language="javascript">
$(function(){
var ei = $("#large");
ei.hide();
$("#img1, img").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
}).mouseout( function(){
ei.hide();
})
$("#f1").change(function(){
$("#img1").attr("src","file:///"+$("#f1").val());
})
});
</script>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
上传预览图片:<br>
<input id="f1" name="f1" type="file" /><br>
<img id="img1" width="120" height="60" src="http://www.cssrain.cn/skins/tim/logo-jq.gif">
<div id="large"></div>
<br><br><br><br><br><br>
鼠标滑过预览图片
</body>
</html>
展开全部
这种用插件就可以了,给你找了一个: http://www.ui3g.com/code/uicode-327.html ,看看合不合适你的要求
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询