js炫酷代碼（html炫酷代碼）

本文目錄一覽：

• 1、js css橫向滾動條是如何實現的？
• 2、js實現滑鼠滑入滑出效果，怎麼做？不用id
• 3、QQ空間皮膚、背景…炫酷黑色帶字的代碼！
• 4、p5.js和html5 canvas兩者有何區別？
• 5、如何用JS來改變CSS屬性？
• 6、4行代碼就可以完成一個Web版的3D地球可視化展示——Gio.js

js css橫向滾動條是如何實現的？

可以使用DIV+CSS+JS實現不間斷橫向滾動代碼，具體代碼如下：

!DOCTYPE html 

html 

head 

meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ / 

title橫向不間斷滾動DIV CSS代碼-DIVCSS5/title 

/head 

body 

style 

.scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} 

.scroll_div img {width:120px;height:49px;border: 0;margin: auto 8px; } 

#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/* 設置ul和li橫排 */ 

/style 

script language=”javascript” 

function ScrollImgLeft(){ 

var speed=20 

var scroll_begin = document.getElementById(“scroll_begin”); 

var scroll_end = document.getElementById(“scroll_end”); 

var scroll_div = document.getElementById(“scroll_div”); 

scroll_end.innerHTML=scroll_begin.innerHTML 

function Marquee(){ 

if(scroll_end.offsetWidth-scroll_div.scrollLeft=0) 

scroll_div.scrollLeft-=scroll_begin.offsetWidth 

else 

scroll_div.scrollLeft++ 

} 

var MyMar=setInterval(Marquee,speed) 

scroll_div.onmouseover=function() {clearInterval(MyMar)} 

scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 

} 

/script 

h2 align=”center”a href=””DIVCSS5/a演示說明：向左滾動/h2 

div style=”text-align:center” 

div class=”sqBorder” 

!–#####滾動區域#####– 

div id=”scroll_div” class=”scroll_div” 

div id=”scroll_begin” 

ul 

lia href=””img src=”” //a/li 

lia href=””img src=”” //a/li 

lia href=””img src=”” alt=”div css” //a/li 

lia href=””img src=”” //a/li 

lia href=””img src=”” alt=”divcss” //a/li 

lia href=””img src=”” //a/li 

lia href=””img src=”” //a/li 

lia href=””img src=”” //a/li 

lia href=””img src=”” //a/li 

lia href=””img src=”” //a/li 

lia href=””img src=”” //a/li 

lia href=””img src=”” alt=”CSS” //a/li 

lia href=””img src=”” //a/li 

lia href=””img src=”” //a/li 

lia href=””img src=”” alt=”divcss5″ //a/li 

lia href=””img src=”” //a/li 

/ul 

/div 

div id=”scroll_end”/div 

/div 

!–#####滾動區域#####– 

/div 

script type=”text/javascript”ScrollImgLeft();/script 

/div 

!–//向左滾動代碼結束– 

/body/html

js實現滑鼠滑入滑出效果，怎麼做？不用id

clientHeight

然後遞歸，直到這個高度為0，或者直到這個高度為一個指定的高度

function showBox()

{

if (sb != null){

clearTimeout(sb);

}

if (cb != null) {

clearTimeout(cb);

}

var o = $(‘rbbox’);

o.style.display = ‘block’;

var H = parseInt(o.style.height)

o.style.height = (o.clientHeight + Math.ceil((55 – o.clientHeight) * 0.035)) + “px”;

if (o.clientHeight 55) {

sb = setTimeout(function(){showBox()}, 2);

}

else {

cb = setTimeout(function(){closeBox()}, 3800);

return;

}

}

function closeBox(msg)

{

if (cb != null) {

clearTimeout(cb);

}

var o = $(‘rbbox’);

var dy = Math.ceil((parseInt(o.style.height) – 4) * 0.875).toString();

o.style.height = dy + “px”;

if(o.clientHeight = 5){

document.getElementById(“rbbox”).style.display = ‘none’;

return;

}

cb = setTimeout(function(){closeBox()}, 3);

}

div#rbbox {

position: fixed;

right: 2px;

bottom: 2px;

height: 0px;

width: auto;

overflow: hidden;

border:1px #ff0000 solid;

background-color: #FFCC00;

text-align:justify;

}

QQ空間皮膚、背景…炫酷黑色帶字的代碼！

可用的全部QQ空間5.0免費皮膚代碼大全：

黑色皮膚代碼：javascript:window.top.space_addItem(1,26498,80,0,0,0,30);

感同身受： javascript:window.top.space_addItem(1,26497,80,80,0,0,30);

抗震救災：javascript:window.top.space_addItem(1,26341,0,0,0,0,30);

