//卷动行数,希望本文所述对大家的jQuery程序设计

作者: 网络资讯  发布:2019-09-06

本文实例呈报了jquery达成页面百叶窗走马灯式翻滚展现效果的方法。分享给大家供我们仿效。具体如下:

jquery达成页面百叶窗走马灯式翻滚突显效果的秘诀,jquery百叶窗

正文实例陈诉了jquery完成页面百叶窗走马灯式翻滚显示效果的格局。分享给大家供我们参考。具体如下:

  1. 此地的代码必要jquery1.3上述的支撑,如下所示:
    复制代码 代码如下:jQuery.fn.extend((
        function($){
            var l = 4,//卷动行数
                t=四千,//卷动完三回后,隔多久下一次起来卷动
                rt=500,//每种n卷动过去的耗费时间
                n="li",//暗中认可的卷动对象内含有的要卷动的HTML标志
                o="ul",//假若卷动时,启用的包装卷动成分的HTML标识
                e,//调用对象
                en,//调用对象内存有的要卷动的指标集合
                h;//卷动行高度
            var vLimit=80;//比视觉极限0.1s还小点
            var max奇骏num=Math.ceil(rt/vLimit);//最大卷动次数
            var maxRh=0;//每一次卷动中度
            var fnRollFirst=function(arg){//将arg向上卷1个n,实现之后将第二个n移动到结尾二个职位
                var rCount=0;//卷动次数纪录
                var rVal=setInterval(function(){//每隔vLimit循环三回,共循环maxXC60num-1次
                            rCount ;
                            arg.scrollTop(arg.scrollTop() maxRh);
                            if(rCount>=(maxRnum-1)){//少卷1次
                                clearInterval(rVal);
                                arg.scrollTop(arg.scrollTop() h-maxRh*(maxHighlandernum-1));//最终1次考订卷动值
                                //移动率先个要素到最终
                                var nowN=arg.children(n);
                                nowN.eq(nowN.length-1).after(nowN.eq(0));
                                //第多个地方空出后须求经过倒卷考订回来
                                arg.scrollTop(-h);
                            };
                        },vLimit);
            };
            var fnRollArr=function(arg){//对数组中的对象逐个运行卷动
                var out=setInterval(function(){
                    fnRollFirst(arg.shift());
                    if(!arg.length){
                        clearInterval(out);
                    };
                },rt);     
            };
            var fnRoll=function(){//获得必要每个卷动的对象群集
                var arr=new Array();
                e.children(o).each(function(){
                    var rn=$(this).children(n);
                    if(rn.length>1){
                        arr.push($(this));
                    };
                });
                setInterval(function(){
                    fnRollArr(arr.slice(0));
                },t);
            };
            var fnLay=function(){//布局页面
                h=en.height();
                var nu=Math.ceil(en.length/l);
                var u=$("<" o "></" o ">");
                u.css({"overflow":"hidden","height":h "px","margin-bottom":"15px"});
                for(var i=0;i<l;i ){
                    en.slice(nu*i,nu*(i 1)).wrapAll(u);
                };         
            };
            var fnMain=function(){//卷动主方法
                if(maxRnum>1){
                    fnLay();
                    maxRh=Math.ceil(h/maxRnum);
                    fnRoll();
                };
            };
            var fnStart= function(arg){//开首化显示格局
                e=arg;
                en = e.children(n);
                en.show();
                if(en.length>l){
                    fnMain();
                }else{
                    return false;
                };
            };
            return {
                setLine : function(num){//设置要分成多少行来卷动
                    (!isNaN(num) && num>0)?l=num:"";
                    return this;
                },
                setTime : function(num){//卷动间隔时间:飞秒
                    (!isNaN(num) && num>0)?t=num:"";
                    return this;
                },
                startRoll : function(){//运营卷动
                    fnStart(this);
                }
            };
        }
    )(jQuery));
  2. 页面可以是那样子
    复制代码 代码如下:<div id="re" class="dynamic">
     <li>
         <a href="#" class="name">李飞(英文名:lǐ fēi)</a>正在申请成为经验达人
     </li>
     <li>
         <a href="#" class="name">李飞(英文名:lǐ fēi)</a>已向职场专项论题《<a href="">作者是个亚太地区人呀亚太地区人</a>》投稿
     </li>
     <li>
         <a href="#" class="name">董川民</a>已成功买入职场专题《<a href="#">小编是个亚太地区人呀亚太地区人</a>》
     </li>
     <li>
         <a href="#" class="name">李飞(Li Fei)</a>对《<a href="">作者是个亚太人呀亚太人</a>》的减轻方案又卖出一次
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生感悟及陈设本事人生感悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生顿悟及处置本事人生感悟?</a></div>
     </li>
       
     <li>
         <a href="#" class="name">李飞(Li Fei)</a>向职场专项论题《<a href="#">小编是个亚太地区人呀亚太地区人</a>》的投稿已因此审查批准,获得1元表彰。
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生顿悟及管理技艺人生感悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内里奥</a>商酌经验:
         <div class="text"><a href="">人生感悟及处理本事人生顿悟及管理</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生感悟及从事技能人生感悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生顿悟及布置才干人生感悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生感悟及安顿技术人生顿悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生感悟及处置手艺人生感悟?</a></div>
     </li>
      
     <li>
         <a href="#" class="name">李飞(英文名:lǐ fēi)</a>已正式成为经验达人
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生顿悟及管理本事人生感悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>商量经验:
         <div class="text"><a href="">人生感悟及从事技术人生顿悟及管理</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生感悟及从事本事人生感悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生顿悟及从事工内人生感悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生顿悟及布置技能人生感悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生顿悟及安排手艺人生顿悟?</a></div>
     </li>
        
     <li>
         <a href="#" class="name">李飞</a>已邀请<a href="#" class="name">董川民</a>成为经验达人
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生顿悟及处理本领人生感悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>商量经验:
         <div class="text"><a href="">人生顿悟及管理手艺人生顿悟及管理</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生感悟及管理本领人生顿悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生感悟及从事手艺人生顿悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生顿悟及从事技艺人生感悟?</a></div>
     </li>
     <li>
         <a href="#" class="name">三内Rio</a>回答了<a href="#" class="name">大飞</a>的提问
         <div class="text"><a href="">人生顿悟及布署技术人生感悟?</a></div>
     </li>
    </div>
    <script type="text/javascript">
    //复杂点的调用写法
    //$("#re").setLine(5).setTime(3000).startRoll();
    //轻巧的调用
    $("#re").startRoll();
    </script>

