jQuery之图片显示篇A

其他 2019-01-13 14:45:18 阅读次数: 0

1、在鼠标放在图片上时上下震动图片

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在鼠标放在图片上时震动图片</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style type="text/css">
	.box_img{width:300px;margin-left:40px;margin-top:40px;float: left;position: relative;left: 0px;top:0px;}
	.box_img img{width: 100%;}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		//鼠标放到上面事件
	    $(".box_img").mouseover(function(){	
			//判断当前图片是否处于动画状态
			if(!$(this).is(":animated")){
				$(this).animate({top:19},300).animate({top:0},100).animate({top:-15},100).animate({top:0},50).animate({top:-15},100).animate({top:0},50).animate({top:-15},100).animate({top:0},50).animate({top:-15},100).animate({top:0},50).animate({top:-15},100).animate({top:0},50).animate({top:-15},100).animate({top:0},100);
			}
		});
	});
</script>
</head>

<body>
<div>
	<div class="box_img"><img src="../../../../百度背景皮肤/back_img/img6.jpg"/></div>
	<div class="box_img"><img src="../../../../百度背景皮肤/back_img/img8.jpg"/></div>
	<div class="box_img"><img src="../../../../百度背景皮肤/back_img/img10.jpg"/></div>
</div>
</body>
</html>

展示效果：

2、使用图片模拟QQ聊天窗口的抖动特效

//定义图片盒子div左上角top和left的+=2px;实现视觉上的抖动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用图片模拟QQ聊天窗口的抖动特效</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
	function converStyle(myObj){
		if(myObj.length){
			//设置对象的左上角坐标
			for(var i=0;i<myObj.length;i++){
				myObj[i].style.left=myObj[i].offsetLeft+"px";
				myObj[i].style.top=myObj[i].offsetTop+"px";
			}
			//设置对象的位置模式
			for(var i=0;i<myObj.length;i++){
				myObj[i].style.position="absolute";
				myObj[i].style.margin="0px";
			}
		}else{
			myObj.style.left=myObj.offsetLeft+"px";
			myObj.style.top=myObj.offsetTop+"px";
			myObj.style.position="absolute";
			myObj.style.margin="0px";
		}
	}
	function shake(myObj){
		var posData=[myObj.offsetLeft,myObj.offsetTop];
		myObj.onclick=function(){
			var i=0;
			clearInterval(timer);
			var timer=setInterval(function(){
				i++;
				myObj.style.left=posData[0]+((i%2)>0?-2:2)+'px';
				myObj.style.top=posData[1]+((i%2)>0?-2:2)+"px";
				//终止抖动
				if(i>=30){
					clearInterval(timer);
					myObj.style.left=posData[0]+"px";
					myObj.style.top=posData[1]+"px";
				}
			},30);
			
		}
	}
	$(function(){
		var myBox=$("#box_img").get(0);
		converStyle(myBox);
		shake(myBox);
		
	});
</script>
</head>

<body>
<div id="box_img" style="width:500px;position:relative;top:20px;left:400px;">
	<img src="../../../../百度背景皮肤/back_img/img9.jpg" style="width: 100%"/>
</div>
</body>
</html>

展示效果：

3、在鼠标放在图片上时滑出上下遮罩层

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在鼠标放在图片上时滑出上下遮罩层</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style type="text/css">
	.photo{
		position: relative;
		margin: 0 auto;
		text-align: center;
		overflow: hidden;
		width: 420px;
		top:20px;
		left: 0px;
	}
	.photo .heading,.photo .caption{
		position: absolute;
		background-color: black;
		height: 50px;
		width: 420px;
		opacity: 0.5;
	}
	.photo .heading{
		top:-50px;
		left: 0px;
	}
	.photo .caption{
		bottom: -70px;
		left: 0px;
		height: 70px;
	}
	.photo .heading span{
		color: white;
		font-weight: bold;
		display: block;
		padding: 15px 0 0 10px;
	}
	.photo .caption span{
		text-align: left;
		color: white;
		font-size: 12px;
		display: block;
		padding: 8px 10px 0 10px;
		text-indent: 2em;
	}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		$(".photo").mouseover(function(){
			//在鼠标悬浮图片时上下同时滑入提示遮罩层
			$(this).children("div:first").stop(false,true).animate({top:0},200);
			$(this).children("div:last").stop(false,true).animate({bottom:0},200);
		}).mouseout(function(){
			//在鼠标离开图片时上下提示遮罩层同时滑出
			$(this).children("div:first").stop(false,true).animate({top:-50},200);
			$(this).children("div:last").stop(false,true).animate({bottom:-70},200);
		});
	});
