jQuery之圖片顯示篇A
阿新 • • 發佈:2019-01-13
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"><</span>
<span class="pre_nex next">></span>
</div>
</div>
</div>
</body>
</html>
展示效果: