注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风的博客

我为人人,人人为我。

 
 
 

日志

 
 

网页图片特效1  

2013-07-06 01:35:01|  分类: 【HTML语言】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

模拟网页中图片旋转的网页特效代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
tt
</title>
<style type="text/css">
body{background:black}
#p1{position:absolute;height:75px;top:200px;}
</style>
<script type="text/javascript">
var left=200;
var img=document.getElementById('p1');
var imgWidth=286;
var pi=Math.PI;
var x=0,temp=0;
function init(){
document.getElementById('p1').style.left=left+'px';
var set=setInterval('goOn()',40);
}
function goOn(){
temp=Math.cos(x);
document.getElementById('p1').style.width=Math.abs(imgWidth*temp)+'px';
document.getElementById('p1').style.left=(left+(imgWidth-Math.abs(imgWidth*temp/2)))+'px';
if(temp<0){
document.getElementById('p1').style.filter='FlipH(enabled:true)';
}else{
document.getElementById('p1').style.filter='FlipH(enabled:false)';
}
x+=pi/90;
}
</script>
</head>
<body >
<div id="imground">
<img id="p1" src="http://www.webjx.com/images/logo.gif" alt="网页教学网"/>
</div>
<script type="text/javascript">init();</script>
</body>
</html>
网页按钮控制网页图片运动速度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>按钮控制图片运动-webjx.com</title>
<style type="text/css">
div#top {
position: relative;
top: 50px;
left: 200px;
z-index: 10;
width: 200px;
height: 200px;
background-color: red;
}
div#top button {
margin-left: 50px;
}
</style>
</head>
<body style="overflow-x:hidden;width:1280px;">
<script type="text/javascript">
var left1 =0;
var i = 0;
var set;
function dong() {
document.getElementById("img").style.left = (left1 + i) + 'px';
i = i + 10;
set = setTimeout('dong();', 100);
if (i == 1010) {
document.getElementById("img").style.left=0+'px';
i=0;
}
}
</script>
<div id="top">
<button type="button" onclick="dong();">click me</button>
</div>
<div id="img" style="position:absolute;top:300px;left:0px;height:300px;">
<div id="img1" style="position:absolute;top:0px;left:0px;border:1px solid black;">
<img src="http://www.baidu.com/img/baidu_logo.gif" alt="" />
</div>
<div id="img2" style="position:absolute;top:0px;left:-1010px;border:1px solid red;">
<img src="http://www.baidu.com/img/baidu_logo.gif" alt="" />
</div>
</div>
</body>
</html> 

网页图片放大预览网页特效代码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>(js图片放大预览鼠标滑过的任意位置)_webjx.com</title>
<script language="JavaScript">
<!--
var srcX = 1024; //原图大小,可以任意设置
var srcY = 768;
var bigX = 300; //预览窗大小,可以任意设置
var bigY = 225;
var smallX = 300; //缩略图宽度
var smallY = srcY * smallX / srcX;
var viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 1; //边框
window.onload=function (){
head.innerHTML="JS+CSS实现图片放大预览效果,鼠标可以滑动图片任意地方";
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX;
bigpic.height=srcY;
view.style.width=viewX;
view.style.height=viewY;
smallbox.style.borderWidth=border;
bigbox.style.borderWidth=border;
if (window.event){
smallbox.style.width=smallpic.offsetWidth+border*2;
smallbox.style.height=smallpic.offsetHeight+border*2;
bigbox.style.width=bigX+border*2;
bigbox.style.height=bigY+border*2;
}else{
smallbox.style.width=smallpic.offsetWidth;
smallbox.style.height=smallpic.offsetHeight;
bigbox.style.width=bigX;
bigbox.style.height=bigY;
}
move(event);
}
function move(e){
var e = window.event?window.event:e;
var iebug = 0;
if (window.event){
var vX = e.offsetX - viewX/2;
var vY = e.offsetY - viewY/2;
}else{
var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
iebug = 2;
}
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
bigpico.style.marginLeft = - vX * bl
bigpico.style.marginTop = - vY * bl
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}
//-->
</style>
<div id="head"></div>
<div id="smallbox"><img src="http://www.webjx.com/files/090716/1_192312.jpg" name="smallpic" width="300" height="300" border="0" id="smallpic" onmousemove="move(event)" onmouseover="document.getElementById('bigbox').style.display='';document.getElementById('view').style.display=''" onmouseout="document.getElementById('bigbox').style.display='none';document.getElementById('view').style.display='none'"></div>
<div id="bigbox"  style="display:none"><div id="bigpico"><img src="http://www.webjx.com/files/090716/1_192312.jpg" name="bigpic" width="300" height="300" border="0" id="bigpic"></div>
</div>
<div id="view" onmousemove="move(event) "style="display:none"></div>
鼠标悬停暂停播放鼠标移开继续播放

<div class="banner">
                         <ul class="IMG_list">
                                  <li><a target="_blank"><img src="images/1.jpg" alt="帆布鞋"></a><div class="titDiv"><p class="opacity">帆布鞋</p></div></li>
                                  <li><a target="_blank"><img src="images/2.jpg" alt="针织衫"></a><div class="titDiv"><p class="opacity">针织衫</p></div></li>
                                  <li><a target="_blank"><img src="images/3.jpg" alt="户外"></a><div class="titDiv"><p class="opacity">户外</p></div></li>
                                  <li><a target="_blank"><img src="images/4.jpg" alt="外套"></a><div class="titDiv"><p class="opacity">外套</p></div></li>
                                  <li><a target="_blank"><img src="images/5.jpg" alt="衬衫"></a><div class="titDiv"><p class="opacity">衬衫</p></div> </li>
                         </ul>
                <p class="play_count">
                                        <span class="on_count">1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>4</span>
                                        <span>5</span>
                        </p>
           
</div>

JS部分:

var  timer=null
function showAuto(){
        var count=$("#focus_n li").length;
    n = n >= (count - 1) ? 0 : n + 1;  
    $("#focus_n li").eq(n).trigger('mouseover');  
}

var t = n = count = 0;
$(function(){  
    $("#focus_m li:not(:first-child)").hide();  
    $("#focus_n li").mouseover(function(){
                $(this).addClass('active').siblings().removeClass('active');
                count = $(this).parents().find('#focus_m li').length;
        var i=$(this).parent().find('li').index(this);
                 n = i;
                 if (i >= count) return;
                 $(this).parents().find('#focus_m li').stop(false,true).filter(":visible").fadeOut().parent().children().eq(i).fadeIn();  
    }); 
       
         window.timer = setInterval("showAuto()", 5000);
        
         /*$(".banner").click(function(){
                 clearInterval(timer)},
                 function(){timer = setInterval("showAuto()", 5000);
         });*/  //这个是错的,因为鼠标点击之后,5秒之后并不能实现继续滚动
        
     $('.banner').mouseover(function(){
                 clearTimeout(timer);
                 window.setTimeout(function(){timer = setInterval("showAuto()", 5000)});
         })
        
          /*$(".banner").mouseover(function(){
           clearInterval(timer);
      });
        $(".banner").mouseout(function(){
           timer = setInterval("showAuto()", 2000);
      }); */ //这个是也错的,因为鼠标点击之后,5秒之后只能滚动一次
        
        
})

鼠标感应的网页图片展示特效

