_技术问答_课程问答

请让我安静一会儿

Active learning

已采纳 qq_学习_12 的回答

<!DOCTYPE HTML>

<html>

<head>

<title>图片展示--侧边显示详细信息</title>

<style>

div, ul, li, dl, dt, dd, img, a {

margin: 0;

padding: 0;

}

ul, li, dl, dt, dd {

list-style: none;

}

img {

border: 0;

width: 300px;

}

.demo {

margin: 0 auto;

overflow: hidden;

padding: 0 34px;

}

.orginImg li {

float: left;

margin-right: 5px;

position: relative;

margin-bottom:10px;

}

.orginImg li a {

display: block;

border: 2px solid #ccc;

}

.orginImg li div {

position: absolute;

top: 0;

left: 100%;

z-index: 22;

background: #ccc;

width: 305px;

height: 170px;

border: 2px solid #F00;

display: none;

}

.orginImg li div dl{

color:#fff;

font-weight:bold;

padding:10px;

}

.orginImg li div dl dt{

text-align:center;

}

.orginImg li div dl dd{

text-indent:2em;

}

</style>

</head>

<body>

<li>

<div>

<dl>

<dt>学会html5 绝对的屌丝逆袭</dt>

<dd>本课程由浅入深，逐步推进，以示例为主线，详细完整地介绍HTML5的新功能与新特征</dd>

</dl>

</div>

</li>

<li>

<div>

<dl>

<dt>学会html5 绝对的屌丝逆袭</dt>

<dd>本课程由浅入深，逐步推进，以示例为主线，详细完整地介绍HTML5的新功能与新特征</dd>

</dl>

</div>

</li>

<li>

<div>

<dl>

<dt>学会html5 绝对的屌丝逆袭</dt>

<dd>本课程由浅入深，逐步推进，以示例为主线，详细完整地介绍HTML5的新功能与新特征</dd>

</dl>

</div>

</li>

<li>

<div>

<dl>

<dt>学会html5 绝对的屌丝逆袭</dt>

<dd>本课程由浅入深，逐步推进，以示例为主线，详细完整地介绍HTML5的新功能与新特征</dd>

</dl>

</div>

</li>

<li>

<div>

<dl>

<dt>圆角水晶按钮制作</dt>

<dd>网页中的圆角按钮和宽度自适应按钮就这么轻松制作</dd>

</dl>

</div>

</li>

<li>

<div>

<dl>

<dt>导航条菜单的制作</dt>

<dd>30分钟教你轻松制作出各种形式的网站导航条菜单</dd>

</dl>

</div>

</li>

</ul>

</div>

var lis = document.getElementById("orginImg").getElementsByTagName("li");

