浮动窗口内图片竖排

最新推荐文章于 2021-05-31 07:14:02 发布

蓝色水

最新推荐文章于 2021-05-31 07:14:02 发布

阅读量1.1k

点赞数

分类专栏： HTML5 CSS

本文链接：https://blog.csdn.net/orichisonic/article/details/48825197

版权

CSS 同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

HTML5

54 篇文章 0 订阅

订阅专栏

浮动层做上下图片竖排，可以放在div里的table也可以直接img标签竖排。

方法1:

<table>
                <tr ><td ><img src="images/FloatWindowsBackground_01white.png" onMouseOver="this.src='images/FloatWindowsBackground_01.png'" onMouseOut="this.src='images/FloatWindowsBackground_01white.png'"  /></ td></tr >
                <tr>< td><img src="images/FloatWindowsBackground_02white.png" onMouseOver="this.src='images/FloatWindowsBackground_02.png'" onMouseOut="this.src='images/FloatWindowsBackground_02white.png'"/></td></ tr>
                <tr>< td><img src="images/FloatWindowsBackground_03white.png" onMouseOver="this.src='images/FloatWindowsBackground_03.png'" onMouseOut="this.src='images/FloatWindowsBackground_03white.png'"/></td></ tr>
                <tr>< td><img src="images/FloatWindowsBackground_04white.png" onMouseOver="this.src='images/FloatWindowsBackground_04.png'" onMouseOut="this.src='images/FloatWindowsBackground_04white.png'"/></td></ tr>
                <tr>< td><img src="images/FloatWindowsBackground_05white.png" onMouseOver="this.src='images/FloatWindowsBackground_05.png'" onMouseOut="this.src='images/FloatWindowsBackground_05white.png'"/></td></ tr>
                <tr>< td><img src="images/FloatWindowsBackground_06white.png" onMouseOver="this.src='images/FloatWindowsBackground_06.png'" onMouseOut="this.src='images/FloatWindowsBackground_06white.png'"/></td></ tr>
            </table>

方法2：

    <div style="padding:0;margin:0;"  id="divPic">
       
           <a href="#gpxjjph" target="_self"><img src="images/FloatWindowsBackground_01white.png" border="0" style="float:right;" οnmοuseοver="this.src='images/FloatWindowsBackground_01.png'" οnmοuseοut="this.src='images/FloatWindowsBackground_01white.png'"/></a>
        
         
           <a href="#hhxjjph" target="_self"><img src="images/FloatWindowsBackground_02white.png" border="0"  style="float:right;" οnmοuseοver="this.src='images/FloatWindowsBackground_02.png'" οnmοuseοut="this.src='images/FloatWindowsBackground_02white.png'"/></a>
      
         
           <a href="#zqxjjph" target="_self"><img src="images/FloatWindowsBackground_03white.png" border="0"  style="float:right;" οnmοuseοver="this.src='images/FloatWindowsBackground_03.png'" οnmοuseοut="this.src='images/FloatWindowsBackground_03white.png'"/></a>
           
     
           <a href="#zsxjjph" target="_self"><img src="images/FloatWindowsBackground_04white.png" border="0"  style="float:right;" οnmοuseοver="this.src='images/FloatWindowsBackground_04.png'" οnmοuseοut="this.src='images/FloatWindowsBackground_04white.png'"/></a>
          

           <a href="http://www.1234567.com.cn/" target="_self"><img src="images/FloatWindowsBackground_05white.png" border="0"  style="float:right;" οnmοuseοver="this.src='images/FloatWindowsBackground_05.png'" οnmοuseοut="this.src='images/FloatWindowsBackground_05white.png'"/></a>
             

            <a href="#top" target="_self"><img src="images/FloatWindowsBackground_06white.png" border="0"  style="float:right;" οnmοuseοver="this.src='images/FloatWindowsBackground_06.png'" οnmοuseοut="this.src='images/FloatWindowsBackground_06white.png'"/></a>
   
        </div>

方法3：

全部用CSS来做，不用贴图

#BackToTop {
width:150px;
top:287px;
right:0px;
left:1500px;
}
#BackToTop ul li{
    list-style:none;
    display:block;
    width:150px;
    height:80px;
    color:#333;
    background-color:#fff;
    border-top:solid 1px #c9c9c9;
    border-left:solid 1px #c9c9c9;
    border-right:solid 1px #c9c9c9;
}
    #BackToTop ul .last {
      border-bottom:solid 1px #c9c9c9;
    }
    #BackToTop ul .middle {
      border-top:dashed 1px #c9c9c9;
    }
    #BackToTop ul li a {
     font-family:'Microsoft YaHei';
     font-size:16px;
     font-weight:700;
  
     display:block;
     line-height:70px;
     text-align:center;
     text-decoration:none;
     color:#333
    }
   #BackToTop ul li a :hover {
        text-decoration:none;
        color:#333;
        }

点击变换成红色可以使用jquery的find来找到ID来做：

$("#BackToTop").find("li").each(function (index, item) {

    $(item).click(function () {
        $("#BackToTop").find("li").each(function (index, item) {
            $(item).css("background-color", "#fff");
            $(item).find("a").css("color", "#333");
        });
        if (!$(item).attr("class") || ($(item).attr("class") && $(item).attr("class") != "last middle")) {
            $(item).css("background-color", "#c81623");
            $(item).find("a").css("color", "#fff");
 
        }
    });

这边如果不是最下面的那个不用加last middle样式。

以下是html脚本

 <div id="BackToTop">
        <ul>
            <li class="" ><a href="#gpxjjph" target="_self">股票型基金</a></li>
            <li class="middle"><a href="#hhxjjph" target="_self">混合型基金</a></li>
             <li class="middle"><a href="#zqxjjph" target="_self">债券型基金</a></li>
             <li class="middle"><a href="#zsxjjph" target="_self">QDII基金</a></li>
             <li class="last middle">
               <a href="#top" id="BackToTop2" target="_self"><img height="79" src="images/FloatWindowsBackground_06white.png" border="0"  style="float:right;" /></a>
             </li>
        </ul>
    </div>