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">
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<title>类似淘宝网的图片放大代码</title>
-
<head>
+
<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
-
<title>鼠标指向图片渐变特效jQuery代码</title>
+
<style type="text/css">
-
<script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
+
#tip  {position:absolute;color:#333;display:none;}
-
<script type="text/javascript">      
+
#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;}
-
$(document).ready(function(){
+
#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;}
-
    $(".rollover").css({'opacity':'0'});
+
#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;}
-
$('.img_list a').hover(
+
-
function() {
+
.tip  {width:82px;height:82px;border:1px solid #DDD;}
-
$(this).find('.rollover').stop().fadeTo(500, 1);
+
-
},
+
-
function() {
+
-
$(this).find('.rollover').stop().fadeTo(500, 0);
+
-
}
+
-
)
+
-
 
+
-
});
+
-
</script>
+
-
<style>
+
-
img { border:0px; }
+
-
ul.img_list {
+
-
display:inline;
+
-
height:280px;
+
-
list-style-image:none;
+
-
list-style-position:outside;
+
-
list-style-type:none;
+
-
}
+
-
li.image_one a {
+
-
display:block;  
+
-
width:280px;  
+
-
height:280px;  
+
-
position:relative;
+
-
}
+
-
li.image_one a .rollover {
+
-
display:block;  
+
-
position:absolute;  
+
-
top:0;  
+
-
left:0;  
+
-
width:280px;  
+
-
height:280px;  
+
-
background:url(http://i.minus.com/ibyf5GLfGDgdNq.jpg);
+
-
}
+
</style>
</style>
-
</head>
+
<script type="text/javascript">
-
<body>
+
$(function(){
-
<div style="width:280px; margin:20px auto 0px auto;">
+
  $('.tip').mouseover(function(){
-
<ul class="img_list">
+
      var $tip=$('<div id="tip"><div class="t_box"><div><s><i></i></s><img src="'+this.src+'" /></div></div></div>');
-
<li class="image_one"><a href="#"><span class="rollover"></span><img src="http://i.minus.com/ibBEBmBDAzp9t.jpg" alt="" width="280" height="280" /></a></li>
+
      $('body').append($tip);
-
</ul>
+
      $('#tip').show('fast');
-
</div>
+
  }).mouseout(function(){
-
<div style="clear:both"></div>
+
      $('#tip').remove();
-
</body>
+
  }).mousemove(function(e){
-
</html>
+
      $('#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">

  1. tip {position:absolute;color:#333;display:none;}
  2. 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;}
  3. 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;}
  4. tip .t_box {position:relative;background-color:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;bottom:-3px;right:-3px;}
  5. 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=$('
<img src="'+this.src+'" />
'); 
     $('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>

Retrieved from "http://2014.igem.org/Talk:Team:LZU-China/tempfortest"