`

js 漂浮在右边的图片 图片会跟这滚动条走

阅读更多
var speed = 10
var currentpos = 0, alt = 1, curpos1 = 0, curpos2 = -1
function initialize() {
    startit()
}
function scrollwindow() {
    if (document.all)
        temp = document.documentElement.scrollTop
    else
        temp = window.pageYOffset
    if (alt == 0)
        alt = 1
    else
        alt = 0
    if (alt == 0)
        curpos1 = temp
    else
        curpos2 = temp
    if (curpos1 != curpos2) {
        if (document.all)
            currentpos = document.documentElement.scrollTop - speed
        else
            currentpos = window.pageYOffset - speed
        window.scroll(0, currentpos)
    } else {
        currentpos = 0
        window.scroll(0, currentpos)
    }
    if (document.documentElement.scrollTop < 5) {
        window.clearInterval(intervalID);
    }
}
function startit() {
    intervalID = setInterval("scrollwindow()", 5)
}
lastScrollY = 0;
function heartBeat() {
    var diffY;
    if (document.documentElement && document.documentElement.scrollTop)
        diffY = document.documentElement.scrollTop;
    else if (document.body)
        diffY = document.body.scrollTop
    else {
    }
    percent = .1 * (diffY - lastScrollY);
    if (percent > 0)
        percent = Math.ceil(percent);
    else
        percent = Math.floor(percent);
    document.getElementById("scrollfull").style.top = parseInt(document.getElementById("scrollfull").style.top) + percent + "px";

    lastScrollY = lastScrollY + percent;
}

function combineFloatDiv(url){
    suspendcode = '<div id="scrollfull" style="position:absolute;z-index:9999; right:0px; top:250px;">' +
        '<a href="'+url+'"><img src="'+contextPath+'/images/bsxz.gif" /></a></div>';
    $("#float_div").html(suspendcode);
    window.setInterval("heartBeat()", 10);
}
分享到:
评论

相关推荐

    漂浮图片随页面而滚动

    在这里,我们将结合使用jQuery和jquery-lazyload,实现图片在滚动时的动态加载和漂浮效果。 实现步骤如下: 1. **引入依赖**:在HTML文件中,我们需要引入jQuery库(如`jquery-1.4.3.js`)和jquery-lazyload插件...

    Jquery跟随滚动条漂浮层

    在网页设计中,"Jquery跟随滚动条漂浮层"是一种常见的交互效果,它使得某个元素(通常是广告、导航菜单或重要提示)在用户滚动页面时始终保持在屏幕的特定位置,提供持续的可视性。这种效果可以提高用户体验,因为...

    用CSS实现跟随滚动条漂浮层代码

    总的来说,CSS的`position`属性是实现跟随滚动条漂浮层的关键。通过巧妙地设置`top`、`bottom`、`left`和`right`属性,你可以自由地定制漂浮层在页面上的位置,为用户提供更流畅的浏览体验。在实际项目中,可以结合...

    Jquery 跟随滚动条漂浮层

    **jQuery 跟随滚动条漂浮层技术详解** 在网页设计中,有时我们需要创建一种效果,即某个元素(如广告、导航栏或提示信息)始终保持在用户视野内,即使当用户滚动页面时也是如此。这种效果被称为“跟随滚动条漂浮层...

    常用的网页漂浮图片广告代码

    网页漂浮图片广告是网页设计中一种常见的营销手段,它通过JavaScript实现,可以在用户浏览页面时,让广告图片在特定位置浮动,增加广告的曝光率。这种广告代码的设计需要考虑到用户体验,既要达到广告效果,又不能...

    xScrollStick 跟随滚动条漂浮的JS特效

    这是一个跟随滚动条漂浮的JS特效,就是说滚动条滚动而元素相对屏幕位置不变 网上有很多类似的效果,本代码比较起来有如下优点: 1. 兼容IE6.0+ & FF1.5+ 2. 使用非常简单,属于菜鸟最爱的那种拿来就能用的,见下面...

    jquery浮动图片广告代码_页面上漂浮图片广告代码

    现在,我们可以使用jQuery编写JavaScript代码,让广告图片在页面上浮动。以下是一个基本的实现示例: ```javascript $(document).ready(function() { var adPosition = { top: 50, // 距离顶部的距离 left: 200 ...

    JS对联漂浮广告代码

    本段JS代码展示了如何利用JavaScript实现对联式漂浮广告的基本逻辑,通过跟踪滚动条位置动态调整广告位置,实现广告的跟随效果。然而,随着Web技术的发展,更现代、高效的实现方式不断涌现,开发者在实际应用时应...

    HTML+JS网站漂浮物代码

    - `overflow`: 如果漂浮物内有超出其尺寸的内容,可以设置`overflow`属性来控制是否显示滚动条。 3. JavaScript交互: 虽然HTML和CSS可以实现静态的漂浮效果,但若需增加动态交互,如鼠标悬停效果、点击响应等,...

    js实现网页中常见的随滚动条移动的悬浮广告栏做法

    这里的scrollTop这个变量就是获取得到可视区到达页面顶部的距离 2 调用运动函数的时候付入的参数其实就是先用整个可视区的高度减去盒子...这样就会在那个整点位置来回走。解决的方法就是把运算结果通过parseInter取整。

    淘宝网随滚动条滚动的TOP按钮.rar

    标题“淘宝网随滚动条滚动的TOP按钮.rar”所指的是一个网页设计中的特定功能,即在淘宝网站上,当你向下滚动页面时,会出现一个“TOP”按钮,点击它就能快速返回页面顶部。这个功能通常使用JavaScript(简称JS)实现...

    javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

    这篇文章介绍了一个使用JavaScript简单实现跟随滚动条漂浮的返回顶部按钮效果的方法。 首先,我们需要理解这个功能的核心原理。当用户滚动页面时,如果页面滚动的距离超过了屏幕的高度,那么返回顶部的按钮将会显示...

    QQ在线漂浮客服JS

    QQ在线漂浮客服,能在浏览器中无论网页滚动条怎么拉动,一直固定显示在网页左侧中间位置,支持关闭,展开功能 修改QQ号时,只需按规则修改A标签中的QQ号,和IMG标签里面的QQ号即可,按此方法修改,可以显示QQ在线,或...

    页面随意漂浮代码

    在网页设计中,"页面随意漂浮代码"是一种常见的JavaScript技术,用于实现广告或其他元素在用户滚动页面时始终保持在屏幕的特定位置,提供持续的视觉焦点。这种效果常见于网站的侧边栏广告、在线聊天窗口或者固定导航...

    左侧漂浮客服QQ

    "当你拖动滚动条的时候它会自动计算始终漂浮于某一位置",这一特性可以通过JavaScript监听滚动事件来实现。当用户滚动页面时,事件触发,JavaScript函数会动态更新漂浮元素的CSS位置,确保它始终保持在预期的屏幕...

    两边漂浮和中间漂浮组合.rar

    在IT行业中,网页设计与开发是一项至关重要的技能,其中JavaScript(JS)作为客户端脚本语言,经常被用来实现各种交互式效果。"两边漂浮和中间漂浮组合"的描述可能指的是一个网页设计中的特效,它涉及到元素在页面上...

    符合web标准的浮动广告(图片漂浮广告)效果代码.zip

    在网页设计中,浮动广告(通常称为图片漂浮广告)是一种常见的营销手段,它能够在用户浏览页面时持续显示,以吸引用户的注意力。本压缩包"符合web标准的浮动广告(图片漂浮广告)效果代码.zip"包含了一套前端实现此类...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动...

Global site tag (gtag.js) - Google Analytics