</script>
</head>

<body>
<div class="photo">
	<div class="heading"><span>AngelBaby(杨颖)</span></div>
	<img src="../../../../百度背景皮肤/star_img/img2.jpg" width="100%"/>
	<div class="caption"><span>Angelababy（杨颖），1989年2月28日出生于上海市，华语影视女演员、时尚模特。2003年，Angelababy以模特身份出道，此后，她因担任时尚模特而在香港崭露头角。2007年，她开始将工作重心转向大银幕...</span></div>
</div>
</body>
</html>

展示效果：

mouseover()事件，鼠标悬浮在图片上时，触发该事件

4、轻量级无插件的广告图片轮播切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轻量级无插件的广告图片轮播切换</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var myNum=0;
		var timeInterval=2000;
		var myImageli=$("#myImage li");
		var myNumli=$("#myNum li");
		//隐藏所有的图片
		myImageli.hide();
		//显示第一张图片
		$(myImageli.get(0)).show();
		function play(){
			myNum<myImageli.length-1?myNum++:myNum=0;
			//第myNum-1个图片展现，其余同胞隐藏
			myImageli.eq(myNum).show().siblings().hide();
			myNumli.eq(myNum).addClass("bks").siblings().removeClass("bks");
		}
		var set=window.setInterval(play,timeInterval);
		myNumli.mousemove(function(){
			window.clearInterval(set);
			myNum=$(this).index();
			myImageli.eq(myNum).show().siblings().hide();
			myNumli.eq(myNum).addClass("bks").siblings().removeClass("bks");
		}).mouseout(function(){
			set=window.setInterval(play,timeInterval);
		});
	});
</script>
<style type="text/css">
	#myImage{
		text-align: center;
		height:420px;
	}
	#myImage li,li img{
		height:420px;
	}
	.boxx_title{
		width:250px;
		height:20px;
		position: absolute;
		top: 400px;
		right:165px;
		z-index: 100;
	}
	.boxx_title li{
		width: 15px;
		height: 15px;
		float: left;
		margin-left: 10px;
		display: inline;
		cursor: pointer;
		line-height: 15px;
		text-align: center;
	}
	ul{list-style: none}
	.bks{color: #fff;background-color: #ce2329;}
</style>
</head>

<body>
<ul id="myImage">
	<li>
		<a href="http://www.baidu.com">
			<img src="../../../../百度背景皮肤/star_img/img25.jpg"/>
		</a>
	</li>
	<li>
		<a href="http://www.baidu.com">
			<img src="../../../../百度背景皮肤/star_img/img26.jpg"/>
		</a>
	</li>
	<li>
		<a href="http://www.baidu.com">
			<img src="../../../../百度背景皮肤/star_img/img29.jpg"/>
		</a>
	</li>
</ul>
<ul class="boxx_title" id="myNum">
	<li class="bks">1</li>
	<li>2</li>
	<li>3</li>
</ul>
</body>
</html>

展示效果：

5、轻量级无插件的广告图片轮播显示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轻量级无插件的广告图片轮播显示</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
	var time="";
	var index=1;
	$(function(){
		showing(index);
		$(".imgnum span").mouseover(function(){
			clearTimeout(time);
			var icon=$(this).text();
			$(".imgnum span").removeClass("onselect").eq(icon-1).addClass("onselect");
			$("#banner_img li").hide().eq(icon-1).fadeIn(1000);
		}).mouseout(function(){
			index=$(this).text()>4?1:parseInt($(this).text())+1;
			time=setTimeout("showing("+index+")",3000);
		});
	});
	function showing(num){
		index=num;
		$(".imgnum span").removeClass("onselect").eq(index-1).addClass("onselect");
		$("#banner_img li").hide().eq(index-1).fadeIn(1000);
		index=index+1>5?1:index+1;
		time=setTimeout("showing("+index+")",3000);
	}
</script>
<style type="text/css">
	#banner_img img{
		height: 420px;
	}
	.clear{
		overflow: hidden;
		clear: both;
		width: 0px;
		height: 0px;
	}
	.imgbox{
		height: 420px;
		margin: 0 auto;
		position: relative;
		margin-left: 300px;
	}
	ul{
		padding: 0px;
		margin: 0px;
	}
	ul li{
		float: left;
		list-style: none;
	}
	ul li.select{
		display: block;
	}
	.imgnum span{
		border-radius: 10px;
		font:normal normal bold 12px/15px 微软雅黑;
		color: #fff;
		margin-left: 15px;
		padding: 3px 6px 3px 6px;
		background-color: #FF9900;
		cursor: pointer;
	}
	.imgnum span.onselect{
		background-color: #FF0000;
	}
	.imgnum{
		text-align: center;
		float: right;
		position: absolute;
		left: 450px;
		bottom:10px;
	}
