请看这个页面http://www.dplot.com/features.htm，点击图片时会跳出大的图片来，做的很是精致。用的是一个叫做Highslide js的javascript。官网http://highslide.com。代码和示例http://d.download.csdn.net/down/1789122/calyn18。
example-slideshow-controlbar.html
<!--
1 ) Reference to the file containing the javascript.
This file must be located on your server.
-->
<script type="text/javascript" src="highslide/highslide.js"></script>
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
// remove the registerOverlay call to disable the controlbar
hs.registerOverlay(
{
thumbnailId: null,
overlayId: 'controlbar',
position: 'top right',
hideOnMouseOut: true
}
);
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
</script>
<!--
3) These CSS-styles are necessary for the script to work. You may also put
them in an external CSS-file. See the webpage for documentation.
-->
<style type="text/css">
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}
.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
/*
padding-left: 22px;
background-image: url(highslide/graphics/loader.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
*/
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
.highslide-move {
cursor: move;
}
.highslide-overlay {
display: none;
}
/* Controlbar example */
.controlbar {
background: url(highslide/graphics/controlbar4.gif);
width: 167px;
height: 34px;
margin-top: -15px;
}
.controlbar a {
display: block;
float: left;
/*margin: 0px 0 0 4px;*/
height: 27px;
}
.controlbar a:hover {
background-image: url(highslide/graphics/controlbar4-hover.gif);
}
.controlbar .previous {
width: 50px;
}
.controlbar .next {
width: 40px;
background-position: -50px 0;
}
.controlbar .highslide-move {
width: 40px;
background-position: -90px 0;
}
.controlbar .close {
width: 36px;
background-position: -130px 0;
}
/* Necessary for functionality */
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>
</head>
<body style="background-color: silver">
<div>
<!--
4) This is how you mark up the thumbnail image with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image.
-->
<a id="thumb1" href="images/full6.jpg" class="highslide" οnclick="return hs.expand(this, { captionId: 'caption1' } )">
<img src="images/thumb6.jpg" alt="Highslide JS"
title="Click to enlarge" height="80" width="120" /></a>
<!--
5 (optional). This is how you mark up the caption. The id contains the words 'caption-for-',
then the id of the img tag above.
-->
<div class='highslide-caption' id='caption1'>
Caption for first image. This caption can be styled using CSS.
</div>
<!-- Repetionion of the above -->
<a id="thumb2" href="images/full6.jpg" class="highslide" οnclick="return hs.expand(this, { captionId: 'caption2' } )">
<img src="images/thumb6.jpg" alt="Highslide JS"
title="Click to enlarge" height="80" width="120" /></a>
<div class='highslide-caption' id='caption2'>
Caption for second image.
</div>
<!--
6 (optional). This is the markup for the controlbar. The conrolbar is tied to the expander
in the script tag at the top of the file.
-->
<div id="controlbar" class="highslide-overlay controlbar">
<a href="#" class="previous" οnclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="#" class="next" οnclick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="#" class="highslide-move" οnclick="return false" title="Click and drag to move"></a>
<a href="#" class="close" οnclick="return hs.close(this)" title="Close"></a>
</div>
</div>
扫一扫
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
