您的位置：首页 > 百科管理 > 详情

怎么在轮播海报左边做固定悬浮-怎样用HTML做出移动端固定悬浮半透明搜索框

原创：找图网 2023-08-09 23:18:52

请问DW中，一张图片固定悬浮在网页的左边特定位置，怎样实现啊？

下面代码放在<body>与<body/>中:

lastScrollY=0;

function heartBeat(){

diffY=;

percent=.1*(diffY-lastScrollY);

if(percent>0)percent=(percent);

else percent=(percent);

+=percent;

lastScrollY=lastScrollY+percent;

}

suspendcode45="<DIV id=lovexin45 style='left:500px;POSITION:absolute;TOP:150px;'><a HREF='

'&n ... ank Title='广告'><img src='images/' border=0></a></div>"

(suspendcode45);

("heartBeat()",1);

</script>

怎样用HTML做出移动端固定悬浮半透明搜索框

这次给大家带来怎样用HTML做出移动端固定悬浮半透明搜索框,HTML做移动端固定悬浮半透明搜索框的注意事项有哪些,下面就是实战案例,一起来看一下。

Question. 问题

在移动端商城系统中,我们常常看到位于页面顶部有一个搜索框,这类搜索框博主比较喜欢的是固定在页面顶部,半透明悬浮,能依稀看见部分轮播图的形式。

要制作这样的搜索框,技术关键在于:

fixed 搜索框定位

opacity 设置透明度

Solution. 解决

首先我们定义一个 html 片段:

</div>

</form>

</header>

</div>header 标签为搜索框,下面的 div 为一个背景图。

同时附上 CSS 样式:

body {

margin: 0; padding: 0;

font-size: 14px; font-family: "microsoft yahei",'Arial', 'Verdana','Helvetica', sans-serif;

}

.bar {

position: fixed; top: 0; left: 0; right: 0; /* 决定了搜索框置顶 */

height: 44px; padding: 0 10px;

background-color: #fff; opacity: 0.8; /* 搜索框半透明效果 */

z-index: 10;

}

.bar form {

display: block; padding: 0;margin: 0;

}

.search-row {

position: relative;

height: 30px; padding: 7px 0;

}

.search-row input[type=search] {

position: absolute; top: 7px;

height: 30px; line-height: 21px; width: 100%; padding: 10px 15px 10px 30px;

border: 0; border-radius: 6px; outline: 0; background-color: rgba(0,0,0,0.1);

font-size: 16px; text-align: center;

z-index: 100;

}

.search-row .placeholder {

position: absolute; top: 2px; left: 0; right: 0;

display: inline-block; height: 34px; line-height: 34px;

border: 0; border-radius: 6px;

font-size: 16px; text-align: center; color: #999;

z-index: 1;

}

.search-row .placeholder .iconfont {

display: inline-block; width: 19px; line-height: 24px; padding: 10px 0;

font-size: 21px; color: #666;

}

.search-row .placeholder .text {

line-height: 40px;

vertical-align: top;

}

.background img {

width: 100%;

}

.active:before {

position: absolute; top: 11px; left: 5px; right: auto;

display: block; margin-right: 0;

font-size: 21px;

}

.active input[type=search] {

text-align: left

}

.active .placeholder{

display: none

}

</style>很长的一段 CSS 样式,但是其核心就两句话position: fixed; /* 决定了搜索框置顶 */ 和 background-color: #fff; opacity: 0.8; /* 搜索框半透明效果 */,其他的样式均为了页面的排版,排版的细节需要各位读者自己写一遍理解,过程可能需要花费点时间。

这样我们就完成了一个静态的搜索框:

备注:这里的搜索图标使用了 iconfont,读者可自行到 iconfont矢量图标库下载。

至此,我们还需要通过 JS 实现一些动效:

用于实现用户切换输入时「搜索」位置图标的切换,原理很简单,增加和移除 class 类,这些类定义了样式。