靜悄悄：javascript:window.top.space_addItem(1,8669,50,80,0,0,30);

如此的愛：javascript:window.top.space_addItem(1,4693,0,80,0,0,94);

清秀水滴綠：javascript:window.top.space_addItem(1,10426,100,0,0,0,25);

黑色皮膚代碼：javascript:window.top.space_addItem(1,26498,80,0,0,0,93);

抗震救災：javascript:window.top.space_addItem(1,26341,0,0,0,0,93);

感同身受：javascript:window.top.space_addItem(1,26497,80,80,0,0,93);

靜悄悄：javascript:window.top.space_addItem(1,8669,50,80,0,0,93);

靜悄悄（改版,沒有花,黑紫豎條）：javascript:window.top.space_addItem(1,8669,80,80,100,100,93);

靜悄悄（改版小窩）：javascript:window.top.space_addItem(1,8669,80,80,100,100,20);

右移全灰小窩：javascript:window.top.space_addItem(1,10426,200,80,0,0,20);

小窩式夕陽紅色皮膚代碼，可愛女生：javascript:window.top.space_addItem(1,6572,0,0,0,0,0);

小窩式天藍色皮膚代碼，可愛女生：javascript:window.top.space_addItem(1,6573,0,0,0,0,0);

小窩式灰色皮膚代碼，可愛女生：javascript:window.top.space_addItem(1,6574,0,0,0,0,0);

小窩式黑色皮膚代碼，可愛女生：javascript:window.top.space_addItem(1,6575,0,0,0,0,0);

小窩式灰黑色皮膚代碼，可愛女生：javascript:window.top.space_addItem(1,6576,0,0,0,0,0);

接近純白皮膚：javascript:window.top.space_addItem(1,13047,100,0,0,0,20);

純白皮膚：javascript:window.top.space_addItem(1,26498,80,0,0,0,93); 新

5.0全屏完全全黑皮膚（需購買）javascript:window.top.space_addItem(1,18926,0,80,0,0,93);

5.0全屏完全全白皮膚（需購買）javascript:window.top.space_addItem(1,15114,0,80,0,0,93);

守護： javascript:window.top.space_addItem(19,39035,0,0,0,0,2);

花花： javascript:window.top.space_addItem(19,39784,0,0,0,0,2);

綠花藤： javascript:window.top.space_addItem(19,41899,0,0,0,0,2);

QQ空間3.0小窩免費皮膚代碼如下：

小窩式夕陽紅色皮膚代碼，可愛女生

javascript:window.top.space_addItem(1,6572,0,0,0,0,0);

小窩式天藍色皮膚代碼，可愛女生

javascript:window.top.space_addItem(1,6573,0,0,0,0,0);

小窩式灰色皮膚代碼，可愛女生

javascript:window.top.space_addItem(1,6574,0,0,0,0,0);

小窩式黑色皮膚代碼，可愛女生

javascript:window.top.space_addItem(1,6575,0,0,0,0,0);

小窩式灰黑色皮膚代碼，可愛女生

javascript:window.top.space_addItem(1,6576,0,0,0,0,0);

粉色皮膚代碼，小窩模式皮膚

javascript:window.top.space_addItem(1,4693,0,80,0,0,20);

右移全灰小窩

javascript:window.top.space_addItem(1,10426,200,80,0,0,20);

QQ空間小窩皮膚代碼共2款黑色皮膚

第一款： javascript:window.top.space_addItem(1,6576,0,0,0,0,0);

第二款： javascript:window.top.space_addItem(1,6575,0,0,0,0,0);

商場免費皮膚名字：

進入QQ空間，點擊裝扮空間，搜索關鍵字：

第一款：靜悄悄

第二款：感同身受

第三款：抗震救災

可用的免費QQ空間黑色皮膚代碼：

6月10日：最新的免費黑色皮膚代碼：星光點點，接近純黑的一款，代碼如下：

javascript:window.top.space_addItem(1,26498,80,80,0,0,93);

5月21日：免費黑色皮膚代碼，超個性，接近全黑，代碼如下：

javascript:window.top.space_addItem(1,26497,80,80,0,0,93);

5月15日：QQ空間半黑色效果，代碼如下：

javascript:window.top.space_addItem(1,26341,80,80,0,0,605);

紫色和黑色交替效果，代碼如下：

javascript:window.top.space_addItem(1,6553,0,80,0,0,90);

小窩免費黑色皮膚代碼，黑色背景女生，代碼如下：

javascript:window.top.space_addItem(1,6575,0,0,0,0,0);

黃鑽黑色皮膚代碼，全黑，非黃鑽需支付5.9Q幣/半年，代碼如下：