<!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=utf-8" />
<title>鼠标感应的网页图片展示特效</title>
<!--[if lte IE 6]>
<script language="Javascript">
var W3CDOM = (document.createElement() && document.getElementsByTagName());
window.onload = pinballEffect;
function pinballEffect()
{
if (!W3CDOM) return;
var allElements = document.getElementsByTagName('*');
var originalBackgrounds=new Array();
for (var i=0; i<allElements.length; i++)
{
if (allElements[i].className.indexOf('hovereffect') >= 0)
{
allElements[i].onmouseover = mouseGoesOver;
allElements[i].onmouseout = mouseGoesOut;
}
}
}
function mouseGoesOver()
{
originalClassNameString = this.className;
this.className += " lay-on";
}
function mouseGoesOut()
{
this.className = originalClassNameString;
}
pinballEffect();
</script>
<![endif]-->
<style type="text/css">
body {
background:#fff;
font:small/1.5 "宋体", SimSun, serif;
_font-size:medium;
}
a img {
border:none;
}
ul,
li,
h5 {
list-style:none inside;
margin:0;
padding:0;
}
.recomm {
background:#999;
border:1px solid #666;
width:600px;
height:170px;
overflow:hidden;
padding:10px;
margin:0 auto;
position:relative;
}
.recomm ul {
border:1px solid #fff;
border-left:none;
height:168px;
width:599px;
overflow:hidden;
*position:absolute;  /* 解决IE中overflow:hidden无法正确隐藏元素的问题 */
}
.recomm li {
float:left;
position:relative;
margin-right:-179px;
height:100%;
overflow:hidden;
white-space:nowrap;
text-align:center;
}
.recomm li img {
display:block;
border-left:1px solid #fff;
width:248px;
height:168px;
}
.recomm li h5 {
position:absolute;
bottom:0;
left:0;
height:20px;
width:239px;
line-height:20px;
background:url(http://www.webjx.com/files/090331/1_211621.png) no-repeat;
display:none;
text-align:right;
padding-right:10px;
font-size:1em;
font-weight:normal;
}
.recomm li:hover, .recomm .lay-on {
width:249px;
margin-right:0;
}
.recomm li:hover h5, .recomm .lay-on h5 {
display:block;
}
</style>
</head>
<body>
<div class="recomm">
<ul>
<li class="hovereffect"><a href="http://www.webjx.com/" title="观赏该图片详细信息"><img src="http://www.webjx.com/files/090331/1_211515.jpg" alt="图片1" title="这里是图片标题" /></a>
<h5>By <a href="http://www.webjx.com/" title="访问网页教学网">网页教学网</a> 3-31-09  Beijing</h5>
</li>
<li class="hovereffect"><a href="http://www.webjx.com/" title="观赏该图片详细信息"><img src="http://www.webjx.com/files/090331/1_211525.jpg" alt="图片2" title="这里是图片标题" /></a>
<h5>By <a href="http://www.webjx.com/" title="访问网页教学网">网页教学网</a> 3-31-09  Beijing</h5>
</li>
<li class="hovereffect"><a href="http://www.webjx.com/" title="观赏该图片详细信息"><img src="http://www.webjx.com/files/090331/1_211533.jpg" alt="图片3" title="这里是图片标题" /></a>
<h5>By <a href="http://www.webjx.com/" title="访问网页教学网">网页教学网</a> 3-31-09  Beijing</h5>
</li>
<li class="hovereffect"><a href="http://www.webjx.com/" title="观赏该图片详细信息"><img src="http://www.webjx.com/files/090331/1_211543.jpg" alt="图片4" title="这里是图片标题" /></a>
<h5>By <a href="http://www.webjx.com/" title="访问网页教学网">网页教学网</a> 3-31-09  Beijing</h5>
</li>
<li class="hovereffect"><a href="http://www.webjx.com/" title="观赏该图片详细信息"><img src="http://www.webjx.com/files/090331/1_211553.jpg" alt="图片5" title="这里是图片标题" /></a>
<h5>By <a href="http://www.webjx.com/" title="访问网页教学网">网页教学网</a> 3-31-09  Beijing</h5>
</li>
<li class="hovereffect"><a href="http://www.webjx.com/" title="观赏该图片详细信息"><img src="http://www.webjx.com/files/090331/1_211603.jpg" alt="图片6" title="这里是图片标题" /></a>
<h5>By <a href="http://www.webjx.com/" title="访问网页教学网">网页教学网</a> 3-31-09  Beijing</h5>
</li>
</ul>
</div><!--/.recomm-->
</body>
</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=utf-8" />
<title>相册 v4.0</title>
<style>
*{ margin:0; padding:0; list-style:none}
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.8;}
img{ display:block; border:0;}
h1,h2{ background:#85B829; line-height:2.5; font-size:14px; padding-left:10px; color:#fff;}
#pics{ border-left:3px solid #468C50; border-right:3px solid #99CC99; background:#B5DF63; float:left; width:750px;}
li{ float:left;}
a{ display:block; background:#fff; border:1px solid #A4D742; text-align:center; color:#598628; text-decoration:none; padding:5px; margin:10px;}
a:hover,a:active{ background:#99CC33; border:1px solid #85B829; border-left:1px solid #fff; border-top:1px solid #fff; color:#fff}
#showpic{ border:1px solid #85B829; padding:5px; display:none; clear:left; background:#FFF; text-align: center}
ul,#showpic{ margin:10px;}
h2{ color:#598628; background:none; text-align:left}
#showpic img{ margin:auto}
</style>
</head>
<body>
<div id="pics">
<h1>我的动物园</h1>
<ul>
<li><a href="http://www.webjx.com/files/090316/1_195857.jpg" title="四只长颈鹿"><img src="http://www.webjx.com/files/090316/1_200223.jpg" />长颈鹿</a></li>
<li><a href="http://www.webjx.com/files/090316/1_195911.jpg" title="绿色的小青蛙"><img src="http://www.webjx.com/files/090316/1_200235.jpg" />青蛙</a></li>
<li><a href="http://www.webjx.com/files/090316/1_195923.jpg" title="小狗狗会汪汪"><img src="http://www.webjx.com/files/090316/1_200243.jpg" />小狗狗</a></li>
<li><a href="http://www.webjx.com/files/090316/1_195937.jpg" title="小老鼠兄弟"><img src="http://www.webjx.com/files/090316/1_200255.jpg" />鼠小弟</a></li>
<li><a href="http://www.webjx.com/files/090316/1_195953.jpg" title="烫发的白天鹅"><img src="http://www.webjx.com/files/090316/1_200306.jpg" />白天鹅</a></li>
<li><a href="http://www.webjx.com/files/090316/1_200004.jpg" title="鹦鹉夫妇"><img src="http://www.webjx.com/files/090316/1_200320.jpg" />鹦鹉</a></li>
<li><a href="http://www.webjx.com/files/090316/1_200022.jpg" title="北方的狼"><img src="http://www.webjx.com/files/090316/1_200330.jpg" />狼</a></li>
<li><a href="http://www.webjx.com/files/090316/1_200039.jpg" title="警觉中的斑马"><img src="http://www.webjx.com/files/090316/1_200340.jpg" />斑马</a></li>
<li><a href="http://www.webjx.com/files/090316/1_200053.jpg" title="绿色的鸟"><img src="http://www.webjx.com/files/090316/1_200348.jpg" />绿色的鸟</a></li>
<li><a href="http://www.webjx.com/files/090316/1_200112.jpg" title="金黄色的小金鱼"><img src="http://www.webjx.com/files/090316/1_200401.jpg" />小金鱼</a></li>
</ul>
</div>
<script language="javascript">
function setDiv(){
var pics = document.getElementById("pics");
var showpic = document.createElement("div");
showpic.setAttribute("id", "showpic");
pics.appendChild(showpic);
showpic.appendChild(document.createElement("h2"));
showpic.appendChild(document.createElement("img"));
var links = pics.getElementsByTagName("a");
for(var k=0; k<links.length; k++){
links[k].onclick = function(){
return showPic(this);
}
}
}
function showPic(pic){
var showpic = document.getElementById("showpic");
showpic.style.display = "block";
showpic.getElementsByTagName("h2")[0].innerHTML = pic.title;
showpic.getElementsByTagName("img")[0].setAttribute("src", pic.href);
return false;
}
window.onload = setDiv;
</script>
</body>
</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=utf-8" />
<title>仿土豆网的焦点轮换图片</title>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#039; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
/* Focus_change style */
#focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; }
#focus_change_list { position:absolute; width:1800px; height:295px; }
#focus_change_list li { float:left; }
#focus_change_list li img { width:450px; height:295px; }
.focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }
#focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; }
#focus_change_btn ul { padding-left:5px; }
#focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; }
#focus_change_btn li img { width:76px; height:50px; border:2px solid #888; }
#focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;}
#focus_change_btn .current img { border-color:#EEE; }
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function classNormal(){
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
for(var i=0; i<focusBtnList.length; i++) {
focusBtnList[i].className='';
}
}
function focusChange() {
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
focusBtnList[0].onmouseover = function() {
moveElement('focus_change_list',0,0,5);
classNormal()
focusBtnList[0].className='current'
}
focusBtnList[1].onmouseover = function() {
moveElement('focus_change_list',-450,0,5);
classNormal()
focusBtnList[1].className='current'
}
focusBtnList[2].onmouseover = function() {
moveElement('focus_change_list',-900,0,5);
classNormal()
focusBtnList[2].className='current'
}
focusBtnList[3].onmouseover = function() {
moveElement('focus_change_list',-1350,0,5);
classNormal()
focusBtnList[3].className='current'
}
}
setInterval('autoFocusChange()', 5000);
var atuokey = false;
function autoFocusChange() {
$('focus_change').onmouseover = function(){atuokey = true}
$('focus_change').onmouseout = function(){atuokey = false}
if(atuokey) return;
var focusBtnList = $('focus_change_btn').getElementsByTagName('li');
for(var i=0; i<focusBtnList.length; i++) {
if (focusBtnList[i].className == 'current') {
var currentNum = i;
}
}
if (currentNum==0 ){
moveElement('focus_change_list',-450,0,5);
classNormal()
focusBtnList[1].className='current'
}
if (currentNum==1 ){
moveElement('focus_change_list',-900,0,5);
classNormal()
focusBtnList[2].className='current'
}
if (currentNum==2 ){
moveElement('focus_change_list',-1350,0,5);
classNormal()
focusBtnList[3].className='current'
}
if (currentNum==3 ){
moveElement('focus_change_list',0,0,5);
classNormal()
focusBtnList[0].className='current'
}
}
window.onload=function(){
focusChange();
}
</script>
</head>
<body>
<div id="focus_change">
<div id="focus_change_list" style="top:0; left:0;">
<ul>
<li><a href="http://www.webjx.com/"><img src="http://www.webjx.com/files/090207/1_213935.jpg" alt="" /></a></li>
<li><a href="http://www.webjx.com/"><img src="http://www.webjx.com/files/090207/1_213944.jpg" alt="" /></a></li>
<li><a href="http://www.webjx.com/"><img src="http://www.webjx.com/files/090207/1_213952.jpg" alt="" /></a></li>
<li><a href="http://www.webjx.com/"><img src="http://www.webjx.com/files/090207/1_214001.jpg" alt="" /></a></li>
</ul>
</div>
<div class="focus_change_opacity"></div>
<div id="focus_change_btn">
<ul>
<li class="current"><a href="#"><img src="http://www.webjx.com/files/090207/1_214008.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://www.webjx.com/files/090207/1_214016.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://www.webjx.com/files/090207/1_214024.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://www.webjx.com/files/090207/1_214032.jpg" alt="" /></a></li>
</ul>
</div>
</div><!--focus_change end-->
<div style="height:20px; background:#EEE;"></div>
</body>
</html>

新浪女性频道图片切换特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="网页教学网 http://www.webjx.com/" />
<meta name="description" content="新浪女性频道的Flash焦点图" />
<meta content="新浪女性频道的Flash焦点图" name="keywords" />
<title>新浪女性频道的Flash焦点图</title>
<SCRIPT type=text/javascript>
if(typeof(sina)!="object"){var sina={}}
sina.$=function(objId){if(!objId){throw new Error("sina.$(String objId)参数必须")}
if(document.getElementById){return eval('document.getElementById("'+objId+'")')}else if(document.layers){return eval("document.layers['"+objId+"']")}else{return eval('document.all.'+objId)}}
sinaFlash=function(C,v,x,V,c,X,i,O,I,l,o){var z=this;if(!document.createElement||!document.getElementById){return}
z.id=v?v:"";z.classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000";z.codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version="+(c?c:"7")+",0,0,0";z.width=x;z.height=V;z.movie=C;z.bgcolor=X?X:null;z.quality=O?O:"high";z.src=z.movie;z.pluginspage="http://www.macromedia.com/go/getflashplayer";z.type="application/x-shockwave-flash";z.useExpressInstall=i?i:null;z.xir=(I)?I:window.location;z.redirectUrl=l?l:null;z.detectKey=o?o:null;z.escapeIs=false;z.objAttrs={};z.params={};z.flashVars=[];z.flashVarsStr="";z.embedAttrs={};z.forSetAttribute("id",z.id);z.objAttrs["classid"]=z.classid;z.forSetAttribute("codebase",z.codebase);z.forSetAttribute("width",z.width);z.forSetAttribute("height",z.height);z.forSetAttribute("movie",z.movie);z.forSetAttribute("quality",z.quality);z.forSetAttribute("pluginspage",z.pluginspage);z.forSetAttribute("type",z.type);z.forSetAttribute("bgcolor",z.bgcolor)}
sinaFlash.prototype={getFlashHtml:function(){var I=this,i='<object ';for(var l in I.objAttrs){i+=l+'="'+I.objAttrs[l]+'" '}
i+='>';for(var l in I.params){i+='<param name="'+l+'" value="'+I.params[l]+'" /> '}
if(I.flashVarsStr!=""){i+='<param name="FlashVars" value="'+I.flashVarsStr+'" /> '}
i+='<embed ';for(var l in I.embedAttrs){i+=l+'="'+I.embedAttrs[l]+'" '}
i+=' ></embed></object>';return i},forSetAttribute:function(I,i){var l=this;I=I.toLowerCase();switch(I){case "classid":break;case "pluginspage":l.embedAttrs["pluginspage"]=i;break;case "src":l.embedAttrs["src"]=i;l.params["movie"]=i;break;case "movie":l.params["movie"]=i;l.embedAttrs["src"]=i;break;case "onafterupdate":case "onbeforeupdate":case "onblur":case "oncellchange":case "onclick":case "ondblClick":case "ondrag":case "ondragend":case "ondragenter":case "ondragleave":case "ondragover":case "ondrop":case "onfinish":case "onfocus":case "onhelp":case "onmousedown":case "onmouseup":case "onmouseover":case "onmousemove":case "onmouseout":case "onkeypress":case "onkeydown":case "onkeyup":case "onload":case "onlosecapture":case "onpropertychange":case "onreadystatechange":case "onrowsdelete":case "onrowenter":case "onrowexit":case "onrowsinserted":case "onstart":case "onscroll":case "onbeforeeditfocus":case "onactivate":case "onbeforedeactivate":case "ondeactivate":case "type":l.embedAttrs["type"]=i;break;case "codebase":l.objAttrs["codebase"]=i;break;case "width":l.objAttrs["width"]=i;l.embedAttrs["width"]=i;break;case "height":l.objAttrs["height"]=i;l.embedAttrs["height"]=i;break;case "align":l.objAttrs["align"]=i;l.embedAttrs["align"]=i;break;case "vspace":l.objAttrs["vspace"]=i;l.embedAttrs["vspace"]=i;break;case "hspace":l.objAttrs["hspace"]=i;l.embedAttrs["hspace"]=i;break;case "class":l.objAttrs["class"]=i;l.embedAttrs["class"]=i;break;case "title":l.objAttrs["title"]=i;break;case "accesskey":l.objAttrs["accesskey"]=i;break;case "name":l.objAttrs["name"]=i;l.embedAttrs["name"]=i;break;case "id":l.objAttrs["id"]=i;l.embedAttrs["name"]=i;break;case "tabindex":l.objAttrs["tabindex"]=i;break;default:l.params[I]=l.embedAttrs[I]=i}},forGetAttribute:function(i){var I=this;i=i.toLowerCase();if(I.objAttrs[i]!=undefined){return I.objAttrs[i]}else if(I.embedAttrs[i]!=undefined){return I.embedAttrs[i]}else if(I.embedAttrs!=undefined){return I.embedAttrs[i]}else{return null}},setAttribute:function(I,i){this.forSetAttribute(I,i)},getAttribute:function(i){return this.forGetAttribute(i)},addVariable:function(I,i){var l=this;if(l.escapeIs){I=escape(I);i=escape(i)}
if(l.flashVarsStr==""){l.flashVarsStr=I+"="+i}else{l.flashVarsStr+="&"+I+"="+i}
l.embedAttrs["FlashVars"]=l.flashVarsStr},getVariable:function(I){var o=this,i=o.flashVarsStr;if(o.escapeIs){I=escape(I)}
var l=new RegExp(I+"=([^\\&]*)(\\&?)","i").exec(i);if(o.escapeIs){return unescape(RegExp.$1)}
return RegExp.$1},addParam:function(I,i){this.forSetAttribute(I,i)},getParam:function(){return this.forGetAttribute(name)},write:function(i){var I=this;if(typeof i=="string"){sina.$(i).innerHTML=I.getFlashHtml()}else if(typeof i=="object"){i.innerHTML=I.getFlashHtml()}}}
</SCRIPT>
</head>
<body>
<div align="center">
<!-- 焦点图 begin -->
<div id=focusimages_eladies>ttt</div>
<script type=text/javascript>
var focusFlash = new sinaFlash("http://www.webjx.com/files/media/1_090121090549.swf", "focusimages_eladies", "320", "539", "8", "#ffffff");
focusFlash.addParam("quality", "best");
focusFlash.addParam("wmode", "transparent");
//添加格式为:图片1#链接1|图片2#链接2|图片3#链接3……
//图片尺寸为:318x476
focusFlash.addVariable("mylinkpic", "/files/090121/1_090800.jpg#http://www.webjx.com/|/files/090121/1_090833.jpg#http://www.webjx.com/|/files/090121/1_090848.jpg#http://www.webjx.com/|/files/090121/1_090906.jpg#http://www.webjx.com/|/files/090121/1_090919.jpg#http://www.webjx.com/");
focusFlash.write("focusimages_eladies");
</script>
<!-- 焦点图 end -->
</div>
<div style="font-size:12px;text-align:center;"> 来源 by <a href="http://www.webjx.com/" target="_blank">网页教学网</a></div>
</body>
</html>
图片切换特效(天极软件)

<html>
<head>
<title>图片切换特效-网页教学网webjx.com整理</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
/*新焦点滚动*/
#MPB {width: 282px; height: 164px;}
#MPB #SlidePlayer { position: relative; margin: 0 auto;}
#MPB .Slides {overflow: hidden; list-style-type: none; height: 164px; margin: 0; padding: 0;}
#MPB .Slides LI {float: left;width: 282px;height: 164px;}
#MPB .Slides IMG {display: block;width: 282px;height: 164px;border:0px;}
#MPB .SlideTriggers {list-style-type:none;position: absolute;top:0px;height: 18px; margin:4px 0px 0px 4px;padding: 0;width:16px;}
#MPB .SlideTriggers LI {display: inline;background: url(http://www.webjx.com/files/080105/1_140742.gif) no-repeat center center;float: left;overflow: hidden;width: 16px;height: 16px;cursor: pointer;color:#0849AD;text-align: center;margin:1px;font: 13px Arial;}
#MPB .SlideTriggers LI.Current {font:13px Arial;color: #FFF;background: url(http://www.webjx.com/files/080105/1_140755.gif) no-repeat center center;width: 16px;height:16px;margin: 1px;}
</style>
</head>
<body>
<script type="text/javascript">
if(typeof YAHOO=="undefined"){var YAHOO={};}
YAHOO.namespace=function(){var a=arguments,o=null,i,j,d;for(i=0;i<a.length;i=i+1){d=a[i].split(".");o=YAHOO;for(j=(d[0]=="YAHOO")?1:0;j<d.length;j=j+1){o[d[j]]=o[d[j]]||{};o=o[d[j]];}}
return o;};YAHOO.init=function(){this.namespace("util","widget","example");if(typeof YAHOO_config!="undefined"){var l=YAHOO_config.listener,ls=YAHOO.env.listeners,unique=true,i;if(l){for(i=0;i<ls.length;i=i+1){if(ls[i]==l){unique=false;break;}}
if(unique){ls.push(l);}}}};YAHOO.register=function(name,mainClass,data){var mods=YAHOO.env.modules;if(!mods[name]){mods[name]={versions:[],builds:[]};}
var m=mods[name],v=data.version,b=data.build,ls=YAHOO.env.listeners;m.name=name;m.version=v;m.build=b;m.versions.push(v);m.builds.push(b);m.mainClass=mainClass;for(var i=0;i<ls.length;i=i+1){ls[i](m);}
if(mainClass){mainClass.VERSION=v;mainClass.BUILD=b;}else{YAHOO.log("mainClass is undefined for module "+name,"warn");}};YAHOO.env=YAHOO.env||{modules:[],listeners:[],getVersion:function(name){return YAHOO.env.modules[name]||null;}};YAHOO.lang={isArray:function(obj){},isBoolean:function(obj){return typeof obj=='boolean';},isFunction:function(obj){return typeof obj=='function';},isNull:function(obj){return obj===null;},isNumber:function(obj){return typeof obj=='number'&&isFinite(obj);},isObject:function(obj){return obj&&(typeof obj=='object'||YAHOO.lang.isFunction(obj));},isString:function(obj){return typeof obj=='string';},isUndefined:function(obj){return typeof obj=='undefined';},hasOwnProperty:function(obj,prop){},extend:function(subc,superc,overrides){if(!superc||!subc){throw new Error("YAHOO.lang.extend failed, please check that "+"all dependencies are included.");}
var F=function(){};F.prototype=superc.prototype;subc.prototype=new F();subc.prototype.constructor=subc;subc.superclass=superc.prototype;if(superc.prototype.constructor==Object.prototype.constructor){superc.prototype.constructor=superc;}
if(overrides){for(var i in overrides){subc.prototype[i]=overrides[i];}}},augment:function(r,s){}};YAHOO.init();YAHOO.util.Lang=YAHOO.lang;YAHOO.augment=YAHOO.lang.augment;YAHOO.extend=YAHOO.lang.extend;YAHOO.register("yahoo",YAHOO,{version:"2.2.2",build:"204"});(function(){var Y=YAHOO.util,getStyle,setStyle,id_counter=0,propertyCache={};var ua=navigator.userAgent.toLowerCase(),isOpera=(ua.indexOf('opera')>-1),isSafari=(ua.indexOf('safari')>-1),isGecko=(!isOpera&&!isSafari&&ua.indexOf('gecko')>-1),isIE=(!isOpera&&ua.indexOf('msie')>-1);var patterns={HYPHEN:/(-[a-z])/i,ROOT_TAG:/body|html/i};var toCamel=function(property){if(!patterns.HYPHEN.test(property)){return property;}
if(propertyCache[property]){return propertyCache[property];}
var converted=property;while(patterns.HYPHEN.exec(converted)){converted=converted.replace(RegExp.$1,RegExp.$1.substr(1).toUpperCase());}
propertyCache[property]=converted;return converted;};if(document.defaultView&&document.defaultView.getComputedStyle){getStyle=function(el,property){var value=null;if(property=='float'){property='cssFloat';}
var computed=document.defaultView.getComputedStyle(el,'');if(computed){value=computed[toCamel(property)];}
return el.style[property]||value;};}else if(document.documentElement.currentStyle&&isIE){getStyle=function(el,property){};}else{getStyle=function(el,property){return el.style[property];};}
if(isIE){setStyle=function(el,property,val){};}else{setStyle=function(el,property,val){if(property=='float'){property='cssFloat';}
el.style[property]=val;};}
YAHOO.util.Dom={get:function(el){if(YAHOO.lang.isString(el)){return document.getElementById(el);}
if(YAHOO.lang.isArray(el)){var c=[];for(var i=0,len=el.length;i<len;++i){c[c.length]=Y.Dom.get(el[i]);}
return c;}
if(el){return el;}
return null;},getStyle:function(el,property){},setStyle:function(el,property,val){property=toCamel(property);var f=function(element){setStyle(element,property,val);};Y.Dom.batch(el,f,Y.Dom,true);},getXY:function(el){},getX:function(el){},getY:function(el){},setXY:function(el,pos,noRetry){},setX:function(el,x){Y.Dom.setXY(el,[x,null]);},setY:function(el,y){Y.Dom.setXY(el,[null,y]);},getRegion:function(el){var f=function(el){var region=new Y.Region.getRegion(el);return region;};return Y.Dom.batch(el,f,Y.Dom,true);},getClientWidth:function(){return Y.Dom.getViewportWidth();},getClientHeight:function(){},getElementsByClassName:function(className,tag,root){var method=function(el){return Y.Dom.hasClass(el,className);};return Y.Dom.getElementsBy(method,tag,root);},hasClass:function(el,className){var re=new RegExp('(?:^|\\s+)'+className+'(?:\\s+|$)');var f=function(el){return re.test(el.className);};return Y.Dom.batch(el,f,Y.Dom,true);},addClass:function(el,className){},removeClass:function(el,className){},replaceClass:function(el,oldClassName,newClassName){},generateId:function(el,prefix){},isAncestor:function(haystack,needle){},inDocument:function(el){},getElementsBy:function(method,tag,root){tag=tag||'*';var nodes=[];if(root){root=Y.Dom.get(root);if(!root){return nodes;}}else{root=document;}
var elements=root.getElementsByTagName(tag);if(!elements.length&&(tag=='*'&&root.all)){elements=root.all;}
for(var i=0,len=elements.length;i<len;++i){if(method(elements[i])){nodes[nodes.length]=elements[i];}}
return nodes;},batch:function(el,method,o,override){var id=el;el=Y.Dom.get(el);var scope=(override)?o:window;if(!el||el.tagName||!el.length){if(!el){return false;}
return method.call(scope,el,o);}
var collection=[];for(var i=0,len=el.length;i<len;++i){if(!el[i]){id=el[i];}
collection[collection.length]=method.call(scope,el[i],o);}
return collection;},getDocumentHeight:function(){},getDocumentWidth:function(){},getViewportHeight:function(){},getViewportWidth:function(){}};})();
YAHOO.util.CustomEvent=function(type,oScope,silent,signature){
this.type=type;this.scope=oScope||window;this.silent=silent;this.signature=signature||YAHOO.util.CustomEvent.LIST;this.subscribers=[];if(!this.silent){}};YAHOO.util.CustomEvent.LIST=0;YAHOO.util.CustomEvent.FLAT=1;YAHOO.util.CustomEvent.prototype={subscribe:function(fn,obj,override){if(!fn){throw new Error("Invalid callback for subscriber to '"+this.type+"'");}
if(this.subscribeEvent){this.subscribeEvent.fire(fn,obj,override);}
this.subscribers.push(new YAHOO.util.Subscriber(fn,obj,override));},unsubscribe:function(fn,obj){
return found;},fire:function(){var len=this.subscribers.length;if(!len&&this.silent){return true;}
var args=[],ret=true,i;for(i=0;i<arguments.length;++i){args.push(arguments[i]);}
var argslength=args.length;if(!this.silent){}
for(i=0;i<len;++i){var s=this.subscribers[i];if(s){if(!this.silent){}
var scope=s.getScope(this.scope);if(this.signature==YAHOO.util.CustomEvent.FLAT){var param=null;if(args.length>0){param=args[0];}
ret=s.fn.call(scope,param,s.obj);}else{ret=s.fn.call(scope,this.type,args,s.obj);}
if(false===ret){if(!this.silent){}
return false;}}}
return true;},unsubscribeAll:function(){},_delete:function(index){},toString:function(){}};YAHOO.util.Subscriber=function(fn,obj,override){this.fn=fn;this.obj=obj||null;this.override=override;};YAHOO.util.Subscriber.prototype.getScope=function(defaultScope){if(this.override){if(this.override===true){return this.obj;}else{return this.override;}}
return defaultScope;};if(!YAHOO.util.Event){YAHOO.util.Event=function(){var loadComplete=false;var DOMReady=false;var listeners=[];var unloadListeners=[];var legacyEvents=[];var legacyHandlers=[];var retryCount=0;var onAvailStack=[];var legacyMap=[];var counter=0;var lastError=null;
return{POLL_RETRYS:200,POLL_INTERVAL:10,EL:0,TYPE:1,FN:2,WFN:3,OBJ:3,ADJ_SCOPE:4,isSafari:(/KHTML/gi).test(navigator.userAgent),webkit:function(){}(),isIE:(!this.webkit&&!navigator.userAgent.match(/opera/gi)&&navigator.userAgent.match(/msie/gi)),_interval:null,startInterval:function(){},onAvailable:function(p_id,p_fn,p_obj,p_override){},onDOMReady:function(p_fn,p_obj,p_override){},onContentReady:function(p_id,p_fn,p_obj,p_override){},addListener:function(el,sType,fn,obj,override){
if(this._isValidCollection(el)){}else
if("unload"==sType&&obj!==this){unloadListeners[unloadListeners.length]=[el,sType,fn,obj,override];return true;}
var scope=el;if(override){if(override===true){scope=obj;}else{scope=override;}}
var wrappedFn=function(e){return fn.call(scope,YAHOO.util.Event.getEvent(e),obj);};var li=[el,sType,fn,wrappedFn,scope];var index=listeners.length;listeners[index]=li;if(this.useLegacyEvent(el,sType)){var legacyIndex=this.getLegacyIndex(el,sType);if(legacyIndex==-1||el!=legacyEvents[legacyIndex][0]){legacyIndex=legacyEvents.length;legacyMap[el.id+sType]=legacyIndex;legacyEvents[legacyIndex]=[el,sType,el["on"+sType]];legacyHandlers[legacyIndex]=[];el["on"+sType]=function(e){YAHOO.util.Event.fireLegacyEvent(YAHOO.util.Event.getEvent(e),legacyIndex);};}
legacyHandlers[legacyIndex].push(li);}else{try{this._simpleAdd(el,sType,wrappedFn,false);}catch(ex){this.lastError=ex;this.removeListener(el,sType,fn);return false;}}},fireLegacyEvent:function(e,legacyIndex){},getLegacyIndex:function(el,sType){},useLegacyEvent:function(el,sType){},removeListener:function(el,sType,fn){},getTarget:function(ev,resolveTextNode){var t=ev.target||ev.srcElement;return this.resolveTextNode(t);},resolveTextNode:function(node){if(node&&3==node.nodeType){return node.parentNode;}else{return node;}},getPageX:function(ev){},getPageY:function(ev){},getXY:function(ev){},getRelatedTarget:function(ev){},getTime:function(ev){},stopEvent:function(ev){},stopPropagation:function(ev){},preventDefault:function(ev){},getEvent:function(e){var ev=e||window.event;
return ev;},getCharCode:function(ev){},_getCacheIndex:function(el,sType,fn){
return-1;},generateId:function(el){},_isValidCollection:function(o){},elCache:{},getEl:function(id){},clearCache:function(){},DOMReadyEvent:new YAHOO.util.CustomEvent("DOMReady",this),_load:function(e){},_ready:function(e){},_tryPreloadAttach:function(){
this.locked=false;return true;},purgeElement:function(el,recurse,sType){var elListeners=this.getListeners(el,sType);},getListeners:function(el,sType){var results=[],searchLists;
if(!sType){searchLists=[listeners,unloadListeners];}else
return(results.length)?results:null;},_unload:function(e){},_getScrollLeft:function(){},_getScrollTop:function(){return this._getScroll()[0];},_getScroll:function(){var dd=document.documentElement,db=document.body;if(dd&&(dd.scrollTop||dd.scrollLeft)){return[dd.scrollTop,dd.scrollLeft];}else if(db){return[db.scrollTop,db.scrollLeft];}else{return[0,0];}},regCE:function(){},_simpleAdd:function(){if(window.addEventListener){return function(el,sType,fn,capture){el.addEventListener(sType,fn,(capture));};}else if(window.attachEvent){return function(el,sType,fn,capture){el.attachEvent("on"+sType,fn);};}else{return function(){};}}(),_simpleRemove:function(){if(window.removeEventListener){return function(el,sType,fn,capture){el.removeEventListener(sType,fn,(capture));};}else if(window.detachEvent){return function(el,sType,fn){el.detachEvent("on"+sType,fn);};}else{return function(){};}}()};}();(function(){var EU=YAHOO.util.Event;EU.on=EU.addListener;})();}
YAHOO.util.Connect={_msxml_progid:['MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'],_http_headers:{},_has_http_headers:false,_use_default_post_header:true,_default_post_header:'application/x-www-form-urlencoded; charset=UTF-8',_use_default_xhr_header:true,_default_xhr_header:'XMLHttpRequest',_has_default_headers:true,_default_headers:{},_isFormSubmit:false,_isFileUpload:false,_formNode:null,_sFormData:null,_poll:{},_timeOut:{},_polling_interval:50,_transaction_id:0,_submitElementValue:null,_hasSubmitListener:(function(){if(YAHOO.util.Event){YAHOO.util.Event.addListener(document,'click',function(e){var obj=YAHOO.util.Event.getTarget(e);if(obj.type=='submit'){YAHOO.util.Connect._submitElementValue=encodeURIComponent(obj.name)+"="+encodeURIComponent(obj.value);}})
return true;}
return false;})(),setProgId:function(id){this._msxml_progid.unshift(id);},setDefaultPostHeader:function(b){this._use_default_post_header=b;},setDefaultXhrHeader:function(b){this._use_default_xhr_header=b;},setPollingInterval:function(i){if(typeof i=='number'&&isFinite(i)){this._polling_interval=i;}},createXhrObject:function(transactionId){var obj,http;try{http=new XMLHttpRequest();obj={conn:http,tId:transactionId};}
catch(e){for(var i=0;i<this._msxml_progid.length;++i){try{http=new ActiveXObject(this._msxml_progid[i]);obj={conn:http,tId:transactionId};break;}
catch(e){}}}
var uploadCallback=function(){
setTimeout(function(){document.body.removeChild(io);},100);};if(YAHOO.util.Event){YAHOO.util.Event.addListener(io,"load",uploadCallback);}
else if(window.attachEvent){io.attachEvent('onload',uploadCallback);}
else{io.addEventListener('load',uploadCallback,false);}},abort:function(o,callback,isTimeout){},isCallInProgress:function(o){},releaseObject:function(o){o.conn=null;o=null;}};
YAHOO.register("connection",YAHOO.util.Connect,{version:"2.2.2",build:"204"});
YAHOO.util.Anim=function(el,attributes,duration,method){if(el){this.init(el,attributes,duration,method);}};
YAHOO.util.Anim.prototype={toString:function(){},patterns:{},doMethod:function(attr,start,end){},setAttribute:function(attr,val,unit){},getAttribute:function(attr){},getDefaultUnit:function(attr){},setRuntimeAttribute:function(attr){var start;var end;var attributes=this.attributes;this.runtimeAttributes[attr]={};var isset=function(prop){return(typeof prop!=='undefined');};
start=(isset(attributes[attr]['from']))?attributes[attr]['from']:this.getAttribute(attr);if(isset(attributes[attr]['to'])){end=attributes[attr]['to'];}else if(isset(attributes[attr]['by'])){if(start.constructor==Array){end=[];for(var i=0,len=start.length;i<len;++i){end[i]=start[i]+attributes[attr]['by'][i];}}else{end=start+attributes[attr]['by'];}}
this.runtimeAttributes[attr].start=start;this.runtimeAttributes[attr].end=end;this.runtimeAttributes[attr].unit=(isset(attributes[attr].unit))?attributes[attr]['unit']:this.getDefaultUnit(attr);},init:function(el,attributes,duration,method){var isAnimated=false;var startTime=null;var actualFrames=0;el=YAHOO.util.Dom.get(el);this.attributes=attributes||{};this.duration=duration||1;this.method=method||YAHOO.util.Easing.easeNone;this.useSeconds=true;this.currentFrame=0;this.totalFrames=YAHOO.util.AnimMgr.fps;this.getEl=function(){return el;};this.isAnimated=function(){return isAnimated;};this.getStartTime=function(){return startTime;};this.runtimeAttributes={};this.animate=function(){if(this.isAnimated()){return false;}
this.currentFrame=0;this.totalFrames=(this.useSeconds)?Math.ceil(YAHOO.util.AnimMgr.fps*this.duration):this.duration;YAHOO.util.AnimMgr.registerElement(this);};this.stop=function(finish){if(finish){this.currentFrame=this.totalFrames;this._onTween.fire();}
YAHOO.util.AnimMgr.stop(this);};var onStart=function(){this.onStart.fire();this.runtimeAttributes={};for(var attr in this.attributes){this.setRuntimeAttribute(attr);}
isAnimated=true;actualFrames=0;startTime=new Date();};var onTween=function(){var data={duration:new Date()-this.getStartTime(),currentFrame:this.currentFrame};data.toString=function(){};this.onTween.fire(data);var runtimeAttributes=this.runtimeAttributes;for(var attr in runtimeAttributes){this.setAttribute(attr,this.doMethod(attr,runtimeAttributes[attr].start,runtimeAttributes[attr].end),runtimeAttributes[attr].unit);}
actualFrames+=1;};var onComplete=function(){var actual_duration=(new Date()-startTime)/1000;var data={duration:actual_duration,frames:actualFrames,fps:actualFrames/actual_duration};data.toString=function(){return('duration: '+data.duration+', frames: '+data.frames+', fps: '+data.fps);};isAnimated=false;actualFrames=0;this.onComplete.fire(data);};this._onStart=new YAHOO.util.CustomEvent('_start',this,true);this.onStart=new YAHOO.util.CustomEvent('start',this);this.onTween=new YAHOO.util.CustomEvent('tween',this);this._onTween=new YAHOO.util.CustomEvent('_tween',this,true);this.onComplete=new YAHOO.util.CustomEvent('complete',this);this._onComplete=new YAHOO.util.CustomEvent('_complete',this,true);this._onStart.subscribe(onStart);this._onTween.subscribe(onTween);this._onComplete.subscribe(onComplete);}};YAHOO.util.AnimMgr=new function(){var thread=null;var queue=[];var tweenCount=0;this.fps=1000;this.delay=1;this.registerElement=function(tween){queue[queue.length]=tween;tweenCount+=1;tween._onStart.fire();this.start();};this.unRegister=function(tween,index){tween._onComplete.fire();index=index||getIndex(tween);if(index!=-1){queue.splice(index,1);}
tweenCount-=1;if(tweenCount<=0){this.stop();}};this.start=function(){if(thread===null){thread=setInterval(this.run,this.delay);}};this.stop=function(tween){if(!tween){clearInterval(thread);for(var i=0,len=queue.length;i<len;++i){if(queue[0].isAnimated()){this.unRegister(queue[0],0);}}queue=[];thread=null;tweenCount=0;}
else{this.unRegister(tween);}};this.run=function(){for(var i=0,len=queue.length;i<len;++i){var tween=queue[i];if(!tween||!tween.isAnimated()){continue;}
if(tween.currentFrame<tween.totalFrames||tween.totalFrames===null){tween.currentFrame+=1;if(tween.useSeconds){correctFrame(tween);}
tween._onTween.fire();}
else{YAHOO.util.AnimMgr.stop(tween,i);}}};var getIndex=function(anim){
return-1;};var correctFrame=function(tween){var frames=tween.totalFrames;var frame=tween.currentFrame;var expected=(tween.currentFrame*tween.duration*1000/tween.totalFrames);var elapsed=(new Date()-tween.getStartTime());var tweak=0;if(elapsed<tween.duration*1000){tweak=Math.round((elapsed/expected-1)*tween.currentFrame);}else{tweak=frames-(frame+1);}
if(tweak>0&&isFinite(tweak)){
tween.currentFrame+=tweak;}};};(function(){YAHOO.util.ColorAnim=function(el,attributes,duration,method){YAHOO.util.ColorAnim.superclass.constructor.call(this,el,attributes,duration,method);};YAHOO.extend(YAHOO.util.ColorAnim,YAHOO.util.Anim);var Y=YAHOO.util;var superclass=Y.ColorAnim.superclass;var proto=Y.ColorAnim.prototype;proto.toString=function(){var el=this.getEl();var id=el.id||el.tagName;return("ColorAnim "+id);};proto.patterns.color=/color$/i;proto.patterns.rgb=/^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i;proto.patterns.hex=/^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;proto.patterns.hex3=/^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;proto.patterns.transparent=/^transparent|rgba\(0, 0, 0, 0\)$/;})();
YAHOO.util.Easing={easeNone:function(t,b,c,d){return c*t/d+b;}};(function(){YAHOO.util.Scroll=function(el,attributes,duration,method){if(el){YAHOO.util.Scroll.superclass.constructor.call(this,el,attributes,duration,method);}};YAHOO.extend(YAHOO.util.Scroll,YAHOO.util.ColorAnim);var Y=YAHOO.util;var superclass=Y.Scroll.superclass;var proto=Y.Scroll.prototype;proto.toString=function(){var el=this.getEl();var id=el.id||el.tagName;return("Scroll "+id);};proto.doMethod=function(attr,start,end){var val=null;if(attr=='scroll'){val=[this.method(this.currentFrame,start[0],end[0]-start[0],this.totalFrames),this.method(this.currentFrame,start[1],end[1]-start[1],this.totalFrames)];}else{val=superclass.doMethod.call(this,attr,start,end);}
return val;};proto.getAttribute=function(attr){var val=null;var el=this.getEl();if(attr=='scroll'){val=[el.scrollLeft,el.scrollTop];}else{val=superclass.getAttribute.call(this,attr);}
return val;};proto.setAttribute=function(attr,val,unit){var el=this.getEl();if(attr=='scroll'){el.scrollLeft=val[0];el.scrollTop=val[1];}else{superclass.setAttribute.call(this,attr,val,unit);}};})();
TB={};
TB.common={trim:function(str){return str.replace(/(^\s*)|(\s*$)/g,'');},escapeHTML:function(str){var div=document.createElement('div');var text=document.createTextNode(str);div.appendChild(text);return div.innerHTML;},unescapeHTML:function(str){var div=document.createElement('div');div.innerHTML=str.replace(/<\/?[^>]+>/gi,'');return div.childNodes[0]?div.childNodes[0].nodeValue:'';},toArray:function(list,start){var array=[];for(var i=start||0;i<list.length;i++){array[array.length]=list[i];}
return array;},applyConfig:function(obj,config){if(obj&&config&&typeof config=='object'){for(var p in config){if(!YAHOO.lang.hasOwnProperty(obj,p))
obj[p]=config[p];}}
return obj;}};
TB.widget={};(function(){var Y=YAHOO.util;TB.widget.Slide=function(container,config){this.init(container,config);}
TB.widget.Slide.defConfig={slidesClass:'Slides',triggersClass:'SlideTriggers',currentClass:'Current',eventType:'click',autoPlayTimeout:5,disableAutoPlay:false};TB.widget.Slide.prototype={init:function(container,config){this.container=Y.Dom.get(container);this.config=TB.common.applyConfig(config||{},TB.widget.Slide.defConfig);try{this.slidesUL=Y.Dom.getElementsByClassName(this.config.slidesClass,'ul',this.container)[0];this.slides=this.slidesUL.getElementsByTagName('li');}catch(e){throw new Error("can't find slides!");}
this.delayTimeId=null;this.autoPlayTimeId=null;this.curSlide=-1;this.sliding=false;this.pause=false;this.onSlide=new Y.CustomEvent("onSlide",this,false,Y.CustomEvent.FLAT);if(YAHOO.lang.isFunction(this.config.onSlide)){this.onSlide.subscribe(this.config.onSlide,this,true);}
this.initSlides();this.initTriggers();if(this.slides.length>0)
this.play(1);if(!this.config.disableAutoPlay){this.autoPlay();}},initTriggers:function(){var ul=document.createElement('ul');this.container.appendChild(ul);for(var i=0;i<this.slides.length;i++){var li=document.createElement('li');li.innerHTML=i+1;ul.appendChild(li);}
ul.className=this.config.triggersClass;this.triggersUL=ul;if(this.config.eventType=='mouse'){Y.Event.on(this.triggersUL,'mouseover',this.mouseHandler,this,true);Y.Event.on(this.triggersUL,'mouseout',function(e){clearTimeout(this.delayTimeId);},this,true);}else{Y.Event.on(this.triggersUL,'click',this.clickHandler,this,true);}},initSlides:function(){Y.Event.on(this.slides,'mouseover',function(){this.pause=true;},this,true);Y.Event.on(this.slides,'mouseout',function(){this.pause=false;},this,true);Y.Dom.setStyle(this.slides,'display','none');},clickHandler:function(e){var t=Y.Event.getTarget(e);var idx=parseInt(t.innerHTML);while(t!=this.container){if(t.nodeName.toUpperCase()=="LI"){if(!this.sliding){this.play(idx,true);}
break;}else{t=t.parentNode;}}},mouseHandler:function(e){var t=Y.Event.getTarget(e);var idx=parseInt(t.innerHTML);while(t!=this.container){if(t.nodeName.toUpperCase()=="LI"){var self=this;this.delayTimeId=setTimeout(function(){self.play(idx,true);},(self.sliding?.5:.1)*1000);break;}else{t=t.parentNode;}}},play:function(n,flag){n=n-1;if(n==this.curSlide)return;var curSlide=this.curSlide>=0?this.curSlide:0;if(flag&&this.autoPlayTimeId)
clearInterval(this.autoPlayTimeId);var triggersLis=this.triggersUL.getElementsByTagName('li');triggersLis[curSlide].className='';triggersLis[n].className=this.config.currentClass;this.slide(n);this.curSlide=n;if(flag&&!this.config.disableAutoPlay)
this.autoPlay();},slide:function(n){var curSlide=this.curSlide>=0?this.curSlide:0;this.sliding=true;Y.Dom.setStyle(this.slides[curSlide],'display','none');Y.Dom.setStyle(this.slides[n],'display','block');this.sliding=false;this.onSlide.fire(n);},autoPlay:function(){var self=this;var callback=function(){if(!self.pause&&!self.sliding){var n=(self.curSlide+1)%self.slides.length+1;self.play(n,false);}}
this.autoPlayTimeId=setInterval(callback,this.config.autoPlayTimeout*1000);}}
TB.widget.ScrollSlide=function(container,config){this.init(container,config);}
YAHOO.extend(TB.widget.ScrollSlide,TB.widget.Slide,{initSlides:function(){TB.widget.ScrollSlide.superclass.initSlides.call(this);Y.Dom.setStyle(this.slides,'display','');},slide:function(n){var curSlide=this.curSlide>=0?this.curSlide:0;var args={scroll:{by:[0,this.slidesUL.offsetHeight*(n-curSlide)]}};var anim=new Y.Scroll(this.slidesUL,args,.5,Y.Easing.easeOutStrong);anim.onComplete.subscribe(function(){this.sliding=false;this.onSlide.fire(n);},this,true);anim.animate();this.sliding=true;}});TB.widget.FadeSlide=function(container,config){this.init(container,config);}
YAHOO.extend(TB.widget.FadeSlide,TB.widget.Slide,{initSlides:function(){TB.widget.FadeSlide.superclass.initSlides.call(this);Y.Dom.setStyle(this.slides,'position','absolute');Y.Dom.setStyle(this.slides,'top',this.config.slideOffsetY||0);Y.Dom.setStyle(this.slides,'left',this.config.slideOffsetX||0);Y.Dom.setStyle(this.slides,'z-index',1);},slide:function(n){if(this.curSlide==-1){Y.Dom.setStyle(this.slides[n],'display','block');}else{var curSlideLi=this.slides[this.curSlide];Y.Dom.setStyle(curSlideLi,'display','block');Y.Dom.setStyle(curSlideLi,'z-index',10);var fade=new Y.Anim(curSlideLi,{opacity:{to:0}},.5,Y.Easing.easeNone);fade.onComplete.subscribe(function(){Y.Dom.setStyle(curSlideLi,'z-index',1);Y.Dom.setStyle(curSlideLi,'display','none');Y.Dom.setStyle(curSlideLi,'opacity',1);this.sliding=false;this.onSlide.fire(n);},this,true);Y.Dom.setStyle(this.slides[n],'display','block');fade.animate();this.sliding=true;}}});})();TB.widget.SimpleSlide=new function(){this.decorate=function(container,config){if(!container)return;config=config||{};if(config.effect=='scroll'){if(navigator.product&&navigator.product=='Gecko'){if(YAHOO.util.Dom.get(container).getElementsByTagName('iframe').length>0){new TB.widget.Slide(container,config);return;}}
new TB.widget.ScrollSlide(container,config);}
else if(config.effect=='fade'){new TB.widget.FadeSlide(container,config);}
else{new TB.widget.Slide(container,config);}}}
</script>
<div id="MPB"><div id="SlidePlayer">
<ul class="Slides">
<li><A title="天极网软件频道2007年热点专题回放" href="http://www.webjx.com/"><img src="http://www.webjx.com/files/080105/1_01321TA.jpg" alt="网页教学网2007年热点专题回放"></A></li><li><A title="完全解析Windows XP SP3的最新特性" href="http://www.webjx.com/"><img src="http://www.webjx.com/files/080104/1_150543119.jpg" alt="完全解析Windows XP SP3的最新特性"></A></li><li><A title="视频转换宝典在手 视频格式想转就转不求人" href="http://www.webjx.com/"><img src="http://www.webjx.com/files/080103/1_224351309.jpg" alt="视频转换宝典在手 视频格式想转就转不求人"></A></li><li><A title="3DsMAX专区全新上线" href="http://www.webjx.com/"><img src="http://www.webjx.com/files/080103/1_22204C61.jpg" alt="3DsMAX专区全新上线"></A></li><li><A title="谁适合你?各大安全工具最新版功能比拼" href="http://www.webjx.com/"><img src="http://www.webjx.com/files/080102/1_0T012Y8.jpg" alt="谁适合你?各大安全工具最新版功能比拼"></A></li>
<li><a title="2007中国IT网络调查 火热进行中" href="http://www.webjx.com/"><img src="http://www.webjx.com/files/litimg/071031/00261514R3.jpg" alt="2007中国IT网络调查 火热进行中" border="0"></a></li>
</ul>
</div></div>
<script type="text/javascript">
TB.widget.SimpleSlide.decorate('SlidePlayer', {eventType:'mouse', effect:'scroll'});
</script>
</body>
</html>

网页左右浮动广告特效代码

类似新浪首页两边漂浮的广告图片,随滚动条上下移动,兼容1024和768窗口
<!-- http://www.webjx.com/ -->
<!-- 把下列代码加到<body>区域内 -->
<script>
var delta=0.15
var collection;
function floaters() {
this.items    = [];
this.addItem    = function(id,x,y,content)
{
document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute;  width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
var newItem                = {};
newItem.object            = document.getElementById(id);
newItem.x                = x;
newItem.y                = y;
this.items[this.items.length]        = newItem;
}
this.play    = function()
{
collection                = this.items
setInterval('play()',10);
}
}
function play()
{
if(screen.width<=800)
{
for(var i=0;i<collection.length;i++)
{
collection[i].object.style.display    = 'none';
}
return;
}
for(var i=0;i<collection.length;i++)
{
var followObj        = collection[i].object;
var followObj_x        = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
var followObj_y        = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
followObj.style.left=followObj.offsetLeft+dx;
}
if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
followObj.style.top=followObj.offsetTop+dy;
}
followObj.style.display    = '';
}
}
var theFloaters        = new floaters();
theFloaters.addItem('followDiv1','document.body.clientWidth-106',80,'<a href=#  target=_blank><img src=/img/200406301.jpg border=0></a><br><br><a href=#  target=_blank><img src=/img/200406301.jpg  border=0>');
theFloaters.addItem('followDiv2',6,80,'<a href=#  target=_blank><img src=/img/200406301.jpg border=0></a><br><br><a href=http://www.webjx.com  target=_blank><img src=/img/200406302.jpg  border=0><br>');
theFloaters.play();
</script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
连续向上滚动的图片特效

<!-- http://www.webjx.com/ -->
<!-- 把下列代码加到<body>区域内 -->
<!-- 指向链接图片url -->
<base href="http://www.webjx.com">
<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 定义图片 -->
<img src="/img/link.gif">
<img src="/img/link1.gif">
<img src="/img/link2.gif">
<img src="/img/link3.gif">
<img src="/img/link4.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

JS的图片幻灯片特效代码

 

  评论这张
 
阅读(24)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017