鼠标滚动效果

var $navFun = function() {
       
        var st = $(document).scrollTop(),
            headh = $("div.head").height()+$("div.jiu-nav-main ").height()+$("div.act-bg").height();
            headh01 = $("div.head").height()+$("div.jiu-nav-main ").height()+$("div.act-bg").height()+$(‘div.act-one‘).height();          
            $nav_classify = $("div.silde-act-nav");
            $dd = $(‘div.silde-act-nav a‘)
            $back = $(‘.back-act‘)

if(st > headh){
            $nav_classify.addClass("fixed");
            $dd.eq(0).addClass(‘active‘);
        } else {
            $nav_classify.removeClass("fixed");
            $dd.eq(0).removeClass(‘active‘);
        }
            if(st >headh01){
                 $dd.eq(0).removeClass(‘active‘);
                 $dd.eq(1).addClass(‘active‘);
            } else{       
                 $dd.eq(0).addClass(‘active‘);
                 $dd.eq(1).removeClass(‘active‘);
            }
        $back.on(‘click‘,function()
        {
            $(document).animate({ scrollTop: 0 }, 300);
            return false;
        })

};

var F_nav_scroll = function () {
       
        if (!window.XMLHttpRequest) {
           return;         
        }else{
            //默认执行一次
            $navFun();
            $(window).bind("scroll", $navFun);
        }
    }
    F_nav_scroll();

鼠标滚动效果

时间: 2024-08-03 12:37:55

鼠标滚动效果的相关文章

纯css,div隐藏滚动条,保留鼠标滚动效果。

代码如下: <!DOCTYPE html><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&qu

JS实现鼠标移上去图片停止滚动移开恢复滚动效果

这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例,那个是一块块的的滚动==>实现图片的循环滚动 . 这次我们就做滚动区域是平滑循环滚动效果. 下边是布局的HTML代码,原理是在要展示区域的div(.ban_img)里加一个能包含所有需要展示的图的大div(.in_img), <div class=" ban_img">

15款fullpage.js鼠标滚动页面动画展示特效

jquery全屏鼠标滚动切换fullpage页面模板下载 html5响应式页面滚动背景图片动画特效 酷炫html5 css3全屏滚动动画专题模板 html5腾讯互动娱乐网站鼠标滚动展示模板 html5平安儿童手表页面滚动简约单页模板 html5叮咚手机app下载页面滚动展示特效 jquery fullPage证券股票软件页面滚屏动画特效 jquery.fullpage.js360安全路由全屏页面滚动效果 html5新年快乐医院专题页介绍模板下载 html5雷锋wifi软件介绍页面下滑滚动式特效

JS魔法堂:通过marquee标签实现信息滚动效果

一.前言   有限的空间展现无限的内容,这是滚动最常用到的地方.根据信息滚动效果我们可以有很多的实现方式,但HTML自带的 marquee标签 是其中一个较简单的实现方式.下面记录一下,供日后查阅. 二. marquee标签 的基础知识 示例: <marquee behavior="scroll" direction="left" loop="-1" scrollAmount="12" scrollDelay="

Duilib初级控件扩展一例: 具有鼠标滚动消息的OptionUI

当初之所以有这个想法, 是因为我想在Option上滚动鼠标的时候自动切换到前一个(或后一个)Option上面去. 所有的OptionUI在水平布局HorizontalLayout上面. 例子虽然能达到我要的前后的效果, 但是后来证明我错了, 试想想看, 为什么是让OptionUI来处理鼠标滚动消息, 让一个OptionUI处理鼠标滚动消息有啥意义? 明明该交给Option所在的水平布局来处理, 不是最好的选择吗? 的确是这样, 我当时就应该多想法再写的, 也可能是熟能生巧的原因吧, 以后注意了.

理解鼠标滚动事件

javascript<script> window.onload = function(){ var count = 0; document.onmousewheel = function(e){ /*鼠标滚动的量 下滚是负 上滚是正*/ if(e.wheelDelta < 0){ count ++; }else{ count --; } console.log(count); } }</script>``` #### 第二步 了解 fullpage jquery插件 >

产品图片无缝水平滚动效果代码

产品图片无缝水平滚动效果代码:在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如何实现此特效的,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

无缝不间断图片垂直滚动效果

无缝不间断图片垂直滚动效果: 垂直滚动效果虽然使用频率没有水平滚动高,不过也有大量的使用,例如垂直滚动的友情链接效果,下面就结合实例简单介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /&g

基于jquery的鼠标滚动放大缩小图片

一直以来都想写一个图片放大和缩小的小玩意,本来以为会很复杂,这几天自己思考了一下,原来是so easy啊.目前实现的放大缩小,主要时依据鼠标的滚轮触发事件来实现的,废话少说直接上源码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns