JavaScript和CSS实现详情图片显示大图特效

来源：互联网发布：算法导论书在线观看编辑：程序博客网时间：2024/06/05 14:35

<!doctype html><html><head><title>JavaScript和CSS实现详情图片显示大图特效</title><meta http-equiv="content/text" charset="utf-8"><style type="text/css">BODY {FONT-SIZE: 14px;LINE-HEIGHT: 1.5;TEXT-DECORATION: none;FONT-FAMILY: simsun, Arial, "宋体";background-color: #FFFFFF;}td a:HOVER {color: red;background-color:#89d9fa;}  #lookImg /*新增加大图样式*/{margin: 0 auto;border: 1px solid #0F0F0F;padding: 20px;height:660px;width: 480px;background: #FFFFFF;display: none;position: absolute; /*  这个对显示鼠标的位置很重要，如果不是绝对位置的话，将显示的地方不一样*/vertical-align: middle;text-align: center;font-family: Arial;} </style><script src="http://code.jquery.com/jquery-1.11.2.js"></script><script>$(function(){$(".lookImages").mouseover(function (e) {var p=$(this).attr("p");var lookImg = "<div id = 'lookImg'>";lookImg+= "<img src ='"+p+"'  height='460px' width='460px' />";lookImg+= "</div>"; $("body").append(lookImg);$("#lookImg").css({   "bottom": (e.pageY/2) + "px",   "right": (e.pageX/2) + "px"}).show("slow"); }).mouseout(function () {$("#lookImg").remove();}).mousemove(function (e) {$("#lookImg").css({ "bottom": (e.pageY/2) + "px", "right": (e.pageX/2) + "px"});});//----mouseover--end});</script></head><body><div><a class="lookImages" style="color: blue;cursor: pointer;"p="http://weilailm.duapp.com/wechat/resource/images/qrcode_for_med.jpg">lookImages</a></div></body></html>

0 0