Talk:Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
(Replaced content with "<title>JS放大小图为大图</title> <img src="/images/logo_s.gif" onMouseOver="this.width=this.width*2;" onMouseOut="this.width=this.width/2;">")
Line 1: Line 1:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
<title>JS放大小图为大图</title>
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<img src="/images/logo_s.gif" onMouseOver="this.width=this.width*2;" onMouseOut="this.width=this.width/2;">
-
<head>
+
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
-
<title>Image Preview with jQuery</title>
+
-
<meta name="description" content="Easiest jQuery Tooltip Ever">
+
-
<script src="http://www.codefans.net/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
+
-
<script type="text/javascript">
+
-
this.imagePreview = function(){
+
-
xOffset = 10;
+
-
yOffset = 30;
+
-
$("a.preview").hover(function(e){
+
-
this.t = this.title;
+
-
this.title = "";
+
-
var c = (this.t != "") ? "<br/>" + this.t : "";
+
-
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
+
-
$("#preview")
+
-
.css("top",(e.pageY - xOffset) + "px")
+
-
.css("left",(e.pageX + yOffset) + "px")
+
-
.fadeIn("fast");
+
-
    },
+
-
function(){
+
-
this.title = this.t;
+
-
$("#preview").remove();
+
-
    });
+
-
$("a.preview").mousemove(function(e){
+
-
$("#preview")
+
-
.css("top",(e.pageY - xOffset) + "px")
+
-
.css("left",(e.pageX + yOffset) + "px");
+
-
});
+
-
};
+
-
// starting the script on page load
+
-
$(document).ready(function(){
+
-
imagePreview();
+
-
});
+
-
</script>
+
-
</meta>
+
-
<style>
+
-
body {
+
-
margin:0;
+
-
padding:40px;
+
-
background:#fff;
+
-
font:80% Arial, Helvetica, sans-serif;
+
-
color:#555;
+
-
line-height:180%;
+
-
}
+
-
 
+
-
h1{
+
-
font-size:180%;
+
-
font-weight:normal;
+
-
color:#555;
+
-
}
+
-
h2{
+
-
clear:both;
+
-
font-size:160%;
+
-
font-weight:normal;
+
-
color:#555;
+
-
margin:0;
+
-
padding:.5em 0;
+
-
}
+
-
a{
+
-
text-decoration:none;
+
-
color:#f30;
+
-
}
+
-
p{
+
-
clear:both;
+
-
margin:0;
+
-
padding:.5em 0;
+
-
}
+
-
pre{
+
-
display:block;
+
-
font:100% "Courier New", Courier, monospace;
+
-
padding:10px;
+
-
border:1px solid #bae2f0;
+
-
background:#e3f4f9;
+
-
margin:.5em 0;
+
-
overflow:auto;
+
-
width:800px;
+
-
}
+
-
 
+
-
img{border:none;}
+
-
ul,li{
+
-
margin:0;
+
-
padding:0;
+
-
}
+
-
li{
+
-
list-style:none;
+
-
float:left;
+
-
display:inline;
+
-
margin-right:10px;
+
-
}
+
-
 
+
-
#preview{
+
-
position:absolute;
+
-
border:1px solid #ccc;
+
-
background:#333;
+
-
padding:5px;
+
-
display:none;
+
-
color:#fff;
+
-
}
+
-
 
+
-
 
+
-
</style>
+
-
</head>
+
-
<body>
+
-
<h1>Easy Image Preview with jQuery</h1>
+
-
<h2>Image gallery  (without caption)</h2>
+
-
<ul>
+
-
<li><a href="/jscss/demoimg/wall1.jpg" class="preview"><img src="/jscss/demoimg/wall_s1.jpg" alt="gallery thumbnail" /></a></li>
+
-
<li><a href="/jscss/demoimg/wall4.jpg" class="preview"><img src="/jscss/demoimg/wall_s4.jpg" alt="gallery thumbnail" /></a></li>
+
-
</ul>
+
-
<h2>Image gallery (with caption)</h2>
+
-
<ul>
+
-
<li><a href="/jscss/demoimg/wall3.jpg" class="preview" title="Autumn"><img src="/jscss/demoimg/wall_s3.jpg" alt="gallery thumbnail" /></a></li>
+
-
<li><a href="/jscss/demoimg/wall4.jpg" class="preview" title="Skiing on a mountain"><img src="/jscss/demoimg/wall_s4.jpg" alt="gallery thumbnail" /></a></li>
+
-
</ul>
+
-
</body>
+
-
</html>
+

Revision as of 09:47, 6 September 2014

<title>JS放大小图为大图</title> <img src="/images/logo_s.gif" onMouseOver="this.width=this.width*2;" onMouseOut="this.width=this.width/2;">

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