</style>
</head>

<body>
<div class="imgbox">
	<ul id="banner_img">
		<li>
			<img src="../../../../百度背景皮肤/star_img/img25.jpg"/>
		</li>
		<li>
			<img src="../../../../百度背景皮肤/star_img/img26.jpg"/>
		</li>
		<li>
			<img src="../../../../百度背景皮肤/star_img/img29.jpg"/>
		</li>
		<li>
			<img src="../../../../百度背景皮肤/star_img/img8.jpg"/>
		</li>
		<li>
			<img src="../../../../百度背景皮肤/star_img/img27.jpg"/>
		</li>
	</ul>
	<div class="clear"></div>
	<div class="imgnum">
		<span class="onselect">1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
	</div>
</div>
</body>
</html>

展示效果：

6、轻量级无插件的广告图片切换显示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轻量级无插件的图片定时轮播显示</title>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	ul{
		list-style: none;
	}
	.slideShow{
		width: 440px;
		border: 0px #eeeeee solid;
		margin: 20px auto;
		position: relative;
		overflow: hidden;
	}
	.slideShow ul{
		width: 20000px;
		position:relative;
	}
	.slideShow li{
		float: left;
		width: 440px;
	}
	.slideShow li img{
		width: 100%;
	}
	.slideShow .showNav{
		position: absolute;
		right: 10px;
		bottom: 5px;
		text-align: center;
		font-size: 14px;
		line-height: 20px;
	}
	.slideShow .showNav span{
		cursor: pointer;
		display: block;
		float: left;
		width: 20px;
		height: 20px;
		background-color: #0026ff;
		margin-left: 2px;
		color: white;
		border-radius: 5px;
	}
	.slideShow .showNav .active{
		background-color:#0B0000;
	}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var slideShow=$(".slideShow");
		var ul=slideShow.find("ul");
		var showNumber=slideShow.find(".showNav span");
		//获取图片的宽度
		var oneWidth=slideShow.find("ul li").eq(0).width();
		var timer=null;
		var iNow=0;
		//手动单击按钮进行图片轮播
		showNumber.on("click",function(){
			$(this).addClass("active").siblings().removeClass("active");
			//获取单击按钮的索引
			var index=$(this).index();
			iNow=index;
			ul.animate({"left":-oneWidth*iNow});
		});
		//定时自动轮播图片代码
		timer=setInterval(function(){
			iNow++;
			if(iNow>showNumber.length-1){
				iNow=0;
			}
			//模拟触发数字按钮的click事件
			showNumber.eq(iNow).trigger("click");
		},2000);
		//鼠标悬停时，离开时的各自事件
		slideShow.hover(function(){
			clearInterval(timer);
		},function(){
			timer=setInterval(function(){
				iNow++;
				if(iNow>showNumber.length-1){
					iNow=0
				}
				showNumber.eq(iNow).trigger("click");
			},2000);
		});
	});
</script>
</head>
<body>
<center>
	<div class="slideShow">
		<ul>
			<li>
				<a href="#">
					<img src="../../../../百度背景皮肤/star_img/img29.jpg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../../../../百度背景皮肤/star_img/img3.jpg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../../../../百度背景皮肤/star_img/img19.jpg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../../../../百度背景皮肤/star_img/img23.jpg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="../../../../百度背景皮肤/star_img/img30.jpg"/>
				</a>
			</li>
		</ul>
		<div class="showNav">
			<span class="active">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
		</div>
	</div>
</center>
</body>
</html>

展示效果：