javascript:window.top.space_addItem(1,16557,100,0,0,100,93);

溫馨提示：黃鑽LV3以上可以直接上傳純黑圖片，設置QQ空間純黑皮膚。

5.0空間黑色皮膚代碼（非免費）：javascript:window.top.space_addItem(1,13046,0,80,0,0,30);

p5.js和html5 canvas兩者有何區別？

簡單的說，p5.js是一個js類庫；canvas是一個html5新增的一個元素，”canvas” 即 “畫布”,  此元素是為了客戶端矢量圖形而設計的。它自己沒有行為，卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。兩者要想繪圖，都需執行js代碼。仔細看p5的初始代碼，

function setup() {

  createCanvas(400, 400);//為html頁面創建canvas元素

}

兩者的本質都是通過js來實現canvas的表現，p5.js與jquery庫無異，將一些常用的功能需求的代碼進行封裝，以實現代碼的簡化。也就是任何p5.js可實現的，通過純canvas的js api都能實現，不過要想實現，往往犧牲得是時間與效率。而p5.js提供了一種僅需少量代碼就能實現很炫酷的操作的方法。兩者渲染速度比較，理論上應該是一樣的，畢竟大家殊途同歸嘛，都是通過js來實現的，只要純js寫的足夠優化，是會比p5.js快一丟丟的，差異不明顯。明顯的差異是p5.js在網頁載入時需要下載p5.js的類庫才能進行操作，而canvas api由於是客戶端提供的原因，則不需要。

如何用JS來改變CSS屬性？

通過js來改變CSS屬性，使用jQuery可以很方便的實現，像這樣：

$(“img”).css(‘border-color’,’red’);

就可以把邊框顏色都變成紅色。

這是針對此問題的測試頁面

2、這是3張圖片

img src=’;fm=11gp=0.jpg’

img src=’;fm=11gp=0.jpg’

img src=’;fm=11gp=0.jpg’

3、這是圖片的樣式，邊框默認為灰色。

img{

max-width:200px;

border-color:gray;

border-width:10px;

border-style:solid;

}

4、現在通過這幾行用到jQuery的代碼，控制圖片邊框根據滑鼠移入移出邊框變灰和變紅。

$(function(){

$(“img”).on(‘mouseover’,function(){

$(this).css(‘border-color’,’red’);

}).on(‘mouseout’,function(){

$(this).css(‘border-color’,’gray’);

});

});

5、效果如圖

4行代碼就可以完成一個Web版的3D地球可視化展示——Gio.js

Gio.js 是一個基於Three.js的web 3D地球數據可視化的開源組件庫。使用Gio.js的網頁應用開發者，可以快速地以申明的方式創建自定義的Web3D數據可視化模型，添加數據，並且將其作為一個組件整合到自己的應用中。

Gio.js 是一個基於Three.js的web 3D地球數據可視化的開源組件庫。使用Gio.js的網頁應用開發者，可以快速地以申明的方式創建自定義的Web3D數據可視化模型，添加數據，並且將其作為一個組件整合到自己的應用中。

這個庫的開發是受到Google 2012 Info大會上的某項目可視化的啟發，該項目開發者是Google員工Michael Chang。使用Gio.js就可以快速構建這種炫酷的3D模型，並以此為基礎進行深入地開發。

在HTML的head中引入Three.js和Gio.js依賴， 以下展示了如何使用script標籤引入依賴:

在引入Three.js和Gio.js在頁面之後，已經可以創建3D Gio地球了。在此我們將先展示如何創建基礎樣式的Gio地球。

創建一個p，Gio地球將會被渲染在這個區域中：

添加一下4行Javascript代碼在你的HTML中， 用以創建並渲染：

在Gio.js 1.0發布之後，開發者們提出了很多很酷的、很有建設性的建議，比如微信應用開發者希望Gio.js支持微信小程序，有經驗的Three.js開發者希望Gio.js提供Three.js編程介面等。在經過仔細研究、綜合設計之後，Gio.js 2.0實現了大部分功能，並且添加了有關文檔說明。以下列出了主要的2.0新增特性：

Gio.js僅依賴於Three.js。

經過測試，Gio.js在Three.js R90版本下可以很好地運行和使用。

Gio.js可以運行在以下的瀏覽器環境中:

更多詳細的介紹就不在本文中介紹了，官方文檔非常詳細，感興趣的小夥伴可以直接移步文檔：

Gio.js可以說是Three.js中實踐的非常不錯的了，官方還提供了非常多的實例，通過一些簡單的API配置即可實現非常炫酷的Web3D可視化地球，而且文檔非常詳細，更多實用和有趣的地方等待你的 探索 ！