<div id="kefuLayer" style="position:absolute;right:100px;top:100px;width:210px;height:275px; z-index:10000; border:1px solid #cdcdcd;white-space:normal;word-wrap:break-word;" >
<div class="kefutitle">客服中心</div>
<div class="kefu-01">
<H4>在线客服</H4>
<img style="cursor:pointer" onclick="alert('客服忙,请稍候');" border=0 src="resources/kefu/bes_kefu.jpg" width=170 height=62 />
<H4>客服邮箱</H4>
<H5>support@bessystem.com<br/>(24小时内回复)</H5>
<H4>技术客服</H4>
<H5>400-650-1976<br/>(7×24小时)</H5>
</div>
</div>
<link href="resources/kefu/kefu.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
//使层总置于顶端的初始值
var advInitTop=0;
//获取广告图片所在的层上边距的初始值
function inix(){
advInitTop=parseInt(window.document.getElementById("kefuLayer").style.top);
move();
}
//使用广告图片所在的层与滚动条同步移动
function move(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop){
diffY = document.documentElement.scrollTop;
}else if (document.body){
diffY = document.body.scrollTop;
}
document.getElementById("kefuLayer").style.top=advInitTop + parseInt(diffY) +"px";
}
//窗口的滚动事件,当页面滚动时调用move()函数
window.onscroll=move;
inix();
</script>
--------------------
.kefutitle {
font-size: 14px;
font-weight: bold;
color: #057e56;
background-image: url(bj_06.gif);
background-repeat: repeat-x;
background-position: left top;
height: 25px;
line-height: 25px;
text-align: center;
}
.kefu-01 {
padding-bottom: 10px;
padding-top: 10px;
margin-left:10px;
}
.kefu-01 h4 {
font-size: 12px;
font-weight: normal;
color: #000000;
line-height: 20px;
padding-top: 5px;
padding-left: 35px;
background-image: url(jt.gif);
background-repeat: no-repeat;
background-position: 15px 7px;
margin:0px;
}
.kefu-01 h5 {
font-size: 12px;
color: #000000;
font-weight: normal;
line-height: 20px;
padding-left: 35px;
padding-right: 20px;
margin:0px;
}
分享到:
相关推荐
综上所述,"页面漂浮移动图片广告"的实现涉及了Web开发的基础知识,包括HTML、CSS和JavaScript的巧妙结合,以及对用户体验和性能的考虑。通过理解这些概念和技术,开发者能够创建出既吸引人又不影响浏览体验的漂浮...
在“漂浮广告”部分,这种广告会随着用户滚动页面而始终保持在屏幕的特定位置,以提高其可见性。漂浮广告的设计需要考虑到用户体验,避免对主要内容造成干扰。在本系统中,当鼠标停留在广告上时,用户可以选择关闭...
【JS物理弹性漂浮广告】是一种网页设计技术,主要用于实现广告元素在页面上具有弹性和动态效果的漂浮展示。这种广告形式旨在吸引用户的注意力,同时保持与网页内容的互动性。下面将详细介绍该技术涉及的主要知识点:...
总结来说,这个"jQuery可拖动图片漂浮广告代码"是一个实用的Web开发工具,通过结合jQuery的强大功能和简洁的API,为网站提供了交互性强、视觉吸引力高的广告解决方案。对于前端开发者来说,理解和运用此类代码可以...
【标题】中的“全屏漂浮广告图层效果源码”指的是一个编程代码资源,用于实现网页上的全屏广告展示,并且这个广告图层会在页面上浮动,吸引用户的注意力。这种效果常见于网页设计和前端开发中,用来提高广告的可见性...
漂浮广告代码是一种常见的网页设计技术,用于在网站页面上创建动态漂浮的广告元素。这种广告通常位于页面的一侧或角落,随着用户滚动页面而始终保持可见,以此提高广告的曝光率。以下是对漂浮广告代码及其应用的详细...
### jQuery全屏漂浮广告插件详解 #### 一、插件概述 在现代网站设计与开发中,广告展示是网站获取收益的重要手段之一。为了提高用户体验并保持良好的广告效果,许多开发者会采用各种各样的广告插件。其中,...
在现代网页设计中,动态元素的运用可以显著提升用户体验和页面吸引力,其中,漂浮广告作为一项常见且有效的营销手段,被广泛应用于各类网站。本次分享的“JS对联漂浮广告代码”便是一种实现这一功能的精巧方法。本文...
在网页设计中,有时我们需要创建一种效果,使得某些图片元素如广告或通知,在用户滚动页面时始终保持在屏幕的可见区域内,这种效果被称为“漂浮图片”或者“固定定位”。本教程将详细介绍如何利用jQuery和一个名为...
"符合Web标准的浮动广告(图片漂浮广告)效果代码.zip" 文件提供了一种实现这一效果的前端代码示例。以下是关于浮动广告及Web标准相关的重要知识点: 1. **Web标准**:Web标准是一系列规范,旨在确保网页内容能够跨...
这两者都涉及到HTML和JavaScript技术,这两种语言是构建交互式Web页面的基础。 首先,我们来探讨漂浮广告。漂浮广告,也称为浮动广告,是一种在网络页面上持续显示的广告,它会随着用户滚动页面而始终保持在屏幕的...
总之,jQuery右下角pop弹窗漂浮广告代码涉及到DOM操作、事件处理、动画制作、CSS样式和可能的Ajax交互等多个方面,是学习和提升Web开发技能的好实践。通过熟悉这些概念和技巧,开发者能够创建更具吸引力和交互性的...
4. **插件化**:为了方便复用,开发者可能将以上代码封装成一个jQuery插件,允许用户通过简单的调用来添加漂浮广告到任何页面。 这样的漂浮广告插件对于网站来说有其优缺点。优点在于能够提高广告的可见性,增加...
### 符合W3C标准的漂浮广告代码解析 #### 一、W3C标准简介 W3C(World Wide Web Consortium)是国际万维网联盟,它制定了一系列的标准来确保Web技术的兼容性和互操作性。这些标准涵盖了HTML、CSS、XML等多个方面,...
标题中的“右下漂浮广告代码”指的是在网页设计中,一种常见的广告展现形式,它会在页面的右下角悬浮,无论用户滚动页面,广告始终可见。这种广告设计旨在提高广告的可见性和点击率,但如果不正确实现,可能会对用户...
在IT行业中,网页设计与开发是一项关键技能,而"trs置标js实现flash图片切换 分页 漂浮广告"这个主题涵盖了多个重要的技术概念。接下来,我们将详细探讨这些知识点。 首先,我们要理解TRS(Technical Reporting ...
网页漂浮广告是一种常见的网络营销手段,它通过在页面上创建浮动元素来吸引用户的注意力。本文将详细介绍如何使用JavaScript实现一个带有关闭按钮的网页漂浮广告代码。 首先,我们需要理解HTML结构。在提供的代码中...
JS(JavaScript)是一种广泛使用的网页脚本语言,它是构成动态网站、网页和Web应用不可...需要注意的是,虽然这种漂浮广告可以吸引眼球,但也可能给用户带来困扰,因此在使用时需要权衡用户体验与广告效果之间的关系。