指望本文所述对大家的jQuery程序设计有所援助。

本文实例陈述了jquery达成页面百叶窗走马灯式翻滚突显效果的法子。分享给...

js,jquery常用法

前端JS

 

JavaScript是一种属于互联网的脚本语言,已经被普及用于Web应用开拓,常用来为网页增加各种各样标动态功效,为客商提供更通畅雅观的浏览效果。平常JavaScript脚本是经过嵌入在HTML中来促成本身的效率的。

 

1、存在情势

1、文件形式

    <script src="js/oldboy.js"></script>

2、嵌入html

    <script type='text/javascript'>alert('page');</script>

 

2、代码块的职位

 

  <body>标签内的代码底部

 

3、变量和函数的表明

 

1、全局变量和一部分变量

    name = 'alex'

    var name = 'alex'

 

2、基本函数和自进行函数

    function Foo(arg){

        console.log(arg);

    }

 

    (function (arg) {

        alert(arg);

    })('alex')

 

4、字符串常用方法和属性

obj.trim()

obj.charAt(index)

obj.substring(start,end)

obj.indexOf(char)

obj.length

5、数组

声明,如:

    var array = Array() 或 var array = []

 

添加

    obj.push(ele)                   追加

    obj.unshift(ele)                最前插入

    obj.splice(index,0,'content')   内定索引插入

 

移除

    obj.pop()                       数组尾巴部分别获得取

    obj.shift()                     数组底部获取

    obj.splice(index,count)         数组钦赐地方后count个字符

 

切片

    obj.slice(start,end)           

 

合并

    newArray = obj1.concat(obj2)   

 

翻转

    obj.reverse()

 

字符串化

    obj.join('_')

 

长度

    obj.length

注意:字典是一种特别的数组

 

6、循环

var a = '123456789';

for(var i=0;i<10;i ){

     console.log(a[i]);

}<br>

for(var item in a){

     console.log(a[item]);

}

 

DOM编程

 

文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的管理可扩展标记语言的科班编制程序接口

