JavaScript
April 12, 2015
點擊在新視窗中瀏覽此圖片
同時秀出價格

點擊在新視窗中瀏覽此圖片
同時秀出價格

CSS (head)
/*隱藏區塊用*/
.box{display: none;}
/*秀出區塊用*/
.bS01{}
.bS02{}
.bS03{}
/*區塊範圍指定*/
.bBW{}


JavaScript (head)
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $('input[type="radio"]').click(function(){
            if($(this).attr("value")=="bOne"){
                $(".box").hide();
                $(".bS01").show();
            }
            if($(this).attr("value")=="bTwo"){
                $(".box").hide();
                $(".bS02").show();
            }

        });
    });
</script>

March 12, 2015
CSS部分
<style type="text/css">
span{border:#999 solid 1px; padding:3px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>


javascript 部分
<script type='text/javascript'>
function show(obj, id)
{
  var o=document.getElementById(id);
  if( o.style.display == 'none' )
  {
    o.style.display='';
    obj.innerHTML='隱藏';
  }
  else
  {
    o.style.display='none';
    obj.innerHTML='顯示';
  }
}
</script>


html 部分
<span onclick='show(this, "show")'>顯示</span><br>
<div id='show' style="display:none;">按下文字按鈕後呈現內容</div>

March 8, 2015
css部分
<style type="text/css">
div#show{ margin:10px 0 0 0; padding:5px; border:#999 dashed 1px;}
</style>


javascript部分
<script type="text/javascript">
<!--
  function show(obj,item){
    document.getElementById(item).style.display = obj.checked?"block":"none";
  }
//-->
</script>


html部分
<input type="checkbox" onclick="show(this,'show');" />
<div id="show" style="display:none">這是顯示的內容</div>

註:show可以任意改為其他文字
June 19, 2014
<script type="text/javascript">
function checkserAgent(){
var userAgentInfo=navigator.userAgent;
var userAgentKeywords=new Array(“Android", “iPhone" ,"SymbianOS", “Windows Phone", “iPad", “iPod", “MQQBrowser");
var flag=false;
if(userAgentInfo.indexOf(“Windows NT")==-1){
flag=true;
}
return flag;
}
if(checkserAgent()){
document.location.href="http://www.apao.idv.tw/mobile/";
}
</script>
August 25, 2012
點擊在新視窗中瀏覽此圖片


<script LANGUAGE="JavaScript">
<!--
  function openwin() {
  window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") file://写成一行

  }
//-->
</script>


window.open 談出新視窗的命令文;
'page.html' 弹出窗口的文件名;
'newwindow' 彈出窗口的名字(不是文件名),可空白' ';
height=100 窗口高度;
width=400 窗口寬度;
top=0 窗口距離瀏覽器上方的距離值;
left=0 窗口距離瀏覽器左側的距離值;
toolbar=no 是否顯示工具欄,yes為顯示;
menubar,scrollbars 表示清單與滾動軸。
resizable=no 是否可改變視窗大小,yes为允許;
location=no 是否显示地址栏,yes为允许;
status=no 是否顯示狀態欄內的訊息(指是視窗開啟時),yes為允許;

html+javascript的寫法:

<html>
<head>
<script LANGUAGE="JavaScript">
<!--
  function openwin() {
  window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //要寫成一行
  }
//-->
</script>
</head>
<body onload="openwin()">
任意的頁面內容...
</body>
</html>


開啟新增視窗方法有四種:

方法一:
<body  onload="openwin()"> 瀏覽器開啟時(讀取時)彈出視窗;

方法二:
<body  onunload="openwin()"> 瀏覽器離開頁面時(不讀取)彈出視窗;

方法三:用一个连接调用:
<a href="#" onClick="window.open('URL', 'Joseph', config='height=350,width=440')"/>開啟一個新視窗</a>
注意:必須使用“#”

方法四:用於發布按鈕時:
<input type="button" onclick="openwin()" value="開啟視窗">


October 11, 2011
點擊在新視窗中瀏覽此圖片
DEMO

程序說明
原理就是通過不斷設置滑動對象的left(水平切換)和top(垂直切換)來實現圖片切換的動態效果。
首先需要一個容器,程序會自動設置容器overflow為hidden,如果不是相對或絕對定位會同時設置position為relative,
滑動對象會設置為絕對定位:
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";
分頁: 1/2 第一頁 1 2 下頁 最後頁
[ 顯示模式: 摘要 | 清單 ]