7、大图片和缩略图片同时实现自动播放

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>大图片和缩略图片同时实现自动轮播</title>
<style type="text/css">
	.myImage{
		height:455px;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
		width: 640px;
	}
	.myImage .mask{
		height:52px;
		line-height: 52px;
		background-color: #000000;
		text-align: right;
		position: absolute;
		left: 0;
		overflow: hidden;
		width: 100%;
	}
	.myImage .mask img{
		vertical-align: middle;
		margin-right: 10px;
		cursor: pointer;
	}
	.myImage .mask .show{
		margin-bottom: 5px;
	}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".myImage").each(function(){
			var timer;
			$(".myImage .mask img").click(function(){
				//获取当前图片的索引值
				var index=$(this).index();
				changeImg(index);
			}).eq(0).click();
			$(this).find(".mask").animate({"bottom":"0px"},700);
			$(".myImage").hover(function(){
				clearInterval(timer);
			},function(){
				timer=setInterval(function(){
					var show=$(".myImage .mask img").index($(".myImage .mask .show"));
					if(show>=$(".myImage .mask img").length-1){
						show=0;
					}else{
						show++;
					}
					changeImg(show);
				},3000);
			});
			function changeImg(index){
				$(".myImage .mask img").removeClass("show").eq(index).addClass("show");
				$(".myImage .bigImg").parent("a").attr("href",$(".myImage .mask img").eq(index).attr("link"));
				$(".myImage .bigImg").hide().attr("src",$(".myImage .mask img").eq(index).attr("uri")).fadeIn("slow");
			}
			timer=setInterval(function(){
				var show=$(".myImage .mask img").index($(".myImage .mask .show"));
				if(show>=$(".myImage .mask img").length-1){
					show=0;
				}else{
					show++;
				}
				changeImg(show);
			},3000);
		});
	});
</script>
</head>

<body>
<div class="myImage">
	<a href="#">
		<img class="bigImg" height="400"/>
	</a>
	<div class="mask">
		<img src="../../../../百度背景皮肤/star_img/img17.jpg" uri="../../../../百度背景皮肤/star_img/img17.jpg" height="42" class="show"/>
		<img src="../../../../百度背景皮肤/star_img/img18.jpg" uri="../../../../百度背景皮肤/star_img/img18.jpg" height="42"/>
		<img src="../../../../百度背景皮肤/star_img/img19.jpg" uri="../../../../百度背景皮肤/star_img/img19.jpg" height="42"/>
		<img src="../../../../百度背景皮肤/star_img/img20.jpg" uri="../../../../百度背景皮肤/star_img/img20.jpg" height="42"/>
		<img src="../../../../百度背景皮肤/star_img/img21.jpg" uri="../../../../百度背景皮肤/star_img/img21.jpg" height="42"/>
	</div>
</div>
</body>
</html>

展示效果：

8、悬浮前后导航按钮的广告图片轮播

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>悬浮前后导航按钮的广告图片轮播</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style type="text/css">
	*{padding: 0px;margin: 0px;}
	ul{list-style: none;}
	.wrap{
		height:400px;
		margin: 10px auto 0px auto;
		position: relative;
		width:640px;
	}
	.banner,.bannerCon{
		width:100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		left: 0px;
		top:0px;
	}
	.bannerCon .imgList li{float: left;}
	.bannerCon .imgList{
		position: absolute;
		left: 0px;
		top:0px;
		z-index: 0;
	}
	img{
		height: 400px;
	}
	.bannerCon .pre_nex{
		display: none;
		position: absolute;
		top: 50%;
		widows: 40px;
		height: 80px;
		margin-top: -40px;
		color: #cccccc;
		font-size: 60px;
		text-align: center;
		background-color: rgba(0,0,0,0.30);
		cursor: pointer;
		z-index: 3;
	}
	.bannerCon .pre_nex.show{
		display:block;
	}
	.bannerCon .prev{
		left: 8%;
	}
	.bannerCon .next{
		right: 8%;
	}
	.bannerCon .btnList{
		position: absolute;
		right: 20px;
		bottom: 20px;
		height: 20px;
		text-align: center;
		z-index: 2;
		overflow: hidden;
	}
	.bannerCon .btnList li{display: inline;}
	.bannerCon .btnList li span{
		display: inline-block;
		width: 12px;
		height: 12px;
		margin: 0 8px;
		border-radius: 6px;
		background-color: slategray;
		cursor: pointer;
	}
	.bannerCon .btnList li.cur span{background-color: lightgray;}