wKiom1X7xaqhQ1u3AADOa7W3vPk731.jpg

 

选择器:

 

document.getElementById('id')

document.getElementsByName('name')

document.getElementsByTagName('tagname')

常用函数:

 

成立标签,document.createElement('a')

   

 

获取或许修改样式

obj.className  

猎取或安装属性

setattribute(key,val)    getattribute(key)

获得或涂改样式中的属性

obj.style.属性

          

交由表单

document.geElementById(‘form’).submit()

常用事件:

 

onclick

onblur

onfocus

on...

onload和ready

    body标签加多 大概 window.onload = function(){} 

        覆盖上一个onload只可以登记一遍,而ready就足以频频挂号

    $(document).ready(function(){}) 或者 $(function(){})

onload是负有DOM成分创制、图片加载实现后才触发的。而ready则是DOM成分创立实现后触发的,不等图片加载完结。图片还么有渲染,就能够举行事件的进行。

 

任何函数:

 

console.log()

alert()

confirm()

setInterval("alert()",2000);    clearInterval(obj)

setTimeout();    clearTimeout(obj)

跑马灯,low爆了。。。

<!DOCTYPE html>

<html>

    <head>

        <meta charset='utf-8' >

        <title>接待blue shit莅临指引  </title>

        <script type='text/javascript'>            function Go(){                var content = document.title;                var firstChar = content.charAt(0)                var sub = content.substring(1,content.length)

                document.title = sub firstChar;

            }

            setInterval('Go()',1000);        </script>

    </head>

    <body>    

    </body>

</html>

 

搜索框

<!DOCTYPE html>

<html>

    <head>

        <meta charset='utf-8' />

        <title></title>

        

        <style>

            .gray{

                color:gray;

            }

            .black{

                color:black;

            }        </style>

        <script type="text/javascript">            function Enter(){               var id= document.getElementById("tip")

               id.className = 'black';               if(id.value=='请输加入关贸总协定组织键字'||id.value.trim()==''){

                    id.value = ''

               }

            }            function Leave(){                var id= document.getElementById("tip")                var val = id.value;                if(val.length==0||id.value.trim()==''){

                    id.value = '请输加入关贸总协定组织键字'

                    id.className = 'gray';

                }else{

                    id.className = 'black';

                }

            }        </script>

    </head>

    <body>

        <input type='text' class='gray' id='tip' value='请输加入关贸总协定组织键字' onfocus='Enter();'  onblur='Leave();'/>

    </body>

</html>

jQuery

 

jQuery是一个合营多浏览器的javascript库,大旨情念是write less,do more(写得更加少,做得更加多),对javascript举行了打包,是的尤其便利的支付,而且在包容性方面非凡名特别促销。

 

采取器和筛选

属性

css

文书档案管理

事件

扩展

ajax

ps:链式编程

 

更多见:

 

实例

 

回去最上端

<!DOCTYPE html><html lang="en"><head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .back{

            position: fixed;

            bottom: 0px;

            right: 0px;

        }

        .hide{

            display: none;

        }

    </style></head><body><div style="height: 三千px;"></div><div onclick="GoTop()" class="back hide">再次来到顶端</div><script src="jquery-1.8.2.js"></script><script type="text/javascript">

 

    function GoTop(){        //再次回到最上端        $(window).scrollTop(0);

    }

 

    $(function(){

 

        $(window).scroll(function(){            //当滚动滑轮时,实施函数体

 

            //获取当前滑轮滚动的冲天

            var top = $(window).scrollTop();            if(top>100){                //突显“再次回到顶端”                $('.back').removeClass('hide');

            }else{                //遮盖“重返最上部”                $('.back').addClass('hide');

            }

        });

    });</script></body></html>

 

多选框

<!DOCTYPE html>

<html>

    <head>

        <meta charset='utf-8' />

        <title></title>

        <script type="text/javascript" src='jquery-1.8.2.js'></script>

        <script type="text/javascript">

            $(function(){

                $('#selectAll').click(function(){

                    $('#checklist :checkbox').attr('checked',true);

                })

                $('#unselectAll').click(function(){

                    $('#checklist :checkbox').attr('checked',false);

                })

                $('#reverseAll').click(function(){

                    $('#checklist :checkbox').each(function(){

                        $(this).attr('checked',!$(this).attr('checked'))

                    })

                })

 

            })            

        </script>

    </head>

    <body>

        <div id='checklist'>

            <input type='checkbox' value='1'/>篮球

            <input type='checkbox' value='2'/>足球

            <input type='checkbox' value='3'/>羽毛球

        </div>

        <input type='button' value='全选' id='selectAll' />

        <input type='button' value='不选' id='unselectAll' />

        <input type='button' value='反选' id='reverseAll' />

    </body>

