漂亮的图片资讯js展示效果
2011-03-27 20:44
501 查看
http://www.51tmb.com/jscode/14.html点击预览
好了，来看代码吧，把下面代码保存为html格式文档,然后用浏览器打开即可预览效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图形特效|我要淘模板网 --- 漂亮的图片资讯js展示效果</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #111;
width: 100%;
height: 100%;
}
#center {
position: absolute;
left: 50%;
top: 50%;
}
#slider {
position: absolute;
width: 820px;
height: 333px;
left: -430px;
top: -186px;
overflow: hidden;
background: #000;
border: 20px solid #000;
}
#slider .slide {
position: absolute;
top: 0px;
height: 333px;
width: 500px;
background: #000;
overflow: hidden;
border-left: #000 solid 1px;
cursor: default;
}
#slider .title {
color: #F80;
font-weight: bold;
font-size: 1.2em;
margin-right: 1.5em;
text-decoration: none;
}
#slider .backgroundText {
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background: #000;
filter: alpha(opacity=40);
opacity: 0.4;
}
#slider .text {
position: absolute;
top: 1%;
top: 100%;
color: #FFF;
font-family: verdana, arial, Helvetica, sans-serif;
font-size: 0.9em;
text-align: justify;
width: 470px;
left: 10px;
}
#slider .diapo {
position: absolute;
filter: alpha(opacity=100);
opacity: 1;
visibility: hidden;
}
</style>
<script type="text/javascript">
/* ==== slider nameSpace ==== */
var slider = function() {
/* ==== private methods ==== */
function getElementsByClass(object, tag, className) {
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = []; i < n; i++) {
if (o[i].className == className) ret.push(o[i]);
}
if (ret.length == 1) ret = ret[0];
return ret;
}
function setOpacity (obj,o) {
if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
else obj.style.opacity = o / 100;
}
/* ==== Slider Constructor ==== */
function Slider(oCont, speed, iW, iH, oP) {
this.slides = [];
this.over = false;
this.S = this.S0 = speed;
this.iW = iW;
this.iH = iH;
this.oP = oP;
this.oc = document.getElementById(oCont);
this.frm = getElementsByClass(this.oc, 'div', 'slide');
this.NF = this.frm.length;
this.resize();
for (var i = 0; i < this.NF; i++) {
this.slides[i] = new Slide(this, i);
}
this.oc.parent = this;
this.view = this.slides[0];
this.Z = this.mx;
/* ==== on mouse out event ==== */
this.oc.onmouseout = function () {
this.parent.mouseout();
return false;
}
}
Slider.prototype = {
/* ==== animation loop ==== */
run : function () {
this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;
this.view.calc();
var i = this.NF;
while (i--) this.slides[i].move();
},
/* ==== resize ==== */
resize : function () {
this.wh = this.oc.clientWidth;
this.ht = this.oc.clientHeight;
this.wr = this.wh * this.iW;
this.r = this.ht / this.wr;
this.mx = this.wh / this.NF;
this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
},
/* ==== rest ==== */
mouseout : function () {
this.over = false;
setOpacity(this.view.img, this.oP);
}
}
/* ==== Slide Constructor ==== */
Slide = function (parent, N) {
this.parent = parent;
this.N = N;
this.x0 = this.x1 = N * parent.mx;
this.v = 0;
this.loaded = false;
this.cpt = 0;
this.start = new Date();
this.obj = parent.frm
;
this.txt = getElementsByClass(this.obj, 'div', 'text');
this.img = getElementsByClass(this.obj, 'img', 'diapo');
this.bkg = document.createElement('div');
this.bkg.className = 'backgroundText';
this.obj.insertBefore(this.bkg, this.txt);
if (N == 0) this.obj.style.borderLeft = 'none';
this.obj.style.left = Math.floor(this.x0) + 'px';
setOpacity(this.img, parent.oP);
/* ==== mouse events ==== */
this.obj.parent = this;
this.obj.onmouseover = function() {
this.parent.over();
return false;
}
}
Slide.prototype = {
/* ==== target positions ==== */
calc : function() {
var that = this.parent;
// left slides
for (var i = 0; i <= this.N; i++) {
that.slides[i].x1 = i * that.Z;
}
// right slides
for (var i = this.N + 1; i < that.NF; i++) {
that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
}
},
/* ==== HTML animation : move slides ==== */
move : function() {
var that = this.parent;
var s = (this.x1 - this.x0) / that.S;
/* ==== lateral slide ==== */
if (this.N && Math.abs(s) > .5) {
this.obj.style.left = Math.floor(this.x0 += s) + 'px';
}
/* ==== vertical text ==== */
var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;
if (Math.abs(v - this.v) > .5) {
this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
this.v = v;
this.cpt++;
} else {
if (!this.pro) {
/* ==== adjust speed ==== */
this.pro = true;
var tps = new Date() - this.start;
if(this.cpt > 1) {
that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);
}
}
}
if (!this.loaded) {
if (this.img.complete) {
this.img.style.visibility = 'visible';
this.loaded = true;
}
}
},
/* ==== light ==== */
over : function () {
this.parent.resize();
this.parent.over = true;
setOpacity(this.parent.view.img, this.parent.oP);
this.parent.view = this;
this.start = new Date();
this.cpt = 0;
this.pro = false;
this.calc();
setOpacity(this.img, 100);
}
}
/* ==== public method - script initialization ==== */
return {
init : function() {
// create instances of sliders here
// parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity
this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);
setInterval("slider.s1.run();", 16);
}
}
}();
</script>
</head>
<body>
<div id="center">
<div id="slider">
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082001.jpg" alt="">
<div class="text">
<span class="title">The best</span> The offspring of a customized
orbiter, O飇ostem arose as the best balanced home for our plans.
So we submitted to its conditions. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082002.jpg" alt="">
<div class="text">
<span class="title">Prototype</span> O飇ostem's deep impulse flow
is selectively regulated by a molecule originated in the prototype
model, that creates its own variational principles, as oriented
by the first local generation of terminable androids. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082003.jpg" alt="">
<div class="text">
<span class="title">Has been reduced</span> Paired hosts come out
nicely after only two cycles now. Their size has been reduced to
a half the original as planned, and indeed they show an evolutionary
advantage in the process of fixing self-generated instructions.
Plus, they are beautiful. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082004.jpg" alt="">
<div class="text">
<span class="title">By close-alikes</span> Now I have regained hopes
in someday finding myself surrounded by close-alikes to us. However,
they will not be audible, at least not in my life span. We resolved
the low freq vibration a superior solution for our communicational
goals ... </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082005.jpg" alt="">
<div class="text">
<span class="title">To bear</span> We did not expect their surface
to produce such a carbon powder coat, though this is the best model
so far. I shall have to bear with the inconveniences. They seem
to establish a parallel communication through that carbon coat and
I find myself unable to decodify the signal into anything meaningful.
</div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082006.jpg" alt="">
<div class="text">
<span class="title">The zero level</span> Today a set of vibration
came up from the zero level; we expect to launch the transitional
program in no longer than five basetime units. Psykesoma? galore
and we'll betray our very nature into infinite, unending 2D surfaces.
We do need that vibration, and we will conquer its source. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082008.jpg" alt="">
<div class="text">
<span class="title">Beautifully</span> To keep my sanity I wear
the tactile sensors all the time. They translate beautifully; I
can even see distances while still on Psykesoma. This was quite
a discovery. We have grown more adaptable than expected. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082009.jpg" alt="">
<div class="text">
<span class="title">Uneasy to match</span> Yewoona had to travel
farther and longer than I did. Her base orbiter was set to keep
a complex combinational path that made it uneasy to match our circuits.
But her nature showed stronger than programmed. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082010.jpg" alt="">
<div class="text">
<span class="title">Adapted to serve</span> Keep feeding them. We
will never be this lucky again; an autogenerated species adapted
to serve all our needs! </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082011.jpg" alt="">
<div class="text">
<a class="title" href="http://www.dhteumeuleu.com">At soonest</a>
"Blood is dark red, iron dark blue, this tale is blissful and so
are you". I should get to the hotel at soonest. The agency guy must
be there already, with some luck we'll have some nice dinner on
him. How's that? </div>
</div>
</div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
slider.init();
</script>
</body>
</html>
好了，来看代码吧，把下面代码保存为html格式文档,然后用浏览器打开即可预览效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图形特效|我要淘模板网 --- 漂亮的图片资讯js展示效果</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #111;
width: 100%;
height: 100%;
}
#center {
position: absolute;
left: 50%;
top: 50%;
}
#slider {
position: absolute;
width: 820px;
height: 333px;
left: -430px;
top: -186px;
overflow: hidden;
background: #000;
border: 20px solid #000;
}
#slider .slide {
position: absolute;
top: 0px;
height: 333px;
width: 500px;
background: #000;
overflow: hidden;
border-left: #000 solid 1px;
cursor: default;
}
#slider .title {
color: #F80;
font-weight: bold;
font-size: 1.2em;
margin-right: 1.5em;
text-decoration: none;
}
#slider .backgroundText {
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background: #000;
filter: alpha(opacity=40);
opacity: 0.4;
}
#slider .text {
position: absolute;
top: 1%;
top: 100%;
color: #FFF;
font-family: verdana, arial, Helvetica, sans-serif;
font-size: 0.9em;
text-align: justify;
width: 470px;
left: 10px;
}
#slider .diapo {
position: absolute;
filter: alpha(opacity=100);
opacity: 1;
visibility: hidden;
}
</style>
<script type="text/javascript">
/* ==== slider nameSpace ==== */
var slider = function() {
/* ==== private methods ==== */
function getElementsByClass(object, tag, className) {
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = []; i < n; i++) {
if (o[i].className == className) ret.push(o[i]);
}
if (ret.length == 1) ret = ret[0];
return ret;
}
function setOpacity (obj,o) {
if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
else obj.style.opacity = o / 100;
}
/* ==== Slider Constructor ==== */
function Slider(oCont, speed, iW, iH, oP) {
this.slides = [];
this.over = false;
this.S = this.S0 = speed;
this.iW = iW;
this.iH = iH;
this.oP = oP;
this.oc = document.getElementById(oCont);
this.frm = getElementsByClass(this.oc, 'div', 'slide');
this.NF = this.frm.length;
this.resize();
for (var i = 0; i < this.NF; i++) {
this.slides[i] = new Slide(this, i);
}
this.oc.parent = this;
this.view = this.slides[0];
this.Z = this.mx;
/* ==== on mouse out event ==== */
this.oc.onmouseout = function () {
this.parent.mouseout();
return false;
}
}
Slider.prototype = {
/* ==== animation loop ==== */
run : function () {
this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;
this.view.calc();
var i = this.NF;
while (i--) this.slides[i].move();
},
/* ==== resize ==== */
resize : function () {
this.wh = this.oc.clientWidth;
this.ht = this.oc.clientHeight;
this.wr = this.wh * this.iW;
this.r = this.ht / this.wr;
this.mx = this.wh / this.NF;
this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
},
/* ==== rest ==== */
mouseout : function () {
this.over = false;
setOpacity(this.view.img, this.oP);
}
}
/* ==== Slide Constructor ==== */
Slide = function (parent, N) {
this.parent = parent;
this.N = N;
this.x0 = this.x1 = N * parent.mx;
this.v = 0;
this.loaded = false;
this.cpt = 0;
this.start = new Date();
this.obj = parent.frm
;
this.txt = getElementsByClass(this.obj, 'div', 'text');
this.img = getElementsByClass(this.obj, 'img', 'diapo');
this.bkg = document.createElement('div');
this.bkg.className = 'backgroundText';
this.obj.insertBefore(this.bkg, this.txt);
if (N == 0) this.obj.style.borderLeft = 'none';
this.obj.style.left = Math.floor(this.x0) + 'px';
setOpacity(this.img, parent.oP);
/* ==== mouse events ==== */
this.obj.parent = this;
this.obj.onmouseover = function() {
this.parent.over();
return false;
}
}
Slide.prototype = {
/* ==== target positions ==== */
calc : function() {
var that = this.parent;
// left slides
for (var i = 0; i <= this.N; i++) {
that.slides[i].x1 = i * that.Z;
}
// right slides
for (var i = this.N + 1; i < that.NF; i++) {
that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
}
},
/* ==== HTML animation : move slides ==== */
move : function() {
var that = this.parent;
var s = (this.x1 - this.x0) / that.S;
/* ==== lateral slide ==== */
if (this.N && Math.abs(s) > .5) {
this.obj.style.left = Math.floor(this.x0 += s) + 'px';
}
/* ==== vertical text ==== */
var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;
if (Math.abs(v - this.v) > .5) {
this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
this.v = v;
this.cpt++;
} else {
if (!this.pro) {
/* ==== adjust speed ==== */
this.pro = true;
var tps = new Date() - this.start;
if(this.cpt > 1) {
that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);
}
}
}
if (!this.loaded) {
if (this.img.complete) {
this.img.style.visibility = 'visible';
this.loaded = true;
}
}
},
/* ==== light ==== */
over : function () {
this.parent.resize();
this.parent.over = true;
setOpacity(this.parent.view.img, this.parent.oP);
this.parent.view = this;
this.start = new Date();
this.cpt = 0;
this.pro = false;
this.calc();
setOpacity(this.img, 100);
}
}
/* ==== public method - script initialization ==== */
return {
init : function() {
// create instances of sliders here
// parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity
this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);
setInterval("slider.s1.run();", 16);
}
}
}();
</script>
</head>
<body>
<div id="center">
<div id="slider">
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082001.jpg" alt="">
<div class="text">
<span class="title">The best</span> The offspring of a customized
orbiter, O飇ostem arose as the best balanced home for our plans.
So we submitted to its conditions. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082002.jpg" alt="">
<div class="text">
<span class="title">Prototype</span> O飇ostem's deep impulse flow
is selectively regulated by a molecule originated in the prototype
model, that creates its own variational principles, as oriented
by the first local generation of terminable androids. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082003.jpg" alt="">
<div class="text">
<span class="title">Has been reduced</span> Paired hosts come out
nicely after only two cycles now. Their size has been reduced to
a half the original as planned, and indeed they show an evolutionary
advantage in the process of fixing self-generated instructions.
Plus, they are beautiful. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082004.jpg" alt="">
<div class="text">
<span class="title">By close-alikes</span> Now I have regained hopes
in someday finding myself surrounded by close-alikes to us. However,
they will not be audible, at least not in my life span. We resolved
the low freq vibration a superior solution for our communicational
goals ... </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082005.jpg" alt="">
<div class="text">
<span class="title">To bear</span> We did not expect their surface
to produce such a carbon powder coat, though this is the best model
so far. I shall have to bear with the inconveniences. They seem
to establish a parallel communication through that carbon coat and
I find myself unable to decodify the signal into anything meaningful.
</div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082006.jpg" alt="">
<div class="text">
<span class="title">The zero level</span> Today a set of vibration
came up from the zero level; we expect to launch the transitional
program in no longer than five basetime units. Psykesoma? galore
and we'll betray our very nature into infinite, unending 2D surfaces.
We do need that vibration, and we will conquer its source. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082008.jpg" alt="">
<div class="text">
<span class="title">Beautifully</span> To keep my sanity I wear
the tactile sensors all the time. They translate beautifully; I
can even see distances while still on Psykesoma. This was quite
a discovery. We have grown more adaptable than expected. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082009.jpg" alt="">
<div class="text">
<span class="title">Uneasy to match</span> Yewoona had to travel
farther and longer than I did. Her base orbiter was set to keep
a complex combinational path that made it uneasy to match our circuits.
But her nature showed stronger than programmed. </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082010.jpg" alt="">
<div class="text">
<span class="title">Adapted to serve</span> Keep feeding them. We
will never be this lucky again; an autogenerated species adapted
to serve all our needs! </div>
</div>
<div class="slide">
<img class="diapo" src="http://www.51tmb.com/images/jscode_test_images/jscode_201082011.jpg" alt="">
<div class="text">
<a class="title" href="http://www.dhteumeuleu.com">At soonest</a>
"Blood is dark red, iron dark blue, this tale is blissful and so
are you". I should get to the hotel at soonest. The agency guy must
be there already, with some luck we'll have some nice dinner on
him. How's that? </div>
</div>
</div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
slider.init();
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js实现的图片滚动兼展示效果的特效
- Javascript+CSS实现漂亮带缓冲效果的图片展示代码
- js实现3D图片展示效果
- 使用JS实现图片展示瀑布流效果
- 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)
- js实现图片放大展示效果
- 可自动播放、拖动的js图片展示效果（一）
- 一款常用的漂亮的JS图片滑动切换效果
- js实现图片滑动及放大镜效果（仿淘宝京东图片展示）
- 使用JS实现图片展示瀑布流效果(简单实例)
- CSS+JS控制图片展示效果
- JS实现有点炫的图片展示效果-图片解体和组合
- 手把手教小白如何用css+js实现页面中图片放大展示效果
- 用JS+CSS实现多种图片漂亮效果的代码
- JS感应鼠标的图片上下滑动展示效果
- js放大镜效果。类似于淘宝产品内页多图展示代码，鼠标移到图片上有放大效果，方便查看产品细节，此代码适合网店产品展示，
- 特漂亮的JS图片排列旋转效果代码
- JS特效代码大全（九）超炫的js图片展示效果（一）
- js实现3D图片环展示效果
- 做出的一个图片的自动展示效果(JS版本)