网页图片滚动新闻代码
自动切换的图片幻灯切换效果(图片滚动新闻)
可自己修改滚动图片和增加滚动图片数量,以及修改滚动图片大小等!
1.效果预览:
2.代码部分:(将一下代码复制粘贴到记事本中,把后缀改成.html)
/*******************************
* @基于jQuery 1.4的渐入渐出切换幻灯插件
* @Plugin Page:https://www.360docs.net/doc/5113430643.html,/jq-plugin-ifadeslide/
* @Author Mr.Think
* @Author blog https://www.360docs.net/doc/5113430643.html,/
* @Creation date: 2010.08.20
*******************************/
/*reset css*/
body{font-size:0.8em;letter-spacing:1px;font-family:"MS Sans
Serif",Geneva,sans-serif;line-height:1.8em;}
div,h2,p,ul,li{margin:0;padding:0;}
h1{font-size:1em;font-weight:normal;}
h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none;}
h1 a:hover{background:#a40000;color:#fff;text-decoration:underline;}
h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative;}
h5
a{background:#000;color:#fff;text-decoration:none;font-size:12px;font-weight:normal;letter-spaci ng:3px;position:absolute;right:7px;top:7px;padding:1px 12px;}
.box{width:700px;height:250px;}
/*demo css*/
/*SAMPLE-A*/
#slide{position:relative;width:200px;height:250px;overflow:hidden;border:1px solid #ccc;float:left;}
#slide img{width:200px;height:250px;}
#slide .ico{position:absolute;right:8px;bottom:6px;}
#slide .ico li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid
#cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:po inter;}
#slide .ico li.high{background:#047;color:#fff;font-weight:bolder;}
/*SAMPLE-B*/
#slide_b{position:relative;width:460px;height:250px;overflow:hidden;border:1px solid #ccc;float:right ;}
#slide_b img{width:500px;height:250px;}
#slide_b .ico_b{position:absolute;right:8px;bottom:6px;}
#slide_b .ico_b li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid
#cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:po inter;}
#slide_b .ico_b li.high_b{background:#a40000;color:#fff;font-weight:bolder;}
/*SAMPLE-C*/
#slide_c{position:relative;width:700px;height:250px;overflow:hidden;border:1px solid #ccc;margin-top:20px;}
#slide_c img{width:700px;height:250px;}
#slide_c .ico_c{position:absolute;right:8px;bottom:6px;}
#slide_c .ico_c li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid
#cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:po inter;}
#slide_c .ico_c li.high{background:#000;color:#fff;font-weight:bolder;}
/*******************************
* @基于jQuery淡入淡出可自动切换的幻灯插件
* @jQuery V esion:1.4.2
* @Plugin Page:https://www.360docs.net/doc/5113430643.html,/jq-plugin-ifadeslide/
* @Author Mr.Think
* @Author blog https://www.360docs.net/doc/5113430643.html,/
* @Creation date: 2010.08.20
*******************************/
//调用插件并传入插件参数
//此处传入的参数将覆盖jquery.iFadeSlide.js的参数,为空即使用插件文件中默认参数$(function(){
//SAMPLE-A调用---未传入任何参数,调用默认参数
$('div#slide').iFadeSlide();
//SAMPLE-B调用---传入新的参数,将覆盖原有参数,未传入的使用默认值
$('div#slide_b').iFadeSlide({
field: $('div#slide_b a'),
icocon:$('div.ico_b'),
hoverCls: 'high_b',
curIndex: 2, //索引值0起始,故此处设置为第3项高亮
interval: 2000
});
//SAMPLE-C调用---传入新的参数,将覆盖原有参数,未传入的使用默认值
$('div#slide_c').iFadeSlide({
field: $('div#slide_c img'),
icocon: $('div.ico_c'),
outTime:100,
inTime: 200
});
});
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。
网页特效CSS大全
HTML网页特效CSS大全 css属性代码大全 一CSS文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白 三、CSS符号属性: list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/
平面网页滚动图片代码
dreamweaver图片展示特效代码
js脚本结束 4。简单的页面加密
网页图片滚动新闻代码
自动切换的图片幻灯切换效果(图片滚动新闻) 可自己修改滚动图片和增加滚动图片数量,以及修改滚动图片大小等! 1.效果预览: 2.代码部分:(将一下代码复制粘贴到记事本中,把后缀改成.html)