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">
+
<title>鼠标经过图片更换图片</title>
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<a href="http://www.baidu.com"><img src="http://www.codefans.net/jscss/demoimg/wall_s3.jpg" onmouseover="this.src='http://www.codefans.net/jscss/demoimg/wall_s5.jpg'" border="0" /></a>
-
<head>
+
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
+
-
<title>当前页面查看原图</title>
+
-
<style type="text/css">
+
-
div, ul, li {
+
-
margin: 0px;
+
-
padding: 0px;
+
-
list-style-type: none;
+
-
}
+
-
#Over {
+
-
position: absolute;
+
-
width: 100%;
+
-
z-index: 100;
+
-
left: 0px;
+
-
top: 0px;
+
-
}
+
-
+
-
.img {
+
-
width:90%;
+
-
background-color: #FFF;
+
-
height: 90%;
+
-
padding: 3px;
+
-
border-top-width: 1px;
+
-
border-right-width: 1px;
+
-
border-bottom-width: 1px;
+
-
border-left-width: 1px;
+
-
border-top-style: solid;
+
-
border-right-style: solid;
+
-
border-bottom-style: solid;
+
-
border-left-style: solid;
+
-
}
+
-
+
-
.content {
+
-
text-align: center;
+
-
width: 400px;
+
-
height:300px;
+
-
margin-right: auto;
+
-
margin-left: auto;
+
-
}
+
-
.EnlargePhoto {
+
-
cursor: pointer;
+
-
}
+
-
.TempContainer {
+
-
position: absolute;
+
-
z-index: 101;
+
-
margin-right: 0px;
+
-
margin-left: 0px;
+
-
text-align: center;
+
-
width: 100%;
+
-
cursor: pointer;
+
-
}
+
-
</style>
+
-
</head>
+
-
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
+
-
<script type="text/javascript">
+
-
$(document).ready(function(e) {
+
-
var ImgsTObj = $('.EnlargePhoto');//class=EnlargePhoto的都是需要放大的图像
+
-
if(ImgsTObj){
+
-
  $.each(ImgsTObj,function(){
+
-
  $(this).click(function(){
+
-
  var currImg = $(this);
+
-
  CoverLayer(1);
+
-
  var TempContainer = $('<div class=TempContainer></div>');
+
-
  with(TempContainer){
+
-
  appendTo("body");
+
-
  css('top',currImg.offset().top);
+
-
  html('<img border=0 src=' + currImg.attr('src') + '>');
+
-
  }
+
-
  TempContainer.click(function(){
+
-
  $(this).remove();
+
-
  CoverLayer(0);
+
-
  });
+
-
  });
+
-
  });
+
-
}
+
-
else{
+
-
return false;
+
-
}
+
-
+
-
//====== 使用/禁用蒙层效果 ========
+
-
function CoverLayer(tag){
+
-
with($('#Over')){
+
-
if(tag==1){
+
-
css('height',$(document).height());
+
-
css('display','block');
+
-
css('opacity',0.9);
+
-
css("background-color","#000");
+
-
}
+
-
else{
+
-
css('display','none');
+
-
}
+
-
}
+
-
}
+
-
});
+
-
+
-
+
-
</script>
+
-
<body>
+
-
<div class="content">
+
-
<IMG class="img EnlargePhoto" src="/jscss/demoimg/wall5.jpg"><br /><br />
+
-
<IMG class="img EnlargePhoto" src="/jscss/demoimg/wall3.jpg"><br /><br />
+
-
</div>
+
-
</body>
+
-
</html>
+

Revision as of 09:44, 6 September 2014

<title>鼠标经过图片更换图片</title> <a href="http://www.baidu.com"><img src="wall_s3.jpg" onmouseover="this.src='http://www.codefans.net/jscss/demoimg/wall_s5.jpg'" border="0" /></a>

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