Wordpress外贸企业主题, Wp企业主题, wordpress企业主题, wordpress主题定制, PHP代码, ASP代码, 精选JS代码, WORDPRESS, 网站SEO,Flash焦点广告,JS焦点广告,CSS技巧 | 酷码资源 » javascript http://www.3code.cn Wordpress外贸企业主题, Wp企业主题, wordpress企业主题, wordpress主题定制, PHP代码,ASP代码,精选JS代码,WORDPRESS,网站SEO,Flash焦点广告,JS焦点广告,CSS技巧 Tue, 07 Sep 2010 10:23:38 +0000 http://wordpress.org/?v=2.8.5 zh-cn hourly 1 jQuery加载远程PHP文件 http://www.3code.cn/jquery-load-phpfile/ http://www.3code.cn/jquery-load-phpfile/#comments Thu, 13 May 2010 09:09:10 +0000 admin http://www.3code.cn/?p=1648 最近有一个跨域加载远程PHP文件需求，需要将跨域远程的用户信息加载到本地使用，研究和参考相关资料，非常简单，其它后缀类似文件(asp,js)一样。

解决方案如下：

需要两个文件：提供信息的PHP文件(访问的远程文件)，加载远程文件的JS文件(获取或处理远程信息)

------------------------------------------------------------------

infoBox.php(提供远程信息，与JS文件不在同一域)

<?php

$InfoBox = array('url'=>'biuuu.com','title'=>'必优博客');

echo 'var data=' . json_encode($InfoBox) . ';';

?>

将数据组装数组，通过PHP内置函数json_encode将数组转化成json数组，方便数组内容被远程调用。

------------------------------------------------------------------

box.js(调用远程PHP文件JS类)

var box = {};

var remoteUrl = 'http://www.biuuu.com/infoBox.php';//远程调用URL

box.showBoxInfo = function() {

jQuery.getScript(remoteUrl, function(){

var boxInfoWrapper = jQuery('#boxInfoWrapper');

var html = box.getBoxHtml(data.url,data.title);

boxInfoWrapper.html(html);

});

}

box.getBoxHtml = function(url,title){

return '<div><a href="'+url+'">'+title+'</a></div>';

}

remoteUrl就是前面infoBox.php的远程路径，通过getScript直接调用。其中boxInfoWrapper就是要显示信息 DIV的ID。

------------------------------------------------------------------

test.html(测试HTML文件，包含JQuery与前面的box.js类)

<script src="jquery-1.2.6.js" type="text/javascript"></script>

<script src="box.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function (){

box.showBoxInfo();

});

</script>

<div id="boxInfoWrapper"></div>

jQuery.getScript跨域加载远程PHP文件实现过程非常简单，扩展性非常性，可以实现非常强大的功能，其它应用可以更深入的实践，供参考。

转载自 必优博客 http://www.biuuu.com/

]]> http://www.3code.cn/jquery-load-phpfile/feed/ 0 很酷的伸缩导航菜单 http://www.3code.cn/cool-js-menu/ http://www.3code.cn/cool-js-menu/#comments Tue, 11 May 2010 05:56:21 +0000 admin http://www.3code.cn/?p=1646 <!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" />
<style type="text/css">
*{margin:0; padding:0;}
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666;}
#box{width:200px; border:1px solid #ccc;}
.title{ font-size:12px; padding-left:3px; height:20px; border-bottom:1px solid #fff; background:#000; line-height:20px; color:#FFF; cursor:pointer;}
.content{ padding:5px; height:150px;}
</style>
<script type="text/javascript">
function flexMenu(id)
{
var $id = document.getElementById(id);
var titleList = $id.getElementsByTagName('h2');
var contentList = $id.getElementsByTagName('div');
titleList[titleList.length-1].style.border = 'none';
for(var i=0;i<titleList.length;i++)
{
titleList[i].onclick = function()
{
for(var a=0;a<contentList.length;a++)
{
contentList[a].style.display = 'none';
}
if(this.nextSibling.nodeType=='3')
{
this.nextSibling.nextSibling.style.display = '';
}else
{
this.nextSibling.style.display = '';
}
}
}
}
window.onload = function(){ flexMenu('box')}
</script>
<title>很酷的伸缩导航菜单</title>
</head>
<body>
<div id="box">
<h2>站长特效</h2>
<div ><a href="http://www.moerdao.com">特效频道子菜单</a></div>
<h2>网页特效</h2>
<div style="display:none;"><a href="http://www.moerdao.com">网页特效子菜单</a></div>
<h2>广告代码</h2>

<div style="display:none;"><a href="http://www.3code.cn">广告代码子菜单</a></div>
</div>
</body>
</html>

]]> http://www.3code.cn/cool-js-menu/feed/ 0 简单易用的JS+CSS伸缩菜单 http://www.3code.cn/js-css-menu-2/ http://www.3code.cn/js-css-menu-2/#comments Tue, 11 May 2010 05:27:58 +0000 admin http://www.3code.cn/?p=1643 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>简单易用的JS+CSS伸缩菜单-3code.cn/</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none;
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F;
}
#navigation > ul > li > a{
display:block;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515;
border-right:1px solid #711515;
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{
background-color:#990020;
color:#ffff00;
}

#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
#navigation ul li ul.myHide{
display:none;
}
#navigation ul li ul.myShow{
display:block;
}
-->
</style>
<script language="javascript">
function change(){
//通过父元素li，找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.style.display == "none")
oSecondDiv.style.display = "";
else
oSecondDiv.className = "none";
}
window.onload = function(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;    //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild;    //找到超链接
oA.onclick = change;    //动态添加点击函数
}
}
}
</script>
</head>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul>
<li><a href="/">Basketball</a></li>
<li><a href="/">Football</a></li>
<li><a href="/">Volleyball</a></li>
</ul>
</li>
<li><a href="/">Weather</a>
<ul>
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="/">Contact Me</a></li>
</ul>
</div>
</body>
</html>

]]> http://www.3code.cn/js-css-menu-2/feed/ 0 一个form多个提交按钮,分别提交到多页面 http://www.3code.cn/oneform-manysubmit/ http://www.3code.cn/oneform-manysubmit/#comments Mon, 26 Apr 2010 04:15:08 +0000 admin http://www.3code.cn/?p=1625 <html>
  • <head>
  • <script type="text/javascript">
  • function save(){
  • document.form1.action="B.jsp";
  • document.form1.submit();
  • }
  • function send(){
  • document.form1.action="C.jsp";
  • document.form1.submit();
  • }
  • </script>
  • </head>
  • <body>
  • <form name="form1">
  • <input type="text" name="username" value="scott">
  • <input type="button" value="发送" onclick="send();">
  • <input type="button" value="保存" onclick="save();">
  • </form>
  • </body>
  • </html>
    • ]]>     http://www.3code.cn/oneform-manysubmit/feed/ 0     JS间隔状态栏跑马灯效果 http://www.3code.cn/js-pmd/ http://www.3code.cn/js-pmd/#comments Wed, 16 Dec 2009 09:43:49 +0000 admin http://www.3code.cn/?p=1311 区域中 function scrollit(seed) { var m1 = "HI：你 好! "; var m2 = "欢 迎 访 问 南 京 有 线 电 视 台 网 站 "; var m3 = "请 多 提 意 见，谢 谢! "; var m4 = "E-MAIL:webmaster@hrw.cn";]]> JS间隔状态栏跑马灯效果说明:
    第一步:把如下代码加入<head>区域中
    <SCRIPT language="JavaScript">
    <!--
    function scrollit(seed) {
    var m1 = "HI：你 好!             ";
    var m2 = "欢 迎 访 问 南 京 有 线 电 视 台 网 站        ";
    var m3 = "请 多 提 意 见，谢 谢!          ";
    var m4 = "E-MAIL:webmaster@hrw.cn";
    var m5 = "Upper1/default.htm";
    var msg=m1+m2+m3+m4+m5;
    var out = " ";
    var c = 1;
    if (seed > 100) {
    seed--;
    cmd="scrollit("+seed+")";
    timerTwo=window.setTimeout(cmd,100);
    }
    else if (seed <= 100 && seed > 0) {
    for (c=0 ; c < seed ; c++) {
    out+=" ";
    }
    out+=msg;
    seed--;
    window.status=out;
    cmd="scrollit("+seed+")";
    timerTwo=window.setTimeout(cmd,100);
    }
    else if (seed <= 0) {
    if (-seed < msg.length) {
    out+=msg.substring(-seed,msg.length);
    seed--;
    window.status=out;
    cmd="scrollit("+seed+")";
    timerTwo=window.setTimeout(cmd,100);
    }
    else {
    window.status=" ";
    timerTwo=window.setTimeout("scrollit(100)",75);
    }
    }
    }

    //-->

    </SCRIPT>

    第二步:把如下代码加入<body>区域中
    <body background=bag.gif onLoad="scrollit(100)">

    ]]>     http://www.3code.cn/js-pmd/feed/ 0     js禁止图片下载的代码 http://www.3code.cn/js-image-nodownload/ http://www.3code.cn/js-image-nodownload/#comments Wed, 16 Dec 2009 09:41:44 +0000 admin http://www.3code.cn/?p=1309 脚本说明:
    把如下代码加入<body>区域中
    <A HREF="javascript:void(0)" onMouseover="alert('对不起,图片不能随便下载!')"><IMG SRC="j2.gif" Align="center" Border="0" width="99" height="50"></A>

    ]]>     http://www.3code.cn/js-image-nodownload/feed/ 0     js显示器分辨率检测代码 http://www.3code.cn/js-display/ http://www.3code.cn/js-display/#comments Wed, 16 Dec 2009 09:40:20 +0000 admin http://www.3code.cn/?p=1307 区域中: ]]> 利用此脚本可以检测电脑显示器的分辨率：

    脚本说明：
    把如下代码加入<body>区域中:
    <script language="JavaScript1.2">
    <!--
    var correctwidth=1024
    var correctheight=768
    if (screen.width!=correctwidth||screen.height!=correctheight)
    document.write("本站最佳分辨率: "+correctwidth+"*"+correctheight+". 你当前的分辨率是:"+screen.width+"*"+screen.height+"。设置合适的分辨率才能取得最佳的显示效果！")
    //-->
    </script>

    ]]>     http://www.3code.cn/js-display/feed/ 0     js七种风格显示日期时间 http://www.3code.cn/js-datetime-7/ http://www.3code.cn/js-datetime-7/#comments Wed, 16 Dec 2009 09:37:10 +0000 admin http://www.3code.cn/?p=1304 风格一：星期三,12月16日,2009年

    风格二：5:32:58下午

    风格三：星期三,12月16日,2009年 5:32:58下午

    风格四：12/16/09

    风格五:   17:32:58

    风格六:   Wed Dec 16 2009 17:32:58 GMT+0800

    风格七:    5.0 (Windows; zh-CN)

    说明:
    第一步:把如下代码加入<head>区域中

    <SCRIPT language=javascript author=luxiaoqing><!--
    function initArray(){for(i=0;i<initArray.arguments.length;i++)
    this[i]=initArray.arguments[i];}var isnMonths=new initArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");var isnDays=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");today=new Date();hrs=today.getHours();min=today.getMinutes();sec=today.getSeconds();clckh=""+((hrs>12)?hrs-12:hrs);
    clckm=((min<10)?"0":"")+min;clcks=((sec<10)?"0":"")+sec;clck=(hrs>=12)?"下午":"上午";var stnr="";var ns="0123456789";var a="";

    //-->

    </SCRIPT>

    第二步:把如下代码加入区域中
    <SCRIPT language=javascript><!--
    function getFullYear(d){//d is a date object
    yr=d.getYear();if(yr<1000)
    yr+=1900;return yr;}document.write("<table width=486>");//don't delete this line

    /* 每一段代表一种风格,不需要的删除即可*/

    document.write("<TR><TD VALIGN=TOP><P>风格一<P></TD><TD VALIGN=TOP>"+isnDays[today.getDay()]
    +","+isnMonths[today.getMonth()]+""+today.getDate()+"日,"
    +getFullYear(today)+"年<P>");document.write("<TR><TD VALIGN=TOP>风格二<P></TD><TD VALIGN=TOP>"+clckh+":"+clckm
    +":"+clcks+""+clck+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格三<P></TD><TD VALIGN=TOP>"
    +isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""
    +today.getDate()+"日,"+getFullYear(today)+"年 "+clckh+":"+clckm+":"
    +clcks+""+clck+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格四<P></TD><TD VALIGN=TOP>"
    +(today.getMonth()+1)+"/"+today.getDate()+"/"
    +(getFullYear(today)+"").substring(2,4)+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格五:<P></TD><TD VALIGN=TOP>"+hrs+":"+clckm+":"+clcks+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格六:<P></TD><TD>"+today+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格七<P></TD><TD>"+navigator.appName+"<P></TD></TR>");document.write("<TR><TD VALIGN=TOP>风格八:<P></TD><TD VALIGN=TOP>"+navigator.appVersion+"<P></TD></TR>");document.write("</table>"); // don't delete this line
    //-->
    </SCRIPT>

    ]]>     http://www.3code.cn/js-datetime-7/feed/ 0     QQ在线客服代码MSN,SKPYE,YAHOO,ALIBABA http://www.3code.cn/qq-msn-skpye-online-talk/ http://www.3code.cn/qq-msn-skpye-online-talk/#comments Fri, 11 Dec 2009 10:15:52 +0000 admin http://www.3code.cn/?p=1277 QQ在线客服代码,MSN在线代码,SKYPE,贸易通在线代码
    QQ在线咨询代码,MSN在线代码,雅虎通在线代码,贸易通在线代码

    即时通讯比如雅虎通,QQ,MSN,AOLICQ,goolgeTALK,阿里巴巴贸易通,淘宝旺旺等大大方便了我们的沟通和工作,在web2.0的时代,在你的网站网页上添加雅虎通,腾讯QQ,微软MSN,AOLICQ,goolgeTALK,阿里巴巴贸易通,淘宝旺旺在线状态,让用户在你的网站上查看你的雅虎通,腾讯QQ,微软MSN,AOLICQ,goolgeTALK,阿里巴巴贸易通,淘宝旺旺在线状态,直接与你沟通,就显得很重要了,下面我总结了几款常用到的在线状态代码,希望在你添加到网页时用到.
    1.如何在网页上显示腾讯QQ在线洽谈?
    QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码)
    (将123456换成你的号码,site后面换成你的网站就可以了)

    <atarget="blank"href="http://wpa.qq.com /msgrd?V=1&Uin=12345678&Site=酷码资源&Menu=yes">< imgborder="0"SRC=http://wpa.qq.com/pa?p=1:12345678:6alt="点击这里给我发消息"align="absmiddle"></a>

    更多的生成显示QQ在线状态的代码,请查看腾讯官方网站
    http://imis.qq.com/webpresence/code.shtml
    你只需要填写你的号码,网站名称以及提示就可以点击生成就可以生成QQ在线状态的代码,拷贝生成的代码加入网页即可

    2.阿里巴巴贸易通在线状态代码生成,chqllm改成你的ID就行了,还有ALT改成你的内容
    <atarget=_blankhref="http://scs1.sh1.china.alibaba.com /msg.atc?v=1&uid=mengsajewel"><imgborder=0src="http: //scs1.sh1.china.alibaba.com/online.atc?v=1&uid=chqllm&s=2"alt=" 锦隆电器配件厂陈先生"align="absmiddle"></a>

    更多的阿里巴巴贸易通在线状态代码生成样式,请查看阿里巴巴官方网站
    http://club.china.alibaba.com/club/block/alitalk/alitalkfire.html

    3.skype在线状态代码生成
    将venky1979换成你的skypeID就可以了,需要在skype个人账户里设置对任何人显示状态
    <ahref="skype:venky1979?call"onclick="returnskypeCheck();"><imgsrc=http://mystatus.skype.com/smallclassic/venky1979style="border:none;"alt="Callme!"/></a>

    更多的skype在线状态代码生成样式,请查看skype的官方网站
    http://www.skype.com/share/buttons/

    4.如何生成MSN在线状态代码,可以设置自定义显示图片,不过检测速度有点慢,另外一部分人在ｍｓｎ的配置中，设置了不加好友就不显示在线。这是为了个人隐私保护，但这样会显示状态未知或者离线。如果你不介意别人看到你，就开启那个选项就好了。

    <A href="msnim:chat?contact=gbcxxm@hotmail.com"><IMG SRC="http://www.9cweb.com/imgnew/msn.jpg"></A>

    ]]>     http://www.3code.cn/qq-msn-skpye-online-talk/feed/ 0     设为首页与加入收藏-兼容Firefox IE http://www.3code.cn/home-favorite-firefox-ie/ http://www.3code.cn/home-favorite-firefox-ie/#comments Mon, 23 Nov 2009 02:24:24 +0000 admin http://www.3code.cn/?p=667 设为首页与加入收藏-兼容Firefox IE

    将下面的代码放在网页的头部。
    <!--/设为首页 加入收藏 兼容Firefox IE-->
    <script language="javascript" type="text/javascript">
    function addCookie() {　 // 加入收藏
    if (document.all) {
    window.external.addFavorite('http://www.3code.cn', '酷码资源-PHP ASP CSS JS WORDPRESS 代码');
    }
    else if (window.sidebar) {
    window.sidebar.addPanel('酷码资源-PHP ASP CSS JS WORDPRESS 代码','http://www.3code.cn', "");
    }
    }

    function setHomepage() {　 // 设为首页
    if (document.all) {
    document.body.style.behavior = 'url(#default#homepage)';
    document.body.setHomePage('http://www.3code.cn');　　　　　　　　　　　 }
    else if (window.sidebar) {
    if (window.netscape) {
    try {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    }
    catch (e) {
    alert("该操作被浏览器拒绝，假如想启用该功能，请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true");
    }
    }
    var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
    prefs.setCharPref('browser.startup.homepage','http://www.3code.cn');
    } }
    </script>

    下面是引用代码:

    <a href="javascript:void(0)" onclick="setHomepage()">设为首页</a> |
    <a href="javascript:void(0)"onclick="addCookie()">加入收藏</a>

    ]]>     http://www.3code.cn/home-favorite-firefox-ie/feed/ 0     JS显示当前年月日与星期的函数 http://www.3code.cn/js-date-week/ http://www.3code.cn/js-date-week/#comments Wed, 18 Nov 2009 08:12:01 +0000 admin http://www.3code.cn/?p=566 dispDate(0)]]> JS显示当前年月日与星期的函数

    <script language=javascript>
