本文目录一览：
- 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可视化地球，而且文档非常详细，更多实用和有趣的地方等待你的 探索 ！
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/157486.html
微信扫一扫 
支付宝扫一扫 