菜单 搜索
首页 前端知识 jquery练习

jquery练习

2024-02-16 14:02:14 前端知识 前端哥 943 950 我要收藏

jquery练习

1.多图片展示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多图片展示效果</title>
<link href="zns_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>
 
</head>
 
<body>
	<ul>
	    <li><img src="images/1.jpg" alt="图片一" longdesc="http://www.zhinengshe.com" /></li>
	    <li><img src="images/2.jpg" alt="图片二" longdesc="http://www.zhinengshe.com" /></li>
	    <li><img src="images/3.jpg" alt="图片三" longdesc="http://www.zhinengshe.com" /></li>
	    <li><img src="images/4.jpg" alt="图片四" longdesc="http://www.zhinengshe.com" /></li>
	    <li><img src="images/5.jpg" alt="图片五" longdesc="http://www.zhinengshe.com" /></li>
	    <li><img src="images/6.jpg" alt="图片六" longdesc="http://www.zhinengshe.com" /></li>
	    <li><img src="images/7.jpg" alt="图片七" longdesc="http://www.zhinengshe.com" /></li>
	    <li><img src="images/8.jpg" alt="图片八" longdesc="http://www.zhinengshe.com" /></li>
	    <li><img src="images/9.jpg" alt="图片九" longdesc="http://www.zhinengshe.com" /></li>
	</ul>
 
 
<script type="text/javascript">
	var z=999
	$('li').on({
		'mouseenter':function(){
			z++;
			$(this).find('img').stop().animate({
				'width':'240px',
				'height':'180px',
				'marginLeft':'-60px',
				'marginTop':'-45px'
			},300);
			$(this).css({
				'position':'relative',
				'zIndex':z//需要进行定位
			})
		},
		'mouseleave':function(){
			$(this).find('img').stop().animate({
				'width':'120px',
				'height':'90px',
				'marginLeft':'0px',
				'marginTop':'0px'
			},300);
		}
	})
</script>
</body>
</html>
复制

展示效果

2.幻灯片-左右滑动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>幻灯片左右滑动效果</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>
 
</head>
 
<body>
 
<div class="box" id="play">
    <p class="prev">&laquo;</p>
    <p class="next">&raquo;</p>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
        <li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
    </ul>
</div>
<script type="text/javascript">
	var Index=0;
	//设置ul的宽度为所有li的宽度
	$('ul').width($('ul>li').eq(0).width()*$('ul>li').length)
	//点击数字发生的变化
	$('ol > li').on({
		'mousedown':function(){
			$('ol > li').removeClass('active');
			$(this).addClass('active');
			$('ul').stop().animate({
				'left':-$(this).index()*$('ul>li').eq(0).width()
			},500);
			Index=$(this).index();
		}
	});
	//点击鼠标右键
	$('.next').on({
		'click':function(){
			Index++;
			if(Index==$('ol > li').length)Index=0;
			$('ol > li').removeClass('active');
			$('ol >li').eq(Index).addClass('active');
			$('ul').stop().animate({
				'left':-Index*$('ul>li').eq(0).width()
			},500);
		},
		'mousedown':function(){
			return false;//取消双击选中
		}
	})
	//点击鼠标左键
    $('.prev').on({
        'click':function(){
            Index--;
            if(Index == -1)Index =  $('ol > li').length-1;
            $('ol > li').removeClass('active');
            $('ol > li').eq(Index).addClass('active');
            $('ul').stop().animate({
                'left':-Index * $('ul>li').eq(0).width()
            },500);
        },
        'mousedown':function(){
            return false;
        }
    });
	//定时执行
	setInterval(function(){
		Index--;
		if(Index == -1)Index =  $('ol > li').length-1;
		$('ol > li').removeClass('active');
		$('ol > li').eq(Index).addClass('active');
		$('ul').stop().animate({
		    'left':-Index * $('ul>li').eq(0).width()
		},500);
	},3000);
</script>
</body>
</html>
复制

效果展示

3.图片轮换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三维图片轮换</title>
<link href="zns_style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.9.1.min.js"></script>
 
</head>
 
<body>
 
<ul id="znsRotatePic">
	<li class="pic1">
		<a href="http://baidu.com/"><img src="images/pic1.gif" alt="pic1" class="unactive" longdesc="http://www.zns.com" width="187" /></a><!-- 208 -->
		<span></span>
	</li>
	<li class="pic2">
		<a href="http://google.com/"><img src="images/pic2.gif" alt="pic2" longdesc="http://www.zns.com" width="208" /></a>
		<span></span>
	</li>
	<li class="pic3">
		<a href="http://www.zns.com/"><img src="images/pic3.gif" alt="pic3" class="unactive" longdesc="http://www.zns.com" width="187" /></a>
		<span></span>
	</li>
</ul>
<script type="text/javascript">
	
	var PosX = [];
	var PosY = [];
	var opa = [];
	var ClassNameArr = [];
	var imgW = [];
	var imgT = [];
	$('a').attr('href','javascript:;');
 
	for(var i = 0;i < $('li').length;i++){
		PosX.push($('li').eq(i).css('left'));
		PosY.push($('li').eq(i).css('top'));
		opa.push($('li img').eq(i).css('opacity'));
		imgW.push($('li img').eq(i).css('width'));
		imgT.push($('li img').eq(i).css('top'));
 
		ClassNameArr.push($('li')[i].className);
 
	};
 
 
 
	$('body').on({
		'click':function(){
			PosX.unshift(PosX.pop());
			PosY.unshift(PosY.pop());
			ClassNameArr.unshift(ClassNameArr.pop());
			opa.unshift(opa.pop());
			imgW.unshift(imgW.pop());
			imgT.unshift(imgT.pop());
			for(var i = 0 ;i < $('li').length;i++){
				$('li').eq(i).stop().animate({
					'left':PosX[i],
					'top':PosY[i]
				},500);
			};
 
			for(var i = 0;i < $('li img').length;i++){
				$('li img').eq(i).stop().animate({
					'opacity':opa[i],
					'width':imgW[i],
					'top':imgT[i]
				},500)
			};
 
			for(var i = 0;i < $('li').length;i++){
				$('li')[i].className = ClassNameArr[i];
			}
		}
	},'.pic3');
	$('body').on({
		'click':function(){
			PosX.push(PosX.shift());
			PosY.push(PosY.shift());
			opa.push(opa.shift());
			ClassNameArr.push(ClassNameArr.shift());
			imgW.push(imgW.shift());
			imgT.push(imgT.shift());
			for(var i = 0 ;i < $('li').length;i++){
				$('li').eq(i).stop().animate({
					'left':PosX[i],
					'top':PosY[i]
				},500);
			};
 
			for(var i = 0;i < $('li img').length;i++){
				$('li img').eq(i).stop().animate({
					'opacity':opa[i],
					'width':imgW[i],
					'top':imgT[i]
				},500)
			};
 
			for(var i = 0;i < $('li').length;i++){
				$('li')[i].className = ClassNameArr[i];
			}
		}
	},'.pic1');
 
	$('body').on({
		'click':function(){
			alert('你真棒！');
		}
	},'.pic2')
</script>
</body>
</html>
复制

效果展示

4.图片展示效果

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片展示</title>
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>
<link href="style/zns_style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div id="automatic">
 
	<div class="prev_div"></div>
    <a class="prev" href="###">
        <span class="ico1"></span>
        <span class="ico"></span>
        <span class="txt"></span>
    </a>
	
	<div class="next_div"></div>
    <a class="next" href="###">
        <span class="ico1"></span>
        <span class="ico"></span>
        <span class="txt"></span>
    </a>
 
	<div class="line"></div>
 
    <ul>
        <li class="pos_0"><a href="http://www.zhinengshe.com"><img src="images/8.jpg" width="100" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
        <li class="pos_1"><a href="http://www.zhinengshe.com"><img src="images/1.jpg" width="270" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
        <li class="pos_2"><a href="http://www.zhinengshe.com"><img src="images/2.jpg" width="510" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
        <li class="pos_3"><a href="http://www.zhinengshe.com"><img src="images/3.jpg" width="680" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
        <li class="pos_4"><a href="http://www.zhinengshe.com"><img src="images/4.jpg" width="510" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
        <li class="pos_5"><a href="http://www.zhinengshe.com"><img src="images/5.jpg" width="270" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
        <li class="pos_6"><a href="http://www.zhinengshe.com"><img src="images/6.jpg" width="270" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
        <li class="pos_6"><a href="http://www.zhinengshe.com"><img src="images/7.jpg" width="270" alt="智能社 www.zhinengshe.com" longdesc="http://www.zhinengshe.com" /></a></li>
    </ul>
 
</div>
 
<script type="text/javascript">
    //定义一个变量
    var leo = {
        'left':[],
        'top':[],
        'z':[],
        'opa':[],
        'w':[],
        'h':[]
    };
	//取到所有ul下面的li
    var allLi = $('ul > li');
	//变量数据并存入数据
    for(var i = 0;i < allLi.length;i++){
        leo.left.push(allLi.eq(i).css('left'));
        leo.top.push(allLi.eq(i).css('top'));
        leo.z.push(allLi.eq(i).css('zIndex'));
        leo.opa.push(allLi.eq(i).css('opacity'));
        leo.w.push(allLi.eq(i).css('width'));
        leo.h.push(allLi.eq(i).css('height'));
    };
 
    for(var i = 0;i < allLi.length;i++){
        allLi.eq(i).css({
            'width':leo.w[i],
            'height':leo.h[i]
        })
    };
 
    $('img').width('100%');
	//添加开关
    var t = true;
   $('.prev_div').click(function(){
    if(!t)return;
    t = false;
        leo.left.unshift(leo.left.pop());
        leo.top.unshift(leo.top.pop());
        leo.z.unshift(leo.z.pop());
        leo.opa.unshift(leo.opa.pop());
        leo.w.unshift(leo.w.pop());
        leo.h.unshift(leo.h.pop());
        for(var i = 0;i < allLi.length;i++){
            allLi.eq(i).css({
                'zIndex': leo.z[i]
            });
            allLi.eq(i).stop().animate({
                'left':leo.left[i],
                'top':leo.top[i],
                'opacity':leo.opa[i],
                'width':leo.w[i],
                'height':leo.h[i]
            },500,function(){
                t = true;
            });
        }
   });
   $('.next_div').click(function(){
    if(!t)return;
    t = false;
        leo.left.push(leo.left.shift());
        leo.top.push(leo.top.shift());
        leo.z.push(leo.z.shift());
        leo.opa.push(leo.opa.shift());
        leo.w.push(leo.w.shift());
        leo.h.push(leo.h.shift());
        for(var i = 0;i < allLi.length;i++){
            allLi.eq(i).css({
                'zIndex': leo.z[i]
            });
            allLi.eq(i).stop().animate({
                'left':leo.left[i],
                'top':leo.top[i],
                'opacity':leo.opa[i],
                'width':leo.w[i],
                'height':leo.h[i]
            },500,function(){
                t = true;
            });
        }
   });
 
</script>
</body>
</html>
复制

效果展示

转载请注明出处或者链接地址：https://www.qianduange.cn//article/2185.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

jquery.动画和事件

2024-03-03 11:03:13

jQuery位置方法

2024-03-03 11:03:13

jQuery中val()和text()的区别

2024-03-03 11:03:11

031-安全开发-JS应用&WebPack打包器&第三方库JQuery&安装使用&安全检测

2024-03-03 11:03:54

Django和jQuery，实现Ajax表格数据分页展示

2024-03-03 11:03:50

jQuery判断checked的三种方法

2024-03-03 11:03:50

无涯教程-jQuery - offsetParent( )方法函数

2024-03-03 11:03:49

jquery实现甘特图时效管理

2024-03-03 11:03:47

echarts堆叠条形图Stacked Horizontal Bar鼠标悬停时tooltip展示每一列的总数量、修改legend样式为圆形

2024-03-03 11:03:44

django之 echarts数据可视化

2024-03-03 11:03:26

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999
8

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
9

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
10

尚硅谷css3笔记

2024-02-13 10:02:44998

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！