提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
js图形篇--左右晃动
内容介绍js图形篇--左右晃动，B5教程网推荐下载！站长必备的js网页特效及js广告代码，提供高质量js特效下载。
&TITLE&图形篇--左右晃动&/TITLE&
&BODY bgcolor=&#fef4d2& background=&../images/background3.jpg& &
&font color=&ffaafa&&
&h2&&font color=&#FF0000&&图形篇--左右晃动&/font&&/h2&
&hr width=300&
&!-- 案例代码1开始 --&
&script language=&JavaScript&&
Object = new Image();
function LRMovePicture(ObjectID,movingarea_width,c){
window_width = document.body.offsetW
Object = document.images[ObjectID];
image_width = Object.
x1 = Object.style.
x = Number(x1.substring(0,x1.length-2));
if (c == 0) {
if (movingarea_width == 0) {
right_margin = window_width - image_
anim(x,right_margin,1);
right_margin = x + movingarea_width - image_
anim(x,right_margin,1);
if (movingarea_width == 0) right_margin = window_width - image_
x = Math.round((window_width-movingarea_width)/2);
right_margin = Math.round((window_width+movingarea_width)/2)-image_
anim(x,right_margin,1);
function anim(xp,xk,smer) {
Object.style.left =
x += step*
if (x&=(xk+xp)/2) {
if (smer == 1) step--;
else step++;
if (smer == 1) step++;
else step--;
if (x &= xk) {
smer = -1;
if (x &= xp) {
setTimeout('anim('+xp+','+xk+','+smer+')', 100);
setTimeout(&LRMovePicture('Movepicture',300,1)&,100);
&!-- 案例代码1结束 --&
&!-- 案例代码2开始 --&
&!-- [Step1]: 这里可以修改移动图形的名称 --&
&!-- [Step2]: 在此能够更改移动图形的初始位置 --&
&!-- [Step3]: 这里可以改动移动图形的宽度、高度 --&
&!-- [Step4]: 在此能够修改移动图形的边界框 --&
&img name=&Movepicture& src=&/statics/images//bcty365_img/qrcode.png& style='position: top: 130 left: 30' width=150 height=150 border=2 &
&!-- 案例代码2结束 --&
&/center&&/BODY&
本站所有特效都是站长亲自测试后发布的，如果运行代码无效果，请复制到您的本机运行
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
转载请注明（B5教程网）原文链接：：
网友评论：提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
css3 border-radius实现的奥运五环
内容介绍css3 border-radius实现的奥运五环，圆环是有边的厚度的，这里用的是相对单位em。
&!DOCTYPE html&
&meta charset=&UTF-8& /&
&title&css3 border-radius实现的奥运五环&/title&
&style type=&text/css& media=&screen&&
background-color:#
list-style-type:
margin: 20
.flag li, .flag li:before, .flag li:after {
-webkit-border-radius: 6
-moz-border-radius: 6
border-radius: 6
.flag li {
height: 12
font-size: 1
.flag li:after {
content: &&;
left: -0.1
right: -0.1
bottom: -0.1
border: solid 1.4
.flag .blue
{ z-index: 10; left: 0; top: 0; }
.flag .yellow { z-index: 20; left: 6.8
top: 5.7 }
.flag .black
{ z-index: 21; left: 13.6 top: 0; }
.flag .green
{ z-index: 20; left: 20.4 top: 5.7 }
.flag .red
{ z-index: 10; left: 27.2 top: 0 }
.flag .blue:after
{ border-color: }
.flag .yellow:after { border-color: }
.flag .black:after
{ border-color: }
.flag .green:after
{ border-color: }
.flag .red:after
{ border-color: }
/* 蓝色压住黄色 */
.flag .blue.alt { z-index: 24; }
.flag .blue.alt,
.flag .blue.alt:before,
.flag .blue.alt:after {
border-top-color:
border-left-color:
border-bottom-color:
/* 黄色压住黑色 */
.flag .yellow.alt { z-index: 23; }
.flag .yellow.alt,
.flag .yellow.alt:before,
.flag .yellow.alt:after {
border-right-color:
border-left-color:
border-bottom-color:
/* 绿色压住黑色
.flag .green.alt { z-index: 23; }
.flag .green.alt,
.flag .green.alt:before,
.flag .green.alt:after {
border-top-color:
border-right-color:
border-bottom-color:
/* 红色压住绿色
.flag .red.alt { z-index: 23; }
.flag .red.alt,
.flag .red.alt:before,
.flag .red.alt:after {
border-top-color:
border-right-color:
border-left-color:
&ul class=&flag&&
&li class=&blue&&&/li&
&li class=&blue alt&&&/li&
&li class=&yellow&&&/li&
&li class=&yellow alt&&&/li&
&li class=&black&&&/li&
&li class=&green&&&/li&
&li class=&green alt&&&/li&
&li class=&red&&&/li&
&li class=&red alt&&&/li&
本站所有特效都是站长亲自测试后发布的，如果运行代码无效果，请复制到您的本机运行
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
转载请注明（B5教程网）原文链接：：
网友评论：}