cari

Rumah >hujung hadapan web >tutorial js >jquery menyedari kod pengiklanan untuk meluncurkan imej besar untuk mengecil menjadi imej sepanduk kecil pada selang masa yang tetap_jquery

jquery menyedari kod pengiklanan untuk meluncurkan imej besar untuk mengecil menjadi imej sepanduk kecil pada selang masa yang tetap_jquery

WBOY
WBOYasal
2016-05-16 15:40:581201semak imbas

Contoh dalam artikel ini menerangkan kod pengiklanan jquery yang melaksanakan skrin gelongsor imej besar untuk mengecil menjadi imej sepanduk kecil pada selang masa yang tetap. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini adalah kesan khas pengiklanan JS berdasarkan jQuery Iklan skrin gelongsor yang besar kerap dikecilkan menjadi kod pengiklanan imej sepanduk kecil Iklan ini masih boleh dilihat pada laman web portal utama buka halaman web. Pergi ke iklan bergambar besar yang meluncur ke bawah Selepas beberapa ketika, iklan secara automatik mengecut dan menjadi iklan sepanduk dengan butang tutup untuk iklan, kod ini agak praktikal.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-scroll-big-pic-cha-style-codes/

Kod khusus adalah seperti berikut: 

<!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>
<title>jQuery顶部大图定时缩为小广告可关闭代码</title>
<style>
body{ margin:0; padding:0;}
img{ border:0}
.root1200{ width:1200px; height:100px; margin:0 auto; overflow:visible}
.wrapper em{ width:40px; height:15px; float:left; color:#FFF; font-size:12px; font-family:Verdana, Geneva, sans-serif;background:#333; margin:0 0 -20px 10px; padding:2px 5px 2px 10px; z-index:999; position:absolute; top:10px;}
</style>
<script language="javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
/*
* 宽窄屏切换
* */
var bigscreen = false;
if ( screen.width>=1200 ) {
bigscreen = true;
var bodyTag = document.getElementsByTagName("body")[0],
bodyClassName = bodyTag.getAttribute("className") || bodyTag.getAttribute("class");
bodyClassName = bodyClassName &#63; bodyClassName+" " : "";
bodyTag.className = bodyClassName+"root1200";
}
</script>
<div class="wrapper" id="snActive-wrap"> 
<em title="关闭广告">Close</em>
<a target="_blank" name="redbaby_none_ggw_dt01" title="小图" href="/"></a>
<a target="_blank" name="redbaby_none_ggw_dt01" title="大图"  href="/"></a>
</div>
<script type="text/javascript">
~function (){
var snActive = window.snActive = document.getElementById("snActive-wrap"),
a = snActive.getElementsByTagName("a"),
h = 0, w, imgSrc = [];
if (bigscreen){
w = 1190;
imgSrc[0] = "images/1390124030537_1200.jpg";// 40
imgSrc[1] = "images/1390124049068_1200.jpg";// 500
} else {
w = 990;
imgSrc[0] = "images/1390124028186.jpg";// 40
imgSrc[1] = "images/1390124043025.jpg";// 500
}
snActive.style.overflow = 'hidden';
a[0].style.display = "none";
a[0].innerHTML += '<img width="' + w + '" height="40" src="' + imgSrc[0] + '" style="display:block" />';
if(a[1]){
a[1].innerHTML += '<img width="' + w + '" height="500" src="' + imgSrc[1] + '" style="display:block" />';
}
}();
//关闭通栏广告
var snActive = $(snActive),
hideImg = snActive.find('a:hidden'),
em = snActive.find("em");
timeout = !1;
if(hideImg[0]) {
timeout = setTimeout(function(){
snActive.animate({height:40},600,function(){
hideImg.siblings('a:visible').hide();
hideImg.show();
em.show().live("click",function(){
snActive.slideUp(300);
});
});
}, 3000)
}
</script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jquery melaksanakan code_jquery pengiklanan boleh lipat cantikArtikel seterusnya：jquery melaksanakan code_jquery pengiklanan boleh lipat cantik

Artikel berkaitan

Lihat lagi