html漂浮代码（html单页网站 右下角悬浮图片的代码）

本文目录

• html单页网站 右下角悬浮图片的代码
• html漂浮特效代码
• HTML网页中两侧漂浮小窗口代码
• html代码 文字漂浮于图片上面
• 如何在HTML代码中插入一个漂浮图片
• html弹出悬浮窗口代码,怎么实现啊

html单页网站 右下角悬浮图片的代码

1. 最简单的静态返回顶部，点击直接跳转页面顶部，常见于固定放置在页面底部返回顶部功能
方法一：用命名锚点击返回到顶部预设的id为top的元素
复制代码代码如下:
《a href=“#top“ target=“_self“》返回顶部《/a》
方法二：操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置）
复制代码代码如下:
《a href=“javascript:scroll(0,0)“》返回顶部《/a》
缺点：返回效果是立即的，不符合一般浏览页面的滚动感觉；
静态固定于页面底部，用户不一定看得到。
2. 简单的静态返回顶部，用js模拟滚动效果上滑至顶部
复制代码代码如下:
function pageScroll(){
//把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
window.scrollBy(0,-100);
//延时递归调用，模拟滚动向上效果
scrolldelay = setTimeout(’pageScroll()’,100);
//获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
var sTop=document.documentElement.scrollTop+document.body.scrollTop;
//判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
if(sTop==0) clearTimeout(scrolldelay);
}
复制代码代码如下:
《a onclick=“pageScroll()“》返回顶部《/a》
缺点：滚动效果不平滑，且在页面很长时点击返回顶部，未向上到达页面顶部无法再正常浏览页面；
同上依旧是静态固定于页面底部，不一定能曝光在用户面前。
3. 动态按需加载返回顶部，css侧边屏幕绝对定位，结合简单jQuery动画实现更好体验
复制代码代码如下:
function gotoTop(min_height){
//预定义返回顶部的html代码，它的css样式默认为不显示
var gotoTop_html = ’《div id=“gotoTop“》返回顶部《/div》’;
//将返回顶部的html代码插入页面上id为page的元素的末尾
$(“#page“).append(gotoTop_html);
$(“#gotoTop“).click(//定义返回顶部点击向上滚动的动画
function(){$(’html,body’).animate({scrollTop:0},700);
}).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现
function(){$(this).addClass(“hover“);},
function(){$(this).removeClass(“hover“);
});
//获取页面的最小高度，无传入值则默认为600像素
min_height ? min_height = min_height : min_height = 600;
//为窗口的scroll事件绑定处理函数
$(window).scroll(function(){
//获取窗口的滚动条的垂直位置
var s = $(window).scrollTop();
//当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
if( s 》 min_height){
$(“#gotoTop“).fadeIn(100);
}else{
$(“#gotoTop“).fadeOut(200);
};
});
};
gotoTop();
css样式代码：
复制代码代码如下:
/*默认样式，主要是position:fixed实现屏幕绝对定位*/
#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;background:#fff;}
/*用CSS表达式(expression)来实现ie6下position:fixed效果*/
#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + “px“)}
/*鼠标进入的反馈效果*/
#gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}
这种方法判断页面高度按需将“返回顶部”展示给用户，用css样式实现了屏幕绝对定位，借助jQuery实现了更好用平滑的滚动效果。进一步考虑如果用户设置了浏览器禁用js，那么我们可以将第三方案结合第一方案方法一，禁用js后第三方案将不被用户所见，未禁用的话我们在js代码中再加上一句隐藏第一方案。
总之，长页面还是要尽量避免的，不可避免的情况下，加上“返回顶部”功能可能会带给用户相对好一点的体验。

html漂浮特效代码

网上搜网页漂浮特效，一大堆，实现原理也很简单
《div style=“width:100px; height:100px; position:fixed; z-index:99; left:0; top:50%; margin-top:-50px;“》内容《/div》

HTML网页中两侧漂浮小窗口代码

修改了！你应该是希望滚动条不管在什么位置 这个层都是可见的对吧？ 最原始的那个可以滚动不可见区域。 晚上我又改了一下 对xxx_div做了一下修改。 看看能否满足
你的要求
在body的可见区域漂浮！
《html》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》
《title》经典的js物理弹性漂浮图片广告代码丨芯晴网页特效丨CsrCode.Cn《/title》
《/head》
《p class=“intro_p“》《body style=“margin:0;padding:0;“》
《div id=“xxx_div“ style=“ left: expression(0); border:0px #ccc solid; WIDTH: 100%; POSITION: absolute; ; TOP: expression(body.scrollTop); HEIGHT: 100%; left: 0px; top: 0px;“》《/div》
《div》
《DIV id=img1 style=“Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;
visibility: visible;“》《a href=““ target=“_blank“》《img src=““ width=“250“ height=“60“ border=“0“》《/a》《/DIV》
《div align=“center“》
《p》
《SCRIPT》
var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img1.style.top = yPos;
function changePos()
{
var objd = document.getElementById(“xxx_div“);
//width = document.body.clientWidth;
//height = document.body.clientHeight;
width = objd.clientWidth;
height = objd.clientHeight;
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + objd.offsetLeft;
img1.style.top = yPos + objd.offsetTop;
if (yon)

else

if (yPos 《 0)

if (yPos 》= (height - Hoffset))

if (xon)

else

if (xPos 《 0)

if (xPos 》= (width - Woffset))

}

function start()
{
img1.visibility = “visible“;
interval = setInterval(’changePos()’, delay);
}
function pause_resume()
{
if(pause)
{
clearInterval(interval);
pause = false;}
else
{
interval = setInterval(’changePos()’,delay);
pause = true;
}
}
start();
《/SCRIPT》
《/p》
《p》 《/p》
《p》 《/p》
《p》 《/p》
《p》 《/p》
《p》 《/p》
《p》js物理弹性漂浮广告《/p》
《p》《/p》
《p》 《/p》
《/div》
《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》
《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》asdsad
《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》
《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》
《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》《br/》asdasd
《/body》
《/html》
下面这个是在指定定的小窗口内飘动，我改了一下测试可以运行：
《html》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》
《title》经典的js物理弹性漂浮图片广告代码丨芯晴网页特效丨CsrCode.Cn《/title》
《/head》
《p class=“intro_p“》《body》
《div id=“xxx_div“ style=“top:20px; left:50px; width:600px; height:500px; border:2px #ccc solid;“》《/div》
《div》
《DIV id=img1 style=“Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;
visibility: visible;“》《a href=““ target=“_blank“》《img src=““ width=“250“ height=“60“ border=“0“》《/a》《/DIV》
《div align=“center“》
《p》
《SCRIPT》
var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img1.style.top = yPos;
function changePos()
{
var objd = document.getElementById(“xxx_div“);
//width = document.body.clientWidth;
//height = document.body.clientHeight;
width = objd.clientWidth;
height = objd.clientHeight;
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + objd.offsetLeft;
img1.style.top = yPos + objd.offsetTop;
if (yon)

else

if (yPos 《 0)

if (yPos 》= (height - Hoffset))

if (xon)

else

if (xPos 《 0)

if (xPos 》= (width - Woffset))

}

function start()
{
img1.visibility = “visible“;
interval = setInterval(’changePos()’, delay);
}
function pause_resume()
{
if(pause)
{
clearInterval(interval);
pause = false;}
else
{
interval = setInterval(’changePos()’,delay);
pause = true;
}
}
start();
《/SCRIPT》
《/p》
《p》 《/p》
《p》 《/p》
《p》 《/p》
《p》 《/p》
《p》 《/p》
《p》js物理弹性漂浮广告《/p》
《p》《/p》
《p》 《/p》
《/div》
《/body》
《/html》

html代码 文字漂浮于图片上面

一、image 作为背景图片，即：background:url(“.......“);

例如如下代码块：

《div style=“background:url(’loading.gif’) no-repeat;width:100px;height:50px“》添加文字...添加文字...添加文字...《/div》

二、将img块与文字块（文字块采用span标签显示）放在同一个div 中，然后设置他们之间的位置，例如如下代码块：

《div style=“position: relative; width: 170px; height: 89px;“》

《img src=“loading.gif“ width=“170“ height=“89“ alt=““》

《span style=“position: absolute; top: 0; left: 0;“》添加文字...添加文字...添加文字...《/span》

《/div》 

扩展资料：

注意事项

position：absolute这个是绝对定位；是相对于浏览器的定位。

比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

position：relative是相对定位，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如：《div class=“1“》《/div》《div class=“2“》《/div》

当1固定了位置。1的样式float:left;width:100px; height:800px;

2的样式为float:left; position：relative；margin-left:20px;width:50px;

2的位置在1的右边，距离120px

如何在HTML代码中插入一个漂浮图片

这是JS代码实现的，需要编写JS脚本，然后在head区域引入JS文件，然后在body区加入相应JS的引用。
当然最快捷方便的方法就是百度去找个类似的源码就可以搞定了。漂浮源码很多的~ 一般是先HEAD引入JS文件，然后BODY或者其他地方加入JS调用代码 就可以实现了。
一般下载源码的地方会提示你怎么用。耐心找找

html弹出悬浮窗口代码,怎么实现啊

做到比较简单
《!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“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》
《title》无标题文档《/title》
《style type=“text/css“》
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-color:#CCC;
left: 165px;
top: 211px;
display:none;
}
《/style》
《script type=“text/javascript“》
function a(){
var a=document.getElementById(“a“).value;
if(a==“tijiao“){
document.getElementById(“apDiv1“).style.display=“block“;
}
}
《/script》
《/head》
《body》
《input type=“button“ value=“tijiao“ id=“a“ onclick=“a()“ /》
《div id=“apDiv1“》hello《/div》
《/body》
《/html》