鼠标小图展示大图特效
<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>
