Zi 字媒體

在一些大陸網頁常會看到有些廣告視窗是隨著你的捲軸移動 這種功能可以用jQuery實作出來，參考了網路上大大的做法，重新再實作一次讓整個畫面流暢一點 CSS： #bg { height:3000px; } #advertisement { display:none; position:absolute;} #advertisement img {border:none;} #close_ad{display:block;} HTML： 關閉廣告 javascript： (document).ready(function(){ var window = (window), //視窗物件 ad = ('#advertisement').css('opacity',0).show(), //讓物件透明，並顯示出來，目地是一開始移動到定位時使用者看不到 width = ad.width(), //取得advertisement寬度 height = ad.height(), //取得advertisement長度 diffX = 10, //廣告與右方邊距 diffY = 10, //廣告與下方邊距 speed = 800; //移動速度，花多少ms完成移動，越小越快 //先將廣告移到定點 ad.css({ top : (document).height() , //移到最下面 left : window.width() - width - diffX , //移到右邊定點 opacity : 1 //解除透明 }); //加上scroll和resize事件 window.on("scroll resize", function(){ //控制廣告移動 ad.stop().animate({ top: (this).scrollTop() + (this).height() - height - diffY, left: (this).scrollLeft() + (this).width() - width - diffX },speed); }).scroll();//啟動scroll //關閉廣告 ('#close_ad').click(function(){ ('#advertisement').hide(); }); }); Categories: jQuery 分類 Android AngularJS Chrome Database MySQL DataStructure Editor Vim Firefox Git Hadoop Language Go Java JavaScript jQuery jQueryChart Node.js Vue PHP Laravel ZendFramework Python Mac Network Cisco DLink Juniper Oauth Server Apache Share Unix FreeBSD Linux WebDesign Bootstrap CSS HTML Wordpress Search 搜尋：