返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

jquery效果大全下

2020-04-13 文章标签: jquery 效果 浏览次数:

我们继续讲解jquery操作页面效果中,比如停止动画,关闭动画,设置动画频率,折叠面板,树形结构,选项卡

jquery操作创建元素

1.jquery停止动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $("input").eq(0).click(function(){
        $("div").animate({
            fontSize : "10em"
        }, 8000);
    });
    $("input").eq(1).click(function(){
        $("div").stop();
    })
})
</script>
</head>
<body>
<input type="button" value="自定义动画" /><input type="button" value="停止动画" />
<div style="border:solid 1px red;">自定义动画</div>
</body>
</html>

2.jquery关闭动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    jQuery.fx.off = true;
    $("input").click(function(){
        $("div").animate({
            fontSize : "10em"
        }, 8000);
    });
})
</script>
</head>
<body>
<input type="button" value="自定义动画" />
<div style="border:solid 1px red;">自定义动画</div>
</body>
</html>

3.jquery设置动画频率

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
jQuery.fx.interval = 100;
    $("input").click(function(){
        $("div").toggle( 3000 );
    }); 
})
</script>
<style type="text/css">
div { width:500px; height:300px; margin:5px; float:left; background:green; }
</style>
</head>
<body>
<input type="button" value="运行动画"/>
<div></div>
</body>
</html>

4.jquery设置动画频率

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
jQuery.fx.interval = 100;
    $("input").click(function(){
        $("div").toggle( 3000 );
    }); 
})
</script>
<style type="text/css">
div { width:500px; height:300px; margin:5px; float:left; background:green; }
</style>
</head>
<body>
<input type="button" value="运行动画"/>
<div></div>
</body>
</html>

5.jquery折叠面板

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    var t = [];
    var dt = $("dl.collapse dt");
    var dd = $("dl.collapse dd");
    dt.each(function(i){
        t[i] = false;
        $(dt[i]).click((function(i,dd){
            return function(){
                if( t[i]){
                    $(dd).show();
                    t[i]  = false;
                }
                else{
                    $(dd).hide();
                    t[i]  = true;
                }
            }
        })(i,dd[i]));         
        
    })
 
})
</script>
<style type="text/css">
.collapse {
	width:340px;
	border:solid 1px  #ccc;
	margin:2px;
	float:left;
}
.collapse  dt {
	padding:8px 8px;
	background:#7FECAD url(//freemuban.com/img/green.gif) repeat-x;
	font-size:13px;
	font-weight:bold;
	color:#71790C;
	border-bottom:solid 1px #efefef;	
	cursor:pointer;
}
.collapse dd {
	margin:0;
	padding:6px;
}
</style> 
</head>
<body>
<dl class="collapse">
    <dt>标题栏</dt>
    <dd>内容框<br /><img src="//freemuban.com/img/demo1.jpg" height="200" /></dd>
</dl>
<dl class="collapse">
    <dt>标题栏</dt>
    <dd><img src="//freemuban.com/img/demo2.jpg" height="200" /></dd>
</dl>
<dl class="collapse">
    <dt>标题栏</dt>
    <dd><img src="//freemuban.com/img/demo1.jpg" height="200" /></dd>
</dl>
</body>
</html>

6.jquery 树形结构

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
window.onload = function(){	//页面初始化处理函数
    var li = document.getElementsByTagName("li");	//获取页面中所有li元素
    var t =[]; 	//定义临时数组
    for(var i = 0; i < li.length; i ++ ){	//遍历数组
        var child = li[i].childNodes;	//获取当前li元素包含的所有子节点
        var b = false;	//定义临时变量,并初始化为false
        for(var j=0; j<child.length;j++){	//遍历当前li元素包含的节点,并检测是否包含ul元素
            if(child[j].nodeType == 1 && child[j].nodeName.toLowerCase() == "ul")
                b = true;	//如果li元素包含ul元素,则设置b为true
        }
        if(b){	//如果li元素包含ul元素
            li[i].style.cursor = "pointer";		//定义当前li元素的鼠标指针样式为手形
            li[i].style.listStyleImage = "url(//freemuban.com/img/+.gif)"; 	//修改当前li元素的选项列表图标形状
            var ul =  li[i].getElementsByTagName("ul")[0]; //获取第一个ul子元素
            ul.style.display = "none";	//隐藏第一个ul元素
            t[i] = true; 	//设置当前序号位置的数组元素的值为true
            li[i].onclick = (function(o,li,i){ 	//绑定click单击事件处理函数
                return function(e){ 	//返回闭包函数
                    if(li == e.target || li == window.event.srcElement ){ 	//如果当前元素就是事件触发的目标对象,则允许执行。这样做的目的,是防止单击当前li元素的子元素时,也触发cilck事件
                        if( t[i]){		//如果当前数组元素值为true
                            o.style.display = "";	//恢复显示ul元素
                            li.style.listStyleImage =  "url(//freemuban.com/img/-.gif)"; //修改li元素项目列表符号
                            t[i] = false;		//切换当前数组元素值为false
                        }
                        else{		//如果当前数组元素值为false
                            o.style.display = "none";	//隐藏显示ul元素
                            li.style.listStyleImage =  "url(//freemuban.com/img/+.gif)"; //修改li元素项目列表符号
                            t[i] = true; 	//切换当前数组元素值为true
                        }
                    }
                    if ( e && e.stopPropagation ) //兼容非IE浏览器
                        e.stopPropagation();	//阻止事件传播
                    else 			//兼容IE浏览器
                        window.event.cancelBubble = true; 	//阻止事件传播
                    return false; 	//避免触发默认事件
                }
            })(ul,li[i],i); //调用函数,传递当前li元素及其包含的第一个ul,以及当前li下标
        }
        else{			//如果li元素不包含ul元素
            li[i].style.cursor = "default"; 			//恢复li元素的鼠标默认样式
            li[i].style.listStyleImage = "none"; 		//恢复li元素的默认列表项目符号
        }
    }
}
</script>
<style type="text/css"></style>
</head>
<body>
<ul class="tree">
    <li>首页</li>
    <li>新闻
        <ul>
            <li>国内新闻</li>
            <li>国际新闻</li>
        </ul>
    </li>
    <li>科技
        <ul>
            <li>桌面科技</li>
            <li>移动科技
                <ul>
                    <li>iPhone</li>
                    <li>HTC </li>
                    <li>Android</li>
                </ul>
            </li>
            <li>应用科技</li>
        </ul>
    </li>
    <li>社会</li>
</ul>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$( function(){
    $( "li:has(ul)" ).click( function( event ){
        if ( this == event.target ) {
            if ( $( this ).children().is( ":hidden" ) ) {
                $( this ).css( "list-style-image", "url(//freemuban.com/img/-.gif)" ).children().show();
            }
            else {
                $( this ).css( "list-style-image", "url(//freemuban.com/img/+.gif)" ).children().hide();
            }
        }
        return false;
    }).css( {
        cursor : "pointer",
        "list-style-image" : "url(//freemuban.com/img/+.gif)"
    }).children().hide();
    $( "li:not(:has(ul))" ).css( {
        cursor : "default",
        "list-style-image" : "none"
    });
});
</script>
<style type="text/css"></style>
</head>
<body>
<ul class="tree">
    <li>首页</li>
    <li>新闻
        <ul>
            <li>国内新闻</li>
            <li>国际新闻</li>
        </ul>
    </li>
    <li>科技
        <ul>
            <li>桌面科技</li>
            <li>移动科技
                <ul>
                    <li>iPhone</li>
                    <li>HTC </li>
                    <li>Android</li>
                </ul>
            </li>
            <li>应用科技</li>
        </ul>
    </li>
    <li>社会</li>
</ul>
</body>
</html>

