仿淘寶商城伸縮js廣告代碼的簡單介紹

本文目錄一覽：

• 1、怎麼製作網頁中圖片轉換，就是一幅一幅的顯示，跟淘寶網的商品展示一樣，用到JS代碼，代碼怎麼編寫？
• 2、求一份類似於淘寶首頁的右上角JS的撕角廣告代碼~~要求：可縮小不可關閉，一定要JS的
• 3、js 代碼，隨頁面滾動而滾動的浮動廣告效果（帶關閉按鈕）

怎麼製作網頁中圖片轉換，就是一幅一幅的顯示，跟淘寶網的商品展示一樣，用到JS代碼，代碼怎麼編寫？

你可以存有 X 張圖片，名字差不多，（類似於imp1.jpg,imp2.jpg……impX.jpg）

然後通過定時器 定時改變imp標籤里的src屬性：js如下

var i =1;

funcition setSrc(){

if(i = X){ // 這裡X是你 圖片的數量

i =1 ;

}

var srcStr = “imp” + i +”jpg”; // 嗯，這裡 i 不知道有沒有問題，希望沒有，

// 有的話，我想樓主也能輕易解決的

document.getElementById(“impId”).src=srcStr; (impId 為imp標籤的id屬性)

i++;

}

定時器 以下任選一種即可：

setInterval(“setSrc()”,3000);

setTimeout(“setSrc()”,3000); //需要函數觸發

//如 放置在 body 的 onload事件裡面

希望對你有幫助

求一份類似於淘寶首頁的右上角JS的撕角廣告代碼~~要求：可縮小不可關閉，一定要JS的

!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

html xmlns=””

head

title不會被屏蔽的網頁右下角漂浮窗口代碼/title

FCK:meta http-equiv=”content-type” content=”text/html;charset=gb2312″ /

style type=”text/css”

#msg_win

#msg_win .icos

.icos a

.icos a:hover

#msg_title

#msg_content

/style

/head

body

p style=”height:1000px;”/p

div id=”msg_win” style=”display:block;top:490px;visibility:visible;opacity:1;”

div class=”icos”a id=”msg_min” title=”最小化” href=”javascript:void 0″ _fcksavedurl=”javascript:void 0″_/aa id=”msg_close” title=”關閉” href=”javascript:void 0″ _fcksavedurl=”javascript:void 0″×/a/div

div id=”msg_title”標題/div

div id=”msg_content”

img src=”” width=”300″ height=”300″ border=”0″/

/div

/div

script language=”javascript”

var Message={

set: function() {//最小化與恢復狀態切換

var set=this.minbtn.status == 1?[0,1,’block’,this.char[0],’最小化’]:[1,0,’none’,this.char[1],’恢復’];

this.minbtn.status=set[0];

this.win.style.borderBottomWidth=set[1];

this.content.style.display =set[2];

this.minbtn.innerHTML =set[3]

this.minbtn.title = set[4];

this.win.style.top = this.getY().top;

},

close: function() {//關閉

this.win.style.display = ‘none’;

window.onscroll = null;

},

setOpacity: function(x) {//設置透明度

var v = x = 100 ? ”: ‘Alpha(opacity=’ + x + ‘)’;

this.win.style.visibility = x=0?’hidden’:’visible’;//IE有絕對或相對定位內容不隨父透明度變化的bug

this.win.style.filter = v;

this.win.style.opacity = x / 100;

},

show: function() {//漸顯

clearInterval(this.timer2);

var me = this,fx = this.fx(0, 100, 0.1),t = 0;

this.timer2 = setInterval(function() {

t = fx();

me.setOpacity(t[0]);

if (t[1] == 0)

},10);

},

fx: function(a, b, c) {//緩衝計算

var cMath = Math[(a – b) 0 ? “floor”: “ceil”],c = c || 0.1;

return function()

},

getY: function() {//計算移動坐標

var d = document,b = document.body, e = document.documentElement;

var s = Math.max(b.scrollTop, e.scrollTop);

var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;

var h2 = this.win.offsetHeight;

return

},

moveTo: function(y) {//移動動畫

clearInterval(this.timer);

var me = this,a = parseInt(this.win.style.top)||0;

var fx = this.fx(a, parseInt(y));

var t = 0 ;

this.timer = setInterval(function() {

t = fx();

me.win.style.top = t[0]+’px’;

if (t[1] == 0) {

clearInterval(me.timer);

me.bind();

}

},10);

},

bind:function (){//綁定窗口滾動條與大小變化事件

var me=this,st,rt;

window.onscroll = function() {

clearTimeout(st);

clearTimeout(me.timer2);

me.setOpacity(0);

st = setTimeout(function() {

me.win.style.top = me.getY().top;

me.show();

},600);

};

window.onresize = function (){

clearTimeout(rt);

rt = setTimeout(function() ,100);

}

},

init: function() {//創建HTML

function $(id) ;

this.win=$(‘msg_win’);

var set=;

for (var Id in set) ;

var me = this;

this.minbtn.onclick = function() ;

this.closebtn.onclick = function() ;

this.char=navigator.userAgent.toLowerCase().indexOf(‘firefox’)+1?[‘_’,’::’,’×’]:[‘0′,’2′,’r’];//FF不支持webdings字體

this.minbtn.innerHTML=this.char[0];

this.closebtn.innerHTML=this.char[2];

setTimeout(function() {//初始化最先位置

me.win.style.display = ‘block’;

me.win.style.top = me.getY().foot;

me.moveTo(me.getY().top);

},0);

return this;

}

};

Message.init();

/script

/body

/html

js 代碼，隨頁面滾動而滾動的浮動廣告效果（帶關閉按鈕）

隨滾動而滾動，css就可以實現，也就是固定在屏幕固定位置，用 position:fixed;即可，關閉按鈕可以用document.getElementById(”).style.display=’none’;即可，如

div style=”width:500px; height:200px; background-color:#F00;position:fixed;left:100px;top:200px;” id=”test”

button onclick=”document.getElementById(‘test’).style.display=’none’;”關閉/button

/div

其中left和top都是相對於屏幕的位置