JQuery 图片放大代码

最新推荐文章于 2019-05-17 17:58:25 发布

ALLsharps

最新推荐文章于 2019-05-17 17:58:25 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： jquery function class xhtml div html

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>图片放大代码</title>
    <script src="../scripts/jquery-1.4.4-vsdoc.js"></script>
<style type="text/css">
#tip   {position:absolute;color:#333;display:none;}
#tip s   {position:absolute;top:40px;left:-20px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #BBA transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip s i   {position:absolute;top:-10px;left:-8px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #fff transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip .t_box   {position:relative;background-color:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;bottom:-3px;right:-3px;}
#tip .t_box div  {position:relative;background-color:#FFF;border:1px solid #ACA899;background:#FFF;padding:1px;top:-3px;left:-3px;}
 
.tip   {width:200px;height:200px;border:1px solid #DDD;}
</style>
<script type="text/javascript">
    $(function () {
        $('.tip').mouseover(function() {
            var $tip = $('<div id="tip"><div class="t_box"><div><s><i></i></s><img src="' + this.src + '" /></div></div></div>');
            $('body').append($tip);
            $('#tip').show('fast');
        }).mouseout(function() {
            $('#tip').remove();
        }).mousemove(function(e) {
            $('#tip').css({ top: (e.pageY - 60) + "px", left: (e.pageX + 30) + "px" });
        });
    })
</script>
<p> </p>
<a href="/"><img class="tip" src="1.jpg" /></a>
<a href="#"><img class="tip" src="2.jpg" /></a>
<a href="#" ><img class="tip" src="3.jpg" /></a>

ALLsharps

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 图片放大代码

图片放大代码 #tip {position:absolute;color:#333;display:none;}#tip s {position:absolute;top:40px;left:-20px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:trans
复制链接

扫一扫