兼容浏览器好的JS焦点图效果，适合各种图片切换效果
这个JS开发的焦点图效果，通过样式的调整，可以变成各种效果，而且而且兼容IE6，IE7，IE8，IE9，火狐浏览器等主流浏览器效果图：更多预览效果
http://dl.iteye.com/upload/attachment/0072/8763/dbd1aca4-7635-39cc-a440-3627c2d037b1.jpg
http://dl.iteye.com/upload/attachment/0072/8792/7bd74323-987e-3d1a-bb6b-8904162b1a0f.jpg
样式：
<style type=”text/css”>
.banner{ border:1px solid #e5e5e5; margin-bottom:10px; padding:0;width:490px;height:250px;_height:258px;}
img{border:0}
.dis {
DISPLAY: block
}
.undis {
DISPLAY: none
}
#Focus {
WIDTH: 490px; HEIGHT: 250px; _HEIGHT: 258px;
}
#FocusPic {
WIDTH: 490; HEIGHT: 250px;_HEIGHT: 258px; position: absolute;z-index:10;
}
#Fpic {z-index:40;CLEAR: both; FILTER: progid:DXImageTransform.Microsoft.GradientWipe(duration=2,gradientSize=1,wipestyle=1,motion=forward); }
#Ftxt {
WIDTH: 489px; height:25px;position: absolute;float:left; background-color:#000; filter:
alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
left: 1px;
top: 228px;_top: 237px;
z-index:20;
}
#Ftxt UL {
CLEAR: both;WIDTH: 350px; text-aglin:center;height:25px;list-style-type:none;margin:0;
}
#Ftxt UL h2{
font-size: 12px; font-weight:normal; color: #fff; line-height: 25px; text-align: center; height: 25px;width:335px; margin:0;
}
#Ftxt UL A {
COLOR: #fff
}
#Ftxt UL h2 a{color:#fff;height:25px;text-decoration:none;}
#Ftxt UL a:hover{color:#fff;text-decoration:underline;}
#Ftxt .mya{
font-size:12px; text-indent:25px; margin-left:10px !important; margin-left:5px; line-height:16px; overflow:hidden;
}
#Fpic .ft {
WIDTH: 110px;
position: absolute;
right: 0px;
top: 226px;_top: 234px;
z-index:30;
}
#Fpic .ft .newmore {
FLOAT: left; WIDTH: 100px; height:20px;
}
#Fpic #Fnums {
FLOAT: right; WIDTH: 106px; margin-top:5px;
}
#Fpic #Fnums DIV {
FONT-WEIGHT: bold; background:url(../images/images/focus_ico.png) -21px 0 no-repeat; FLOAT: left; WIDTH: 18px; CURSOR: pointer; COLOR: #666; LINE-HEIGHT: 18px; MARGIN-RIGHT: 3px; HEIGHT: 19px; TEXT-ALIGN: center
}
#Fpic #Fnums .on {
background:url(../images/images/focus_ico.png) no-repeat; color:#FFF; text-decoration:none;
}
</style>
JS代码：
<script type=”text/javascript”>
var n = 0;
var showsTab = document.getElementById(“Fnums”);
var m = showsTab.getElementsByTagName(“div”).length;
function Mea(value) {
n = value;
setBg(value);
plays(value);
cons(value);
}
function setBg(value) {
for (var i = 0; i < m; i++)
if (value == i) {
showsTab.getElementsByTagName(“div”).className = ‘on’;
}
else {
showsTab.getElementsByTagName(“div”).className = ”;
}
}
function plays(value) {
try {
with (Fpic) {
filters.Apply();
for (i = 0; i < m; i++) i == value ? children.className = “dis” : children.className = “undis”;
filters.play();
}
}
catch (e) {
var d = document.getElementById(“Fpic”).getElementsByTagName(“div”);
for (i = 0; i < m; i++) i == value ? d.className = “dis” : d.className = “undis”;
}
}
function cons(value) {
try {
with (Ftxtlingks) {
for (i = 0; i < m; i++) i == value ? children.className = “dis” : children.className = “undis”;
}
}
catch (e) {
var d = document.getElementById(“Ftxtlingks”).getElementsByTagName(“ul”);
for (i = 0; i < m; i++) i == value ? d.className = “dis” : d.className = “undis”;
}
}
function clearAuto() { clearInterval(autoStart) }
function setAuto() { autoStart = setInterval(“auto(n)”, 3000) }
function auto() {
n++;
if (n >= m) n = 0;
Mea(n);
}
function sub() {
n–;
if (n < 0) n = m – 1;
Mea(n);
}
setAuto();
function tab(o, o2, n, o1c, o2c) {
var m_n = document.getElementById(o).getElementsByTagName(o1c);
var c_n = document.getElementById(o2).getElementsByTagName(o2c);
for (i = 0; i < m_n.length; i++) {
m_n.className = i == n ? “on” : “”;
c_n.className = i == n ? “dis” : “undis”;
}
}
</script>
HMTL代码：
<div class=”banner”>
<div class=”focus”>
<div id=”Focus”>
<div id=”FocusPic” onmouseover=”clearAuto()” onmouseout=”setAuto()”>
<div id=”Fpic”>
<div class=”dis”><a href=”http://www.sweiku.com” target=”_blank” title=”思维酷-IT专业博客”><img style=”width:490px; height:250px;_height:258px;” alt=”思维酷-IT专业博客” src=”" ></a></div>
<div class=”undis”><a href=”http://www.sweiku.com” target=”_blank” title=”思维酷-IT专业博客”><img style=”width:490px; height:250px;_height:258px;” alt=”思维酷-IT专业博客” src=”" ></a></div>
<div class=”undis”><a href=”http://www.sweiku.com” target=”_blank” title=”思维酷-IT专业博客”><img style=”width:490px; height:250px;_height:258px;” alt=”思维酷-IT专业博客” src=”" ></a></div>
<div class=”undis”><a href=”http://www.sweiku.com” target=”_blank” title=”思维酷-IT专业博客”><img style=”width:490px; height:250px;_height:258px;” alt=”思维酷-IT专业博客” src=”" ></a></div>
<div class=”undis”><a href=”http://www.sweiku.com” target=”_blank” title=”思维酷-IT专业博客”><img style=”width:490px; height:250px;_height:258px;” alt=”思维酷-IT专业博客” src=”" ></a></div>
<div class=”ft”>
<div id=”Fnums”>
<div class=”on” onmouseover=”Mea(0)”>1</div>
<div onmouseover=”Mea(1)”>2</div>
<div onmouseover=”Mea(2)”>3</div>
<div onmouseover=”Mea(3)”>4</div>
<div onmouseover=”Mea(4)”>5</div>
</div>
</div>
<div id=”Ftxt”>
<div id=”Ftxtlingks”>
<ul class=”dis”>
<li>
<h2><a href=”http://www.sweiku.com” target=”_blank” >思维酷-IT专业博客 作者：口明明口 http://www.sweiku.com</a></h2>
</li>
</ul>
<ul class=”undis”>
<li>
<h2><a href=”http://www.sweiku.com” target=”_blank” >思维酷-IT专业博客 作者：口明明口 http://www.sweiku.com</a></h2>
</li>
</ul>
<ul class=”undis”>
<li>
<h2><a href=”http://www.sweiku.com” target=”_blank” >思维酷-IT专业博客 作者：口明明口 http://www.sweiku.com</a></h2>
</li>
</ul>
<ul class=”undis”>
<li>
<h2><a href=”http://www.sweiku.com” target=”_blank” >思维酷-IT专业博客 作者：口明明口 http://www.sweiku.com</a></h2>
</li>
</ul>
<ul class=”undis”>
<li>
<h2><a href=”http://www.sweiku.com” target=”_blank” >思维酷-IT专业博客 作者：口明明口 http://www.sweiku.com</a></h2>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
页:
[1]