</style>
<script type="text/javascript">
	function Scroll(obj,speed,interval){
		$("."+obj).each(function(){
			var box=$(this);
			var imgUl=box.children(".imgList");
			var imgLi=imgUl.children("li");
			var btnUl=box.children(".btnList");
			var btnLi=btnUl.children("li");
			var btnPreNex=box.children(".pre_nex");
			var btnPre=box.children(".prev");
			var btnNex=box.children(".next");
			var n=imgLi.length;
			var width=imgLi.width();
			var left=parseInt(imgUl.css("left"));
			var k=0;
			var player;
			imgUl.css("width",n*width);
			//轮播事件
			function scroll(){
				imgUl.stop().animate({left:-width},speed,function(){
					k+=1;
					imgUl.css("left",0);
					imgUl.children("li:first").appendTo($(this));
					btnLi.removeClass('cur');
					if(k>=n){
						k=0;
					}
					btnUl.children("li").eq(k).addClass("cur");
				});
			}
			//响应单击小圆点事件
			btnLi.click(function(){
				var index=btnLi.index(this);
				$(this).addClass("cur").siblings("li").removeClass("cur");
				if(index>=k){
					var dif=index-k;
					left=-dif*width;
					imgUl.stop().animate({left:left},speed,function(){
						imgUl.css("left",0);
						imgUl.children("li:lt("+dif+")").appendTo(imgUl);
					});
				}else{
					var j=n-(k-index);
					imgUl.css("left",(index-k)*width);
					imgUl.children("li:lt("+j+")").appendTo(imgUl);
					imgUl.stop().animate({left:0},speed);
				}
				k=index;
			});
			//响应左右按钮单击事件
			btnPreNex.click(function(){
				if($(this).hasClass('next')){
					if(!imgUl.is(":animated")){
						k+=1;
						imgUl.animate({left:-width},speed,function(){
							imgUl.css("left",0);
							imgUl.children("li:first").appendTo($(this));
							if(k>=n){
								k=0;
							}
							btnUl.children("li").removeClass('cur').eq(k).addClass("cur");
						});
					}
				}else{
					if(!imgUl.is(":animated")){
						k+=-1;
						imgUl.css("left",-width);
						imgUl.children("li:last").prependTo(imgUl);
						imgUl.stop().animate({left:0},speed);
						if(k<0){
							k=n-1;
						}
						btnUl.children("li").removeClass("cur").eq(k).addClass("cur");
					}
				}
			});
			//鼠标悬浮图片响应
			box.hover(function(){
				clearInterval(player);
				btnPreNex.addClass("show");
			},function(){
				//鼠标离开事件响应
				player=setInterval(function(){scroll()},interval);
				btnPreNex.removeClass("show");
			});
			player=setInterval(function(){scroll()},interval);
		});
	}
	$(function(){
		Scroll("bannerCon",600,2000);
	});
</script>
</head>

<body>
<div class="wrap">
	<div class="banner">
		<div class="bannerCon">
			<ul class="imgList clearfix">
				<li>
					<a href="#">
						<img src="../../../../百度背景皮肤/star_img/img12.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../../../../百度背景皮肤/star_img/img22.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../../../../百度背景皮肤/star_img/img18.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../../../../百度背景皮肤/star_img/img21.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../../../../百度背景皮肤/star_img/img1.jpg" alt="">
					</a>
				</li>
			</ul>
			<ul class="btnList clearfix">
				<li class="cur"><span></span></li>
				<li><span></span></li>
				<li><span></span></li>
				<li><span></span></li>
				<li><span></span></li>
			</ul>
			<span class="pre_nex prev">&lt;</span>
			<span class="pre_nex next">&gt;</span>
		</div>
	</div>
</div>
</body>
</html>

展示效果：

猜你喜欢

转载自blog.csdn.net/weixin_42210229/article/details/83348266
今日推荐
技术解析 GPT-4o：即时语音交互的突破与 GenAI 发展策略
开源大模型与闭源大模型
微信小程序授权登录获取用户的openid
亿级流量系统架构设计与实战
人工智能时代的程序设计教学与课程设计
纽交所技术问题致伯克希尔 (BRK.A) 显示跌近 100%
周排行
《Python 编程-从入门到实践》11-1~11-3
关于Numpy+TensorFlow+PyTorch构造NN的总结
【原创达人】制作WINPE启动盘心得
英文图片文字识别（提取）
2022cma看片网站给一个你懂的
二叉搜索树的实现（BST）（插入+删除+查找+各种遍历+高度）
搬家通知博文地址(将博客搬到CSDN)
asfd
解决错误：MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk
如何注册微信个人小程序
每日归档
更多
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022