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 HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<html>
-
<head>
+
        <head>
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
+
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
<title>CSS实现鼠标移动到图片，更换图片</title>
+
                <title>图片提示效果</title>
-
</head>
+
                <script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
-
<style type="text/css">
+
                <style type="text/css">
-
*{ margin:0; padding:0;}
+
                  body{margin:0 ;padding:40px;line-height:180%;}
-
ul li{ list-style:none;}
+
                  img{border:none;}
-
.nav{ width:800px; height:40px; margin:150px auto;}
+
                  ul,li{margin:0 ;padding:0;}
-
.nav ul li{ float:left; width:200px;}
+
                  li{list-style:none;display:inline; border:1px solid #999;float:left; margin-right:10px;}
-
.nav ul li a:link,a:visited{ display:block; width:190px; height:40px; background:url(/jscss/demoimg/wall_s1.jpg);}/*链接、点击后*/
+
                  /*tooltip*/
-
.nav ul li a:hover{background:url(/jscss/demoimg/wall_s2.jpg);}/*鼠标经过*/
+
                  #tooltip{position:absolute;border:1px solid #CCC;display:none;color:#FFF; padding:2px; background:#333;}
-
.nav ul li a:active{background:url(/jscss/demoimg/wall_s3.jpg);}/*点击时*/
+
                </style>
-
</style>
+
                <script type="text/javascript">
-
<body>
+
                        $(function(){
-
<div class="nav">
+
                                var x = 10;
-
<ul>
+
                                var y = 20;
-
    <li><a href="#"></a></li>
+
            $("a.tooltip").mouseover(function(e){
-
        <li><a href="#"></a></li>
+
                      this.myTitle = this.title;
-
        <li><a href="#"></a></li>
+
                          this.title = "";
-
    </ul>
+
                      var imgTitle = this.myTitle?"<br>"+ this.myTitle : "";
-
</div>
+
                      var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
-
</body>
+
                        $("body").append(tooltip);       //把它追加到文档中
 +
                        $("#tooltip").css({
 +
                                  "top": (e.pageY+y) + "px",
 +
                                  "left":  (e.pageX+x)  + "px"
 +
                          }).fadeIn(600);          //设置x坐标和y坐标，并且显示
 +
            }).mouseout(function(){
 +
                        this.title = this.myTitle;
 +
                        $("#tooltip").remove();        //移除
 +
              }).mousemove(function(e){
 +
                          $("#tooltip").css({
 +
                                "top": (e.pageY+y) + "px",
 +
                                "left":  (e.pageX+x)  + "px"
 +
                        });
 +
                });
 +
                })
 +
                </script>
 +
        </head>
 +
    <body>
 +
          <h3>效果</h3>
 +
                <ul>
 +
                <li><a class="tooltip" title="苹果 iPod" href="/jscss/demoimg/wall1.jpg"><img src="/jscss/demoimg/wall_s1.jpg" alt="苹果 iPod"></a></li>
 +
                <li><a class="tooltip" title="苹果 iPod nano" href="/jscss/demoimg/wall2.jpg"><img src="/jscss/demoimg/wall_s2.jpg" alt="苹果 iPod nano"></a></li>
 +
                <li><a class="tooltip" title="苹果 iPone" href="/jscss/demoimg/wall3.jpg"><img src="/jscss/demoimg/wall_s3.jpg" alt="苹果 iPone"></a></li>
 +
                <li><a class="tooltip" title="苹果 Mac" href="/jscss/demoimg/wall4.jpg"><img src="/jscss/demoimg/wall_s4.jpg" alt="苹果 Mac"></a></li>
 +
            </ul>
 +
        </body>
</html>
</html>

Revision as of 09:25, 6 September 2014

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 图片提示效果

效果

  • 苹果 iPod
  • 苹果 iPod nano
  • 苹果 iPone
  • 苹果 Mac

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