</html>

 

菜单

.hide{

    display: none;

}.container{

    width:300px;

    height: 600px;

    background-color: #ddd;

    border: 1px solid #999;

}.container .title{

    height: 38px;

    font-size: 28px;

    line-height: 38px;

    background-color: orange;

    cursor: pointer;

}.container .body{

    background-color:white;

}.container .body a{

    display:block;

    padding: 10px;

}

<!DOCTYPE html><html>

    <head>

        <meta charset='utf-8' />

        <link rel="stylesheet" type="text/css" href="common.css" />

        <script type="text/javascript" src='jquery-1.8.2.js'></script>

 

    </head>

    <body>

        <div class='container'>

            <div>

                <div class='title'>Menu1</div>

                <div class='body'>

                    <a href="">content1</a>

                    <a href="">content2</a>

                    <a href="">content3</a>

                </div>

            </div>

 

            <div>

                <div class='title'>Menu1</div>

                <div class='body hide'>

                    <a href="">content1</a>

                    <a href="">content2</a>

                    <a href="">content3</a>

                </div>

            </div>

 

            <div>

                <div class='title'>Menu1</div>

                <div class='body hide'>

                    <a href="">content1</a>

                    <a href="">content2</a>

                    <a href="">content3</a>

                </div>

            </div>

            

            <div>

                <div class='title'>Menu1</div>

                <div class='body hide'>

                    <a href="">content1</a>

                    <a href="">content2</a>

                    <a href="">content3</a>

                </div>

            </div>

            

            <div>

                <div class='title'>Menu1</div>

                <div class='body hide'>

                    <a href="">content1</a>

                    <a href="">content2</a>

                    <a href="">content3</a>

                </div>

            </div>

 

        </div>

 

        <script type="text/javascript">

            $(function(){

                $('.title').click(function(){

                    $(this).parent().siblings().children('.body').addClass('hide');

                    $(this).next().removeClass('hide');

                });

            });        </script>

    </body></html>

 

 

 

滚动菜单

<!DOCTYPE html><html><head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

 

        body{

            margin: 0px;

        }

        img {

            border: 0;

        }

        ul{

            padding: 0;

            margin: 0;

            list-style: none;

        }

        .clearfix:after {

            content: ".";

            display: block;

            height: 0;

            clear: both;

            visibility: hidden;

        }

 

        .wrap{

            width: 980px;

            margin: 0 auto;

        }

        

        .pg-header{

            background-color: #303a40;

            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);

            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);

            box-shadow: 0 2px 5px rgba(0,0,0,.2);

        }

        .pg-header .logo{

            float: left;

            padding:5px 10px 5px 0px;

        }

        .pg-header .logo img{

            vertical-align: middle;

            width: 110px;

            height: 40px;

 

        }

        .pg-header .nav{

            line-height: 50px;

        }

        .pg-header .nav ul li{

            float: left;

        }

        .pg-header .nav ul li a{

            display: block;

            color: #ccc;

            padding: 0 20px;

            text-decoration: none;

            font-size: 14px;

        }

        .pg-header .nav ul li a:hover{

            color: #fff;

            background-color: #425a66;

        }

        .pg-body{

 

        }

        .pg-body .catalog{

            position: absolute;

            top:60px;

            width: 200px;

            background-color: #fafafa;

            bottom: 0px;

        }

        .pg-body .catalog.fixed{

            position: fixed;

            top:10px;

        }

 

        .pg-body .catalog .catalog-item.active{

            color: #fff;

            background-color: #425a66;

        }

 

        .pg-body .content{

            position: absolute;

            top:60px;

            width: 700px;

            margin-left: 210px;

            background-color: #fafafa;

            overflow: auto;

        }

        .pg-body .content .section{

            height: 500px;

        }

    </style></head><body>

 

    <div class="pg-header">

        <div class="wrap clearfix">

            <div class="logo">

                <a href="#">

                    <img src=";

                </a>

            </div>

            <div class="nav">

                <ul>

                    <li>

                        <a  href="#">首页</a>

                    </li>

                    <li>

                        <a  href="#">功能一</a>

                    </li>

                    <li>

                        <a  href="#">功能二</a>

                    </li>

                </ul>

            </div>

 

        </div>

    </div>

    <div class="pg-body">

        <div class="wrap">

            <div class="catalog">

                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>

                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>

                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>

            </div>

            <div class="content">

                <div menu="function1" class="section">

                    <h1>第一章</h1>

                </div>

                <div menu="function2" class="section">

                    <h1>第二章</h1>

                </div>

                <div menu="function3" class="section">

                    <h1>第三章</h1>

                </div>

            </div>

        </div>

 

    </div>

 

    <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>

    <script type="text/javascript">

        $(function(){

            Init();

        });        function Init(){

            $(window).scroll(function() {                var scrollTop = $(window).scrollTop();                if(scrollTop > 50){

                    $('.catalog').addClass('fixed');

                }else{

                    $('.catalog').removeClass('fixed');

                }

                $('.content').children().each(function(){                    var offSet = $(this).offset();                    var offTop = offSet.top - scrollTop;                    var height = $(this).height();                    if(offTop<=0 && offTop> -height){                        //去除其余

                        //增多自身

                        var docHeight = $(document).height();                        var winHeight = $(window).height();                        if(docHeight == winHeight scrollTop)

                        {

                            $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');

                        }else{                            var target = $(this).attr('menu');

                            $('.catalog').find('div[auto-to="' target '"]').addClass('active').siblings().removeClass('active');

                        }

 

 

                    }

                });

 

            });

 

 

        }    </script></body></html>

 