7.jquery 选项卡

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
if(!document.getElementsByClassName){ 
	document.getElementsByClassName = function(className, element){ 
		var children = (element || document).getElementsByTagName("*"); 
		var elements = new Array(); 
		for (var i=0; i<children.length; i++){ 
			var child = children[i]; 
			var classNames = child.className.split(" "); 
			for (var j=0; j<classNames.length; j++){ 
				if (classNames[j] == className){ 
					elements.push(child); 
					break; 
				} 
			} 
		} 
		return elements; 
	}; 
}
window.onload = function(){
    var tab = document.getElementsByClassName("tab")[0];	//获取选项卡的外框
    var ul = tab.getElementsByTagName("ul")[0];	//获取选项卡标题栏的外框
    var ol = tab.getElementsByTagName("ol")[0]; 	//获取选项卡内容框的外框
    var uli = ul.getElementsByTagName("li");	//获取所有标题栏选项
    var oli = ol.getElementsByTagName("li");	//获取所有内容选项
    for(var i=0; i<uli.length; i++){	//遍历标题栏选项
        uli[i].className = "normal";	//设置所有标题栏选项的类样式为普通样式
    }
    for(var i=0; i<oli.length; i++){	//遍历内容框选项
        oli[i].className = "none";	//设置所有内容框选项的类样式为隐藏
    }
    uli[0].className = "hover";	//设置第一个标题栏选项为凸起显示
    oli[0].className = "show";	//设置第一个内容框选项为显示出来
    var addEvent=function(e, fn) {	//自定义绑定mouseover事件函数
        if(document.addEventListener){ 	//兼容非IE浏览器
            return e.addEventListener("mouseover", fn, false);
        }
        else if(document.attachEvent){ 	//兼容IE浏览器
            return e.attachEvent("onmouseover", fn);
        }
    };
    for(var j = 0; j < uli.length; j ++ ){ 	//遍历标题栏选项
        (function(j,uli,oli){ 	//调用匿名函数
            addEvent(uli[j], function(){	//为当前标题栏选项元素绑定mouseover事件
                for(var n = 0; n < uli.length; n ++ ){ 	//遍历标题栏选项
                    uli[n].className = "normal";	//恢复所有标题栏选项为普通显示状态
                    oli[n].className = "none";	//隐藏所有内容框选项
                }
                uli[j].className = "hover";	//设置当前标题栏为凸起效果
                oli[j].className = "show";	//显示当前标题栏对应的内容框选项
            });
        })(j,uli,oli); 	//把当前序号、标题栏选项数组和内容框选项数组传递进去
    }
}

</script>
<style type="text/css">
.tab ul, .tab ol {  
    list-style:none;
    margin:0;
    padding:0;
}
.tab ul {
    height:26px;
    width:500px;
}

.tab ol {
    height:auto;
    width:500px;
    padding:6px;
    background:#1B8DD6;
}
.tab ul li {
    float:left;
    height:24px;
    padding:0 1em;
    cursor:pointer;
}

.normal {
    color:#1f3a87;
    background:#fff;
    border:2px solid #1B8DD6;
    border-bottom:0;
}
.hover {
    color:#fff;
    font-weight:bold;
    background:#1B8DD6;
    border:2px solid #1B8DD6;
    border-bottom:0;
}
.show { display:block; }
.none { display:none; }
</style>
</head>
<body>
<div class="tab">
    <ul>
        <li>Tab1</li>
        <li>Tab2</li>
        <li>Tab3</li>
    </ul>
    <ol>
        <li><img src="//freemuban.com/img/demo1.jpg" width="450" /></li>
        <li><img src="//freemuban.com/img/demo2.jpg" width="450" /></li>
        <li><img src="//freemuban.com/img/demo1.jpg" width="450" /></li>
    </ol>
</div>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$( function(){
    var $uli = $(".tab ul li");
    var $oli = $(".tab ol li");
    $uli.addClass("normal");
    $oli.addClass("none");
    $uli[0].className = "hover";
    $oli[0].className = "show";
    $uli.each(function(n){
        $(this).mouseover(function(){
            $uli.removeClass().addClass("normal");
            $(this).removeClass().addClass("hover");
            $oli.removeClass().addClass("none");
            $($oli[n]).removeClass().addClass("show");
        })   
    })
});
</script>
<style type="text/css">
.tab ul, .tab ol {  
    list-style:none;
    margin:0;
    padding:0;
}
.tab ul {
    height:26px;
    width:500px;
}

.tab ol {
    height:auto;
    width:500px;
    padding:6px;
    background:#1B8DD6;
}
.tab ul li {
    float:left;
    height:24px;
    padding:0 1em;
    cursor:pointer;
}

.normal {
    color:#1f3a87;
    background:#fff;
    border:2px solid #1B8DD6;
    border-bottom:0;
}
.hover {
    color:#fff;
    font-weight:bold;
    background:#1B8DD6;
    border:2px solid #1B8DD6;
    border-bottom:0;
}
.show { display:block; }
.none { display:none; }
</style>
</head>
<body>
<div class="tab">
    <ul>
        <li>Tab1</li>
        <li>Tab2</li>
        <li>Tab3</li>
    </ul>
    <ol>
        <li><img src="//freemuban.com/img/demo1.jpg" width="450" /></li>
        <li><img src="//freemuban.com/img/demo2.jpg" width="450" /></li>
        <li><img src="//freemuban.com/img/demo1.jpg" width="450" /></li>
    </ol>
</div>
</body>
</html>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。