Talk:Team:LZU-China/tempfortest
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
- | + | <title>类似淘宝网的图片放大代码</title> | |
- | + | <script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script> | |
- | <title> | + | <style type="text/css"> |
- | <script src="/ajaxjs/jquery1.3.2.js | + | #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:82px;height:82px;border:1px solid #DDD;} | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
</style> | </style> | ||
- | </ | + | <script type="text/javascript"> |
- | + | $(function(){ | |
- | <div | + | $('.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="/jscss/demoimg/201012/1.jpg" /></a> | ||
+ | <a href="#"><img class="tip" src="/jscss/demoimg/201012/2.jpg" /></a> | ||
+ | <a href="#" ><img class="tip" src="/jscss/demoimg/201012/3.jpg" /></a> |
Revision as of 09:52, 6 September 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>类似淘宝网的图片放大代码</title> <script type="text/javascript" src="/ajaxjs/jquery1.3.2.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:82px;height:82px;border:1px solid #DDD;} </style> <script type="text/javascript"> $(function(){
$('.tip').mouseover(function(){var $tip=$('
$('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>
<a href="/"><img class="tip" src="/jscss/demoimg/201012/1.jpg" /></a> <a href="#"><img class="tip" src="/jscss/demoimg/201012/2.jpg" /></a> <a href="#" ><img class="tip" src="/jscss/demoimg/201012/3.jpg" /></a>