随笔。。。

今天首先是学习了一部分JavaScript的基本知识，做了一个简单的特效；

<!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" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>网页标题</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
  <img src="2.jpg" id="picture" />
  <script type="text/javascript">
    var action = document.getElementById("picture");
    action.onmouseover = function(){
        action.src = "3.jpg";
    }
    action.onmouseout = function(){
        action.src =  "2.jpg";
    }
  </script>
<br />
<br />
<img src = "3.jpg" id="whatevers"/>
<script type="text/javascript">
    var abc = document.getElementById("whatevers");
    abc.onmouseover = function(){
        abc.src = "2.jpg";
    }
    abc.onmouseout = function(){
        abc.src = "3.jpg";
    }
</script>
<br />
<br />
<img src = "1.jpg" id="wherever" width="75" height="102" />
<script type = "text/javascript">
    var a = document.getElementById("wherever");
    a.onmouseover = function(){
        a.src = "2.jpg";
    }
    a.onmouseout = function(){
        a.src = "1.jpg";
    }
    a.onclick = function(){
        window.open("1.jpg");
    }
</script>
</body>
</html>

效果图就是鼠标指针移到图片上时会换一张图片， 指针移开后回到原图。

思维导图：

 

制作的表单效果图：代码就不贴了，因为网页文件太多。。。。

 

posted @ 2016-11-21 20:34  panbee  阅读(126)  评论(1)  编辑  收藏  举报