鼠标小图展示大图特效
鼠标小图展示大图特效
<script type="text/javascript">
var path = { "images/01.jpg": ["images/01big.jpg","***","160"],"images/02.jpg": ["images/02big.jpg","***","168"] };
//开始遍历动态加载图片地址等
$(function() {
$.each(path, function(key, value) {
var smallimg = $("<img src=" + key + "/>");
smallimg.attr("bigimg", value[0]);
smallimg.attr("bigname", value[1]);
smallimg.attr("bigheight", value[2]);
smallimg.mousemove(function(e) {
$("#detailbigimg").attr("src", $(this).attr("bigimg"));
$("#detailname").text($(this).attr("bigname"));
$("#detailheight").text($(this).attr("bigheight"));
$("#detail").css("top", e.pageY).css("left", e.pageX).show();
}).mouseout(function() { $("#detail").hide(); });
$("body").append(smallimg);
});
$("#detailclose").click(function() {
$("#detail").hide();
});
});
</script>
<body>
<div id="detail" style=" display:none; position:absolute;">
<img src="" id="detailbigimg" alt="这里是大图展示" />
<p id="detailname"></p>
<p id="detailheight"></p>
<input type="button" id="detailclose" value="关闭" />
</div>
</body>
作者： 人名树影/renmingshuying