前端JS JavaScript是一种属于网络的脚本语言,已经被大范围用于Web应用开拓,常用来为网页加多五花八门的动态效能,为客商提供更...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
{margin:0;padding:0;list-style:none;}
a{text-decoration: none;}
#nocite{
width:80%;
height:40px;
margin:100px auto;
background:#f40;
display: flex;
}
#nocite h1{
/
width:10%; */
width:120px;
float:left;
font-size:16px;
color:#fff;
text-align:center;
background:blue;
margin:10px;
}
#nocite-list{
-webkit-flex:1;
-ms-flex:1;
-o-flex:1;
float:left;
height:41px;
overflow:hidden;
background:#eee;
}
#nocite-list ul li{
height:40px;
display:block;
padding:10px 0px 0px 10px;
}
</style>
<script>
window.onload = function(){
var nociteList = document.getElementById('nocite-list');
nociteList.scrollTop = 0;
var timer;
nociteList.inerHTML =nociteList.innerHTML;
function startMove(){
timer = setInterval(scrollUp,50);
nociteList.scrollTop ;
}
function scrollUp(){
if(nociteList.scrollTop % 50 == 0){
clearInterval(timer);
setTimeout(startMove,1000);
}else{
nociteList.scrollTop ;
if(nociteList.scrollTop>=nociteList.scrollHeight/2){
nociteList.scrollTop = 0;
}
}
}
setTimeout(startMove,1000);
}
</script>
</head>
<body>
<div id="nocite">
<h1>音信通告</h1>
<div id="nocite-list">
<ul>
<li>
<a href="#">西南清华面向整个世界公开选聘部分管理岗位的公告(二〇一五年第4号)</a>
<span class="date">2016-09-27</span>
</li>
<li>
<a href="#">关于沱江河终止放水及犀浦校区人工湖水位相关情况的布告</a>
<span class="date">2016-09-27</span>
</li>
<li>
<a href="#">关于集体2015年国庆“老年健美走“活动的布告</a>
<span class="date">2016-09-27</span>
</li>
<li>
<a href="#">关于举办“交通领域发表现状及干部成长”公开学的料理</a>
<span class="date">2016-09-27</span>
</li>
</ul>
</div>
</div>
</body>
</html>
效果图

图片 1

  1. 此处的代码须要jquery1.3以上的支撑,如下所示:

复制代码 代码如下:

本文由巴黎人游戏官网发布于网络资讯,转载请注明出处://卷动行数,希望本文所述对大家的jQuery程序设计

关键词: