`
wencan83
  • 浏览: 42224 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

js设置图片在屏幕右下角

阅读更多

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<SCRIPT LANGUAGE="JavaScript">
function setVariables() {
imgwidth=235;               //图像的宽度
imgheight=19;               //图像的高度
if (navigator.appName == "Netscape") { //netscape下的位置设置
    horz=".left";
    vert=".top";
    docStyle="document.";
    styleDoc="";
    innerW="window.innerWidth";
    innerH="window.innerHeight";
    offsetX="window.pageXOffset";
    offsetY="window.pageYOffset";
}
else {                              //ie下的位置设置
    horz=".pixelLeft";
    vert=".pixelTop";
    docStyle="";
    styleDoc=".style";
    innerW="document.body.clientWidth";
    innerH="document.body.clientHeight";
    offsetX="document.body.scrollLeft";
    offsetY="document.body.scrollTop";
   }
}
function checkLocation()
{
    objectXY="rightBottom";         //获取始终显示在右下角的div
    var availableX=eval(innerW);    //最大x坐标
    var availableY=eval(innerH);    //最大y坐标
    var currentX=eval(offsetX);     //鼠标当前的x坐标
    var currentY=eval(offsetY);     //鼠标当前的y坐标
    x=availableX-(imgwidth+30)+currentX; //最终div的x坐标
    y=availableY-(imgheight+20)+currentY;//最终div的y坐标
    evalMove();
    setTimeout("checkLocation()",10);    //定时移动
}
function evalMove() {               //移动到指定位置
    eval(docStyle + objectXY + styleDoc + horz + "=" + x);
    eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
</script>

</head>
<body bgcolor="#fef4d9" onload="setVariables(); checkLocation();">
aaa<br />
aaa<br />
aaa<br />
aaa<br />
aaa<br />
aaa<br />
aa<br />
a<br />
aa<br />
a<br />
a<br />
a<br />
a<br />
<div id="rightBottom" style="position:absolute; visibility:show; left:235px; top:50px; z-index:2">
<table width=10 bgcolor=#ffffff><td>
<a href="http://www.google.net" onmouseover="window.status='我爱的搜索';return true" onmouseout="window.status='';return true"><center><img src="logo1.gif" width="240" height="20" border="0"></center></a></td>
</table>


</body>
</html>

分享到:
评论

相关推荐

    js 实现 始终在屏幕右下角的图片

    js 实现 始终在屏幕右下角的图片! 值得下载看看!资源免费,大家分享!!

    在屏幕右下角弹出广告

    标题中的“在屏幕右下角弹出广告”指的是在用户浏览网页时,广告会在计算机屏幕的右下角突然出现的一种广告展示方式。这种方式通常利用JavaScript或者其他前端技术来实现,以吸引用户的注意力。广告可能以弹窗、浮动...

    js右下角弹框

    根据提供的文件信息,本文将详细解析“js右下角弹框”的实现原理和技术要点,并针对提供的三种JavaScript弹框示例进行深入分析。 ### 一、理解JS右下角弹框 #### 1.1 弹框简介 在网页设计中,右下角弹出窗口是一种...

    JavaScript 右下角随机显示的JS图片广告.rar

    为了将广告固定在屏幕右下角,可以使用绝对定位(`position: absolute;`)和相对于窗口的偏移(例如`bottom: 0; right: 0;`)。 3. **JavaScript事件监听**:为了使广告随机显示,我们需要监听用户的一些行为,如...

    js 右下角弹出代码

    1. **创建HTML结构**:在网页的HTML部分,我们需要一个容器来显示弹出内容,通常是一个固定定位在屏幕右下角的div元素。例如: ```html &lt;div id="popup"&gt;&lt;/div&gt; ``` 2. **CSS样式**:为了让弹出框具有良好的视觉...

    HTML5视频播放器随页面滚动固定页面右下角效果

    `可以使元素相对于浏览器窗口定位,然后通过`bottom`和`right`属性调整其距离底部和右侧的距离,确保其始终位于屏幕右下角。 3. jQuery:jQuery是一个流行的JavaScript库,它简化了DOM操作和事件处理。在这个场景中...

    JS右下角弹出可滚动的新闻列表浮动窗口

    通常通过CSS的`position`属性设置为`fixed`来实现,然后通过`top`和`right`属性调整其在屏幕上的位置,使其保持在屏幕右下角。 3. **创建新闻列表**:在JavaScript中,可以创建一个数组来存储新闻标题,然后遍历这...

    jquery右下角浮动窗口.zip

    这种效果通过将窗口固定在屏幕右下角,并在用户浏览时随机展示商品,既能吸引用户的注意力,又能避免打扰到他们的主要浏览活动。下面,我们将深入探讨这一特效的实现原理和应用技巧。 首先,jQuery是一个强大的...

    js方土豆网右下角悬浮导航窗口

    1. **定位与固定**:利用JavaScript的DOM(Document Object Model)操作,获取浏览器窗口的大小和滚动位置,然后计算出导航窗口应有的坐标,使其始终固定在屏幕的右下角。 2. **事件监听**:通过addEventListener或...

    右下角弹出关闭变背投广告代码.rar

    此外,为了使广告能够随页面滚动而保持在屏幕右下角,我们需要使用JavaScript或者CSS的position属性,将广告元素的position设置为"fixed",这样它就会相对于浏览器窗口而不是文档内容定位。 至于压缩包中的"16"文件...

    文字环绕图片右下角

    在探讨“文字环绕图片右下角”的技术实现时,我们主要关注的是网页设计与布局中的一个常见需求:如何让文本能够自然地围绕着页面上的图片,尤其是如何将图片定位到文本流的右下角,同时确保文本能适当地绕过图片而不...

    jQuery右下角悬浮广告展示代码.zip

    CSS选择器可以精确地定位到广告元素,实现特定的布局效果,如绝对定位使其固定在屏幕右下角,或者添加阴影、过渡等视觉效果来提升用户体验。 `jQuery右下角悬浮广告展示代码.jpg`可能是一个截图,展示了代码实现后...

    javascript网页右下角弹窗广告效果代码.rar

    在JavaScript中,我们可以使用`window.alert()`,`window.confirm()` 或 `window.prompt()` 方法来创建基本的弹窗,但这些弹窗位置固定,无法自定义到页面的右下角。对于这种定制的需求,开发者通常会使用HTML和CSS...

    右下角可收缩悬浮栏

    结合`bottom`和`right`属性,可以调整悬浮栏在屏幕右下角的具体位置。 3. **悬浮栏设计**: 设计上,悬浮栏通常包含一个按钮或图标,当用户点击时,悬浮栏会收缩或展开。这个效果可以通过CSS的`display`属性来实现...

    jQuery响应式右下角悬浮图标导航菜单特效

    悬浮图标通常被设计为页面的一个固定元素,无论用户滚动页面到何处,它都会始终位于屏幕的右下角。这种设计增强了用户的可发现性,使得导航始终触手可及。在HTML中,可以使用`position: fixed`属性实现这一效果。 #...

    网页右下角tab标签样式在线客服代码

    `将Tab栏固定在屏幕右下角。 - 通过`display: flex;`和`justify-content: flex-end;`使Tab按钮水平居右。 - 设计Tab的背景色、边框、圆角和文字样式。 - 当鼠标悬停在Tab上时,应用不同的样式,以突出显示。 - ...

    js 仿qq右下角弹出窗口

    然后,可以使用`appendChild()`将这个元素添加到页面的某个位置,通常是在body的底部,以便在屏幕右下角出现。`innerHTML`属性用于设置元素内部的内容,包括文本和HTML代码。 2. **CSS样式**:为了使弹出窗口看起来...

    新浪奥运频道的Js右下角浮动窗口代码打包

    新浪奥运频道的Js右下角浮动窗口代码打包主要涉及到JavaScript这一编程语言,特别是与网页动态效果和用户体验相关的技术。JavaScript是一种轻量级的解释型编程语言,广泛应用于Web开发,用于实现网页的交互性和动态...

    jquery右下角固定层返回顶部

    【jQuery右下角固定层返回顶部】是一种常见的网页交互设计,它允许用户通过点击页面右下角的元素轻松地返回页面顶部,提升用户体验。在网页滚动到一定位置时,这个固定层会显示出来,通常是一个小图标或者文字,点击...

Global site tag (gtag.js) - Google Analytics