function dispDate(dateVal) {
DaystoAdd=dateVal
TodaysDate = new Date();
TodaysDay = new Array('Sunday', 'Monday', 'Tuesday','Wednesday', 'Thursday', 'Friday', 'Saturday');
TodaysMonth = new Array('January', 'February', 'March','April', 'May','June', 'July', 'August', 'September','October', 'November', 'December');
DaysinMonth = new Array('31', '28', '31', '30', '31', '30', '31', '31', '30', '31', '30', '31');
function LeapYearTest (Year) {
if (((Year % 400)==0) || (((Year % 100)!=0) && (Year % 4)==0)) {
return true;
}
else {
return false;
}
}
CurrentYear = TodaysDate.getYear();
if (CurrentYear < 2000)
CurrentYear = CurrentYear + 1900;
currentMonth = TodaysDate.getMonth();
DayOffset = TodaysDate.getDay();
currentDay = TodaysDate.getDate();
month = TodaysMonth[currentMonth];
if (month == 'February') {
if (((CurrentYear % 4)==0) && ((CurrentYear % 100)!=0) || ((CurrentYear % 400)==0)) {
DaysinMonth[1] = 29;
}
else {
DaysinMonth[1] = 28;
}
}
days = DaysinMonth[currentMonth];
currentDay += DaystoAdd;
if (currentDay > days) {
if (currentMonth == 11) {
currentMonth = 0;
month = TodaysMonth[currentMonth];
CurrentYear = CurrentYear + 1
}
else {
month =
TodaysMonth[currentMonth+1];
}
currentDay = currentDay - days;
}
DayOffset += DaystoAdd;
function offsettheDate (offsetCurrentDay) {
if (offsetCurrentDay > 6) {
offsetCurrentDay -= 6;
DayOffset = TodaysDay[offsetCurrentDay-1];
offsettheDate(offsetCurrentDay-1);
}
else {
DayOffset = TodaysDay[offsetCurrentDay];
return true;
}
}
offsettheDate(DayOffset);TheDate = DayOffset + ', ';
TheDate += month + ' ';
TheDate += currentDay + ', ';
if (CurrentYear<100) CurrentYear="19" + CurrentYear;
TheDate += CurrentYear;
document.write(' '+TheDate);
}
</script>


    调用方法：

    <script language=javascript>dispDate(0)</script>
    ]]>     http://www.3code.cn/js-date-week/feed/ 0     仿FLASH的js焦点图片切换效果 http://www.3code.cn/js-flash-image2/ http://www.3code.cn/js-flash-image2/#comments Wed, 18 Nov 2009 06:46:22 +0000 admin http://www.3code.cn/?p=562 仿FLASH的js焦点图片切换效果

    仿FLASH的js焦点图片切换效果 很不错，很适合与PHP ASP 等动态语言结合

    js焦点广告图片切换效果

    js焦点广告图片切换效果




    下载此效果

    ]]>     http://www.3code.cn/js-flash-image2/feed/ 0     js+css控制图片展示效果 http://www.3code.cn/js-css-image-show/ http://www.3code.cn/js-css-image-show/#comments Wed, 18 Nov 2009 02:51:43 +0000 admin http://www.3code.cn/?p=559

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html lang=it dir=ltr xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>css+js控制图片展示</title>
    <style>
    body{
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    font: 70% verdana, geneva, arial, helvetica, sans-serif;
    color: #000;
    padding-top: 0px;
    text-align: center
    }
    #outer{
    padding-right: 0px;
    padding-left: 0px;
    background: url(/images/bg-outer.gif) repeat-y center top;
    padding-bottom: 0px;
    margin: 0px auto;
    width: 780px;
    padding-top: 0px;
    text-align: left
    }
    #wrapper{
    background: #fff;
    margin: 0px 4px
    }
    #content{
    padding-right: 0px;
    padding-left: 0px;
    min-height: 400px;
    padding-bottom: 20px;
    margin: 20px 30px;
    padding-top: 0px;
    position: relative
    }
    #focus{
    border-right: #ccc 2px solid;
    padding-right: 0px;
    border-top: #ccc 2px solid;
    padding-left: 0px;
    min-height: 188px;
    background: url(/images/tile.gif) #eee repeat-y left top;
    padding-bottom: 10px;
    margin: 25px 0px 30px;
    border-left: #ccc 2px solid;
    width: 100%;
    padding-top: 15px;
    border-bottom: #ccc 2px solid;
    position: relative;
    height: 188px
    }
    #beni{
    padding-right: 0px;
    padding-left: 0px;
    left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    width: 250px;
    padding-top: 0px;
    list-style-type: none;
    position: absolute;
    top: 15px
    }
    #beni li{
    border-top: #fff 1px solid;
    font-size: 12px;
    float: left;
    width: 250px;
    text-indent: 24px;
    line-height: 26px
    }
    #beni li.first{
    border-top: 0px
    }
    #beni li a{
    border-right: 0px;
    padding-right: 0px;
    border-top: 0px;
    display: block;
    padding-left: 0px;
    font-weight: bold;
    background: #eee;
    padding-bottom: 0px;
    margin: 0px;
    border-left: 0px;
    padding-top: 0px;
    border-bottom: 0px;
    text-decoration: none
    }
    #beni li a:hover{
    background: #f9f9f9
    }
    #description{
    width:420px;
    height:188px;
    overflow:hidden;
    float:right;
    margin-right:15px;
    }
    </STYLE>
    <script>
    window.onload=function(){
    var ele=document.getElementById("description");
    var w=ele.clientWidth;
    var n=20,t=20;
    var timers=new Array(n);
    var c=document.getElementById("beni").getElementsByTagName("li");
    for(var i=0;i<c.length;i++){
    c[i].index=i;
    c[i].onmouseover=doSlide;
    }
    c=null;
    function doSlide(){
    var x=ele.scrollLeft;
    var d=this.index*w-x;
    if(!d) return;
    for(var i=0;i<n;i++)(function(){
    if(timers[i])
    clearTimeout(timers[i]);
    var j=i;
    timers[i]=setTimeout(function(){
    ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));
    },(i+1)*t);
    })();
    }
    }
    </script>
    </head>
    <body id=home>
    <div id=outer>
    <div id=wrapper>
    <div id=content>
    <div id=focus>

    <ul id=beni>
    <li><a href="#">opere e oggetti d'arte</a></li>
    <li><a href="#">architettzure</a></li>
    <li><a href="#">reperti archeologici</a></li>
    <li><a href="#">stampe e matrici di incisione</a></li>
    <li><a href="#">fotografie</a></li>

    <li><a href="#">beni etnoantropologici</a></li>
    </ul>
    <div id=description>
    <img src="http://www.lanrentuku.com/down/js/images/12447871590.jpg" />
    </div>
    </div>
    </div>
    </div>

    </div>
    </body>
    </html>

    ]]>     http://www.3code.cn/js-css-image-show/feed/ 0     网页禁止左右键及跳转的JS代码 http://www.3code.cn/js-noclick/ http://www.3code.cn/js-noclick/#comments Fri, 13 Nov 2009 14:34:01 +0000 admin http://www.3code.cn/?p=469 此代码可以让人无法使用右键。 ]]> 网页禁止左右键及跳转的JS代码
    都是小东西，却比较实用。
    禁止右键
    <body oncontextmenu="return false">
    此代码可以让人无法使用右键
    禁止左右键
    <body oncontextmenu="return false" onselectstart="return false">
    此代码可让人无法使用左右键，从而保护网页文件
    网页跳转
    <meta http-equiv="refresh" content="跳转的时间;url=跳转的网址">
    此代码可以让网页在一定的时间内，跳转到另外一个网页上，其中content="
    为跳转前停暂的秒数，rul= 为跳转的网址

    ]]>     http://www.3code.cn/js-noclick/feed/ 0     图片按比例缩放不变形的JS代码 http://www.3code.cn/js-pic-bubianxing/ http://www.3code.cn/js-pic-bubianxing/#comments Fri, 13 Nov 2009 14:28:10 +0000 admin http://www.3code.cn/?p=466 图片按比例缩放不变形的JS代码

    图片按比例缩放不变形的JS代码,在很多情况下都会使用到，比如产品展示等。附有实例。

    <!--
    //图片按比例缩放
    var flag=false;
    function DrawImage(ImgD,i,j){
    var image=new Image();
    var iwidth = i;  //定义允许图片宽度
    var iheight = j;  //定义允许图片高度
    image.src=ImgD.src;
    if(image.width>0 && image.height>0){
    flag=true;
    if(image.width/image.height>= iwidth/iheight){
    if(image.width>iwidth){
    ImgD.width=iwidth;
    ImgD.height=(image.height*iwidth)/image.width;
    }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
    }
    else{
    if(image.height>iheight){
    ImgD.height=iheight;
    ImgD.width=(image.width*iheight)/image.height;
    }else{
    ImgD.width=image.width;
    ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
    }
    }
    }
    //调用：<img src="图片" onload="javascript :D rawImage(this,100,80)">
    //-->
    </script>

    ]]>     http://www.3code.cn/js-pic-bubianxing/feed/ 0     带缩略图的Flash+JS焦点广告图代码 http://www.3code.cn/flash-js-pic-code/ http://www.3code.cn/flash-js-pic-code/#comments Fri, 13 Nov 2009 09:08:03 +0000 admin http://www.3code.cn/?p=443
    带缩略图的Flash+JS焦点广告图代码, Flash+JS，左右翻页,调用多张图片，推荐下载！

    带缩略图的Flash+JS焦点广告图代码, Flash+JS，左右翻页,调用多张图片，推荐下载！




    带缩略图的Flash+JS焦点广告图代码, Flash+JS，左右翻页,调用多张图片，推荐下载！

    下载地址

    ]]>     http://www.3code.cn/flash-js-pic-code/feed/ 0     PHP与JS结合带缩略图和文字说明的JS焦点图片轮换效果 http://www.3code.cn/php-js-ad/ http://www.3code.cn/php-js-ad/#comments Thu, 12 Nov 2009 02:14:02 +0000 admin http://www.3code.cn/?p=372 PHP与JS结合带缩略图和文字说明的JS焦点图片轮换效果

    PHP与JS结合带缩略图和文字说明的JS焦点图片轮换效果

    PHP与JS结合带缩略图和文字说明的JS焦点图片轮换效果

    说明：
    此实例使用了PHP从MYSQL中读取产品资料后。将相应的图片与说明传给JS。在JS中显示图片焦点轮换效果。当然可以将PHP改成其它语言如ASP+JS，ASP.net+JS, jsp+js 等。或者直接用HTML实现都是可以的。

    本实例图片不提供，数据库不提供，只提供实现的方法。具体操作需要您结合您实际的应用。

    下载：php-js-pic.rar

    此文为本站原创，转载请标明出处：www.3code.cn 酷码资源

    ]]>     http://www.3code.cn/php-js-ad/feed/ 0     超酷带纹理网页滚动条效果 http://www.3code.cn/js-scroll/ http://www.3code.cn/js-scroll/#comments Tue, 03 Nov 2009 06:00:06 +0000 admin http://www.3code.cn/?p=153 
    超酷带纹理网页滚动条效果

用到的图片：12476497480 12476505130 12476497482 12476505130 12476497481

    代码下载：http://www.3code.cn/wp-content/uploads/js-scrool.rar ]]> http://www.3code.cn/js-scroll/feed/ 0