1. 制作效果图

 

2. 为什么要制作效果

通过只做该效果来学习DIV+CSS的网页布局以及JS的交互

3. 制作步骤

3.1 html结构

 

<div id="main">
    <div id="left">
        <img src="images/1.jpg" id="targetImage" style="width: 504px;height: 333px">
    </div>
    <ul id="right">
        <li class="select" src="images/1.jpg">
            <a  target="_blank">
                <p>夏日夜晚联欢会</p>
                <p>昨天，利用晚自习的时间，0711PHP培训学科和0714UI培训学科的同学...</p>
            </a>
            <img class="sanjiaoleft"  src="images/sanjiao_left.png">
        </li>
        <li  src="images/2.jpg">
            <a>
                <p>给你一个西瓜味的夏天</p>
                <p>我本高冷,却融化在这炙热的夏天,昨天有人问我天这么热怎么破?当然...</p>
            </a>
            <img src="images/sanjiao_left.png">
        </li>
        <li  src="images/3.jpg">
            <a>
                <p>PHP学科洗剪吹会员管理系统评比尘埃落定</p>
                <p>最近的天气热的是不要不要的啊，出门五分钟，流汗两小时，感觉大...</p>
            </a>
            <img src="images/sanjiao_left.png">
        </li>
        <li  src="images/4.png">
            <a>
                <p>清凉一夏老学员交流会</p>
                <p>还好当天太阳不大，温度不高，我们就安排在室外，靠近南湖公园，...</p>
            </a>
            <img  src="images/sanjiao_left.png">
        </li>
    </ul>
</div>

3.2 效果布局的CSS

<link href="reset.css" type="text/css" rel="stylesheet">
<style type="text/css">
    a:hover{
        text-decoration: none;   /*访问时删除下划线*/
    }
    #main{
        width: 760px;
        margin: 50px auto;   /*居中显示*/
    }
    #left{
        width: 504px;
        height: 333px;
        float: left;
    }
    #right{
        width: 256px;
        float: left;
        height: 333px;
    }
    #right li{
        padding: 17px;
        position: relative; /*相对定位. 为了后面的小图标的定位*/
    }
    #right li p:first-child{
        overflow: hidden;
        font-size: 15px;
        height: 20px;
        cursor: pointer;
    }
    #right li p:not(:first-child){   /*第一个p标签设置大的字体*/
        font-size: 12px;
        cursor: pointer;
    }
    .select{
        background-color: #FFB201;
        color: white;
    }
    .sanjiaoleft{    /*小图标的样式*/
        display: block;
        position: absolute;
        top: 30px;
        left: -12px;
    }

    ul img{   /*默认情况下图片先隐藏*/
        display: none;
    }
</style>

  

3.3 JS特效

<script type="text/javascript">
    window.onload = function () {
        var ul = document.getElementById("right");
        var lis = ul.getElementsByTagName("li");
        //>>1.找到所有的li注册鼠标移入和移出事件
        for (var i = 0; i < lis.length; ++i) {
            var li = lis[i];
            //>>2.鼠标移入事件
            li.onmouseover = function () {
                //>>2.1 先清除所有效果
                for (var j = 0; j < lis.length; ++j) {
                    lis[j].className = '';
                    lis[j].getElementsByTagName("img")[0].className = '';
                }

                //>>2.2 为引入的添加效果
                this.className = 'select';
                this.getElementsByTagName("img")[0].className = 'sanjiaoleft';
                document.getElementById("targetImage").src = this.getAttribute("src");
            }
            //>>3.鼠标移出事件
            li.onmouseout = function () {
                //移出时删除效果
                this.className = '';
                this.getElementsByTagName("img")[0].className = '';
            }
        }
    }
</script>

本文来源：http://bbs.itsource.cn/thread-1636-1-1.html