惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
L
Lohrmann on Cybersecurity
aimingoo的专栏
aimingoo的专栏
V
V2EX
S
Security Affairs
T
Threatpost
C
CXSECURITY Database RSS Feed - CXSecurity.com
IT之家
IT之家
J
Java Code Geeks
The Register - Security
The Register - Security
U
Unit 42
C
CERT Recently Published Vulnerability Notes
月光博客
月光博客
A
About on SuperTechFans
H
Hackread – Cybersecurity News, Data Breaches, AI and More
T
The Blog of Author Tim Ferriss
Cisco Talos Blog
Cisco Talos Blog
Project Zero
Project Zero
S
Schneier on Security
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
D
DataBreaches.Net
博客园 - 司徒正美
V
Vulnerabilities – Threatpost
T
Tor Project blog
Security Latest
Security Latest
T
The Exploit Database - CXSecurity.com
T
Threat Research - Cisco Blogs
Scott Helme
Scott Helme
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
M
MIT News - Artificial intelligence
云风的 BLOG
云风的 BLOG
小众软件
小众软件
L
LangChain Blog
Attack and Defense Labs
Attack and Defense Labs
Recent Commits to openclaw:main
Recent Commits to openclaw:main
P
Palo Alto Networks Blog
A
Arctic Wolf
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
C
Cyber Attacks, Cyber Crime and Cyber Security
博客园 - 叶小钗
D
Darknet – Hacking Tools, Hacker News & Cyber Security
L
LINUX DO - 最新话题
MongoDB | Blog
MongoDB | Blog
Webroot Blog
Webroot Blog
H
Hacker News: Front Page
Know Your Adversary
Know Your Adversary
Spread Privacy
Spread Privacy
AWS News Blog
AWS News Blog
Engineering at Meta
Engineering at Meta

博客园 - Tobin

41岁的大龄程序员,苟着苟着,要为以后做打算了 UC_Center整合单点登录后远程注册不激活问题的解决办法 AspExe - a small ASP.NET compiler and executor for document generation 在as3中Embed(绑定)flash动画元素 - Tobin - 博客园 Embedding Resources with AS3 Configure the max limit for concurrent TCP connections [转]翻译:使用.net3.5的缓存池和SocketAsyncEventArgs类创建socket服务器 强制将IE,Chrome设置为指定兼容模式来解析(转) - Tobin - 博客园 工商银行,千万别用,转账不成功一样收手续费 MySQL vs NoSQL 效率与成本之争(转) 使用ASP.NET Global.asax 文件(转) [MySql识记]create utf8 database - Tobin npgsql连接postgresql数据库 由浅到深了解JavaScript类[转过来的收藏] javascript改变this指针 javascript操作cookie实例 [图解] 你不知道的 JavaScript - “this”(转) 对与list<>泛型的一些操作方法 关于游戏开发中的A*/A-star的寻路算法的问题
哪个美女最漂亮,自己写的js图片自适应切换
Tobin · 2008-07-10 · via 博客园 - Tobin

自己手写了个图片自适应切换,功能上很简单,大家也能看到,很明显,代码非常冗余.

<script type="text/javascript">
var imgSrcList="http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_1.jpg,http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_2.jpg,http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_3.jpg,http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_4.jpg,http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_5.jpg";
var titleList="美女1,美女2,美女3,美女4,美女5";
var urlList="tobin.cnblogs.com/1,tobin.cnblogs.com/2,tobin.cnblogs.com/3,tobin.cnblogs.com/4,tobin.cnblogs.com/5";
var imgArray=imgSrcList.split(",");//转换成数组
var titleArray=titleList.split(",");//转换成数组
var urlArray=urlList.split(",");//转换成数组
var mainWidth,mainHeight;
var intervalTimer;
var picIndex=-1;
window.onload
=function()
{
//获取外框div的宽高
mainWidth= document.getElementById("PicShowMain").offsetWidth;
mainHeight
=document.getElementById("PicShowMain").offsetHeight;
document.getElementById(
"PicMain").src=imgArray[picIndex+1];
//调整图片大小
ChangePicSize();
document.getElementById(
"PicShowText").href=urlArray[picIndex+1];
document.getElementById(
"PicShowText").title=document.getElementById("PicShowText").innerHTML=titleArray[picIndex+1];
picIndex
=0;
//每隔6秒切换一次
intervalTimer=setInterval(ChangePic,6000);
}

function ChangePic()
{
picIndex
++;
//设置滤镜使图片有效果,IE支持
document.getElementById("PicMain").filters.item(0).transition=Math.floor(Math.random()*23);
document.getElementById(
"PicMain").filters.item(0).Apply();
document.getElementById(
"PicMain").src=imgArray[picIndex];
ChangePicSize();
document.getElementById(
"PicShowText").href=urlArray[picIndex];
document.getElementById(
"PicShowText").title=document.getElementById("PicShowText").innerHTML=titleArray[picIndex];
document.getElementById(
"PicMain").filters.item(0).Play();
if(picIndex>=imgArray.length-1)
picIndex
=-1;
}

function GetPicSize(picUrl)
{
//创建一个image对象,获取图片实际的宽高,放到数组中返回
var size=new Array();
var img=new Image();
img.src
=picUrl;
size[
0]=parseInt(img.width);
size[
1]=parseInt(img.height);
return size;
}

//根据图片实际大小和外框大小,调整img标签的大小,使图片放大/缩小但不变形
function ChangePicSize()
{
var picsize=GetPicSize(document.getElementById("PicMain").src);
if(mainWidth<=picsize[0]&&mainHeight>=picsize[1])
{
document.getElementById(
"PicMain").width=mainWidth;
document.getElementById(
"PicMain").removeAttribute("height");
}

else if(mainWidth>=picsize[0]&&mainHeight<=picsize[1])
{
document.getElementById(
"PicMain").height=mainHeight;
document.getElementById(
"PicMain").removeAttribute("width");
}

else if(mainWidth<=picsize[0]&&mainHeight<=picsize[1])
{
if(picsize[0]/mainWidth
<picsize[1]/mainHeight)
{
document.getElementById(
"PicMain").height=mainHeight;
document.getElementById(
"PicMain").removeAttribute("width");
}

else
{
document.getElementById(
"PicMain").width=mainWidth;
document.getElementById(
"PicMain").removeAttribute("height");
}

}

else if(mainWidth>=picsize[0]&&mainHeight>=picsize[1])
{
if(mainWidth/picsize[0]<mainHeight/picsize[1])
{
document.getElementById(
"PicMain").width=mainWidth;
document.getElementById(
"PicMain").removeAttribute("height");
}

else
{
document.getElementById(
"PicMain").height=mainHeight;
document.getElementById(
"PicMain").removeAttribute("width");
}

}

}

//鼠标移动到图片停止切换
function mmin()
{
clearInterval(intervalTimer);
}

//鼠标移开图片继续切换
function mmout()
{
intervalTimer
=setInterval(ChangePic,6000);
}

</script>
<div style="width: 400px;">
<div id="PicShowMain" style="overflow: hidden; width: 400px; height: 300px; text-align: center;"><img id="PicMain" onmouseover="mmin()" onmouseout="mmout()" alt="" src="http://www.cnblogs.com/images/cnblogs_com/tobin/144465/r_1.jpg" style="filter: revealTrans(duration=3,transition=100)" border="0" /></div>
<div><id="PicShowText" href="http://www.cnblogs.com/tobin/admin/EditPosts.aspx?opt=1#"></a></div>
</div>

代码很简单,没什么特别的地方:

准备写成这种形式:

<script type="text/javascript">
var PicEngine=function()
{
//.
this.ChangePic=function()
{
//.
}

this.GetPicSize=function()
{
//.
}

this.ChangePicSize=function()
{
//.
}

}

</script>

但实在是个人对这个this的用法确实不了解。希望有高手能帮我封装一下。
这个只是最简单的,等我学会了这种方式的初始化以后会写成asp.net 控件,原来封装了一个flash+js实现的,可惜flash不是俺写的,链接不好控制,所以准备自己动手写一个。