for (var i = 0; i < lis.length; i++) {

lis[i].onmouseover = showDetail;

lis[i].onmouseout = hideDetail;

if(i%3==2)

{

lis[i].getElementsByTagName("div")[0].style.left='auto';

lis[i].getElementsByTagName("div")[0].style.right='100%';

}

var lastLi;

lastLi = lis[lis.length - 1];

lastLi.getElementsByTagName("div")[0].style.left = ' auto ';

lastLi.getElementsByTagName("div")[0].style.right = '100%';

function showDetail() {

this.getElementsByTagName("div")[0].style.display = 'block';

}

function hideDetail() {

this.getElementsByTagName("div")[0].style.display = 'none';

}

</script>

</body>

</html>

2018-12-23 1回答·919浏览

慕仰5658343

widht:100%的问题: 这就是一整个屏幕的宽度,没什么影响一般都是这个值,这样百分百比px好是在屏幕小一点的时候也是一整个屏幕; 2017-12-27 1回答·1370浏览

慕粉2023498883

这一节课的小问题关于a标签: 从零开始的，0表示第一个，当然你要取第二个就用[1],以此类推; 2017-08-15 1回答·1117浏览

慕丝5489023

小问题...: 已采纳田心枫的回答; 居中啊; 2017-05-10 1回答·1054浏览

慕丝5489023

女老师女程序员 666 有没有: 已采纳田心枫的回答; 很少见; 2017-05-10 1回答·1398浏览

慕的地8666513

缓慢的移动: 设一下css过渡，或用setInterval属性做一下，具体没做只是思路; 2017-05-10 1回答·1003浏览

qq_宝怪儿_0

为什么我最后一个往左移动却怎么也不行呢？

帖代码

2017-02-23 1回答·1070浏览

慕粉1626556005

left值可以不设置成auto?: 设置为auto可以解决一些浏览器的兼容性问题; 2017-02-17 1回答·1290浏览

取经者

好不容易搞一堆代码出来，为什么没有效果显示？: 已采纳码伍的回答; div3.getElemementsByTagName('a')[0].style.top = 160+'px';你的所有的.getElemementsByTagName都打错了，getElementsByTagName; 2016-12-15 1回答·1105浏览

rainy_li3676598

为什么不能通用js实现遮罩层的left自主移动效果？: 2016-12-09 2回答·1185浏览

dky

getElementsByTaName("a")[0].style.top = "0"无效

已采纳慕粉3914370 的回答

getElementsByTagName("a")[0].style.top = 0

2016-12-06 2回答·1404浏览

dky

女生程序员多么: 已采纳慕粉3914370 的回答; 越来越多了，实际上说妹子不适合的理由不知道哪儿来的; 2016-12-06 1回答·1110浏览

慕粉2346483473

本节hover弹出的资料框位置: .demo{position:relative;}; 2016-11-24 1回答·1385浏览

xunyingwl

这两个函数之家有什么区别: 一个通过，一个报错; 2016-11-06 1回答·1148浏览

qq_梦里_0

为什么我的六个图片排列顺序成这样了: 给li设置宽高就行了; 2016-10-19 2回答·1749浏览

lin琳琳bilibili

图片上下行排列不整齐: 没事了。我后来自己解决了。谢谢; 2016-10-14 2回答·1388浏览

qq_陆陆杰_03991437

开始为什么a标签只有和图片重叠的部分会显示，而下面的部分不会显示呢？: 问题解决的时候麻烦动下手，采纳一下，否则你的问题会一直置顶，让别人难做呐; 2016-09-25 3回答·1608浏览

weibo_考早营_03695159

img标签间距问题: 将img设置为display:block; 2016-08-29 3回答·1694浏览

Tang小溪

我用Object.style.right啊，left啊，top啊等等吧赋值就没有一次成功的: 已采纳我要成为前端大姐大的回答; 怎么不黏贴代码; 2016-08-22 3回答·1264浏览

a0a9l1

效果出不来

帮你改修正了下<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            .box{ width: 245px; height: 250px;overflow: hidden; float: left; position: relative;}
            .box a{width: 245px; height: 250px; display:block;position: absolute; top: 225px;

            background:#000000;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5; color:#FFFFFF; }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="../img/img1.jpg" />
            <a> 用于感冒引起的</br>头痛、发热、鼻塞、流涕、咽痛</a>
        </div>


        <div class="box">
            <img src="../img/img2.jpg" />
            <a> 用于感冒引起的</br>头痛、发热、鼻塞、流涕、咽痛</a>
        </div>


        <div class="box">
            <img src="../img/img3.jpg" />
            <a> 用于感冒引起的</br>头痛、发热、鼻塞、流涕、咽痛</a>
        </div>
        <script type="text/javascript">
        var box =document.getElementsByClassName("box")
        for (var i = 0 ; i<box.length; i++)
        {
         box[i].onmouseover = showMeg;

        }
        function showMeg(){
            this.getElementsByTagName("a")[0].style.top = 0
        }

        </script>

    </body>
</html>

把 for (var i = 0 ; i<box.length; i++;)，改为 for (var i = 0 ; i<box.length; i++)，去掉i++后的'；'符号
把box[i].onmouseover = showMeg }多了个}，进行去除，如此可恢复正常

2016-08-09 1回答·1438浏览

宝慕林6162398

getElementsByTagName('a')[0]这个后面的0有什么作用呢！: 已采纳飞天意大利面神兽的回答; getElementsByTagName本身获取到的是一个数组，你要取得其中一个值，那么就需要知道他的索引，0索引就是相对于数组中的第一个数字; 2016-08-07 2回答·2550浏览

_紋_3549633

有的浏览器打不开: 不同浏览器兼容性不同，为兼顾各种浏览器，写代码时最好把前缀都加上。; 2016-08-05 1回答·864浏览

苍白的尾巴

为什么不能用getElementsByClassName?: 已采纳飞天意大利面神兽的回答; getElementsByClassName 是获取class类名的方法，首先你得为这个元素取一个class名，然后因为class类名可能获取到多个元素，所以你要在后面加个getElementsByClassName[index],index就是你所需要的元素的位置，也就是在所有class名叫col元素排第几个; 2016-07-13 2回答·3187浏览

插上翅膀的梦

透明度还是没有搞懂呢: 2016-05-04 0回答·1041浏览

kafu123

老师声音好萌啊？很喜欢听您讲话啊。: 是的很萌哦哦哦哦哦哦; 2016-05-03 1回答·693浏览

蚂蚁与干锅

其实只需要改变一下判断的条件就可以了，不知道对不对，反正我这样写就可以

好像没有必要一定要用while来在做一次循环，只要在上面的for里加一个判断就可以了吧？！

for (var i = 0; i < list.length; i++) {
				list[i].onmouseover = showInfo;
				list[i].onmouseout = hideInfo;
				if((i+1)%4==0) {
					list[i].getElementsByTagName("a")[0].style.left = "-100%";
				}
			}

2016-04-26 2回答·787浏览

逆光_0001

还不是很理解，鼠标滑进div那块覆盖住原来右边的图片？还有定位时的left:100%和设置成left：图片宽度有什么区别呢？: 2016-04-04 3回答·826浏览

慕码人3910529

为什么我让隐藏的文字块显示在原本位置的右边不行，显示在左边就可以？具体疑问见代码注释

不行的话直接改成像素吧估计不能设置超过100%

2015-11-14 1回答·1010浏览

叮叮不铛铛

这个效果怎么用css来写啊？: 2015-08-20 2回答·719浏览

mzgwc

聚划算那个例子怎么做: 有两种解决办法，1，定义一个图片放大css属性，然后用鼠标onmouseover显示出来 2，直接得到 img 对象，然后修改; 2015-08-05 2回答·615浏览