CHỦ ĐỀ THÁNG

THANG-10.png

SMAS HỆ THỐNG QUẢN LÝ NHÀ TRƯỜNG

MAIL NỘI BỘ

THỐNG KÊ EMIS

THI TIẾNG ANH TRÊN INTERNET

THI OLYMPIC TOÁN

THI OLYMPIC VẬT LÝ

THI AN TOÀN GIAO THÔNG

KHO BÀI GIẢNG

19d8a4184769dd610.jpg

HƯỞNG ỨNG CÁC CUỘC VẬN ĐỘNG:
Học tập và làm theo tấm gương đạo đức Hồ Chí Minh.
Nói không với tiêu cực trong thi cử và bệnh thành tích trong giáo dục.
Mỗi thầy cô giáo là tấm gương đạo đức, tự học và sáng tạo.
Xây dựng trường học thân thiện, học sinh tích cực.
Dân chủ Kỷ cương Tình thương Trách nhiệm.

GOOGLE.COM

Công văn, Quyết định, Báo chí, Wedsite

Hỗ trợ trực tuyến

  • (Nguyễn Đình Hưng)
  • (Trường THCS Nguyễn Trãi)

Điều tra ý kiến

Bạn thấy trang này như thế nào?
Đẹp
Đơn điệu
Bình thường
Ý kiến khác

Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • Thành viên trực tuyến

    3 khách và 0 thành viên

    CÁN BỘ-GIÁO VIÊN-CNV VÀ HỌC SINH TRƯỜNG THCS NGUYỄN TRÃI

    Gốc > Ứng dụng tin học > Code cho Blog và Web >

    Code trình diễn ảnh cực đẹp

    1Chèn code này vào dưới thẻ <head>
    <script type='text/javascript'>

    function carousel(params){
    if(!(params.width>0 && isFinite(params.width)))params.width=100;
    if(!(params.height>0 && isFinite(params.height)))params.height=100;
    if(!(params.sides>2 && isFinite(params.sides)))params.sides=4;
    if(!(params.steps>0 && params.steps<100 && isFinite(params.steps)))params.steps=20;
    if(!(params.speed>0 && isFinite(params.speed)))params.speed=8;
    if(!(params.image_border_width>=0 && isFinite(params.image_border_width)))params.image_border_width=0;
    if(isFinite(params.id)!params.id)params.id='bad_id_given_'+Math.random();

    document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
    var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))
    cdiv.style.width=params.width+'px';
    cdiv.style.height=params.height+'px';
    cdiv.style.border=params.border;
    cdiv.style.position='relative';
    cdiv.style.overflow='hidden';
    cdiv.title=params.id;

    var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;
    interval=isNaN(interval)?200:interval;
    var img_position=[],images=[],img_dimension=[];
    var img_index=params.images.length+1,img_index_cap=2*params.images.length;
    var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway;

    function init(){
    if(params.direction=="left" params.direction=="right"){
    direction=params.direction;
    dimension="width";
    }
    else if(params.direction=="top" params.direction=="bottom"){
    direction=params.direction;
    dimension="height";
    }
    else {
    direction="left";
    dimension="width";
    }
    faraway=(direction=="left"direction=="top")?'-20000px':'20000px';
    cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
    var img=new Image();
    img.style.position='absolute';
    img.style[direction]=faraway;
    img.style.width=params.width-2*params.image_border_width+'px';
    img.style.height=params.height-2*params.image_border_width+'px';
    img.style.border=(params.image_border_width0)+'px solid '+params.image_border_color;

    for(var i=0;i<params.images.length;i++){
    images[i]=img.cloneNode(true);
    images[i].src=params.images[i];
    if(params.links && params.links[i] && params.links[i]!=''){
    targ=params.lnk_targets && params.lnk_targets[i]params.lnk_base'new';
    if(targ=="_blank"){
    attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
    images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");
    }
    else if(targ.substr(0,1)=="_"){
    images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'");
    }
    else{
    attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
    images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
    }
    images[i].style.cursor=document.all?'hand':'pointer';
    }

    if(params.titles && params.titles[i] && params.titles[i]!='')
    images[i].title=params.titles[i];
    if(document.all)
    images[i].alt=images[i].title;
    images[i+params.images.length]=images[i];
    if(params.images.length==faces)
    images[i+2*params.images.length]=images[i];
    cdiv.appendChild(images[i]);
    }

    var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);
    var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
    var pi_piece=2*Math.PI/params.steps/params.sides;
    for(i=0;i<=params.steps*faces;i++){
    img_dimension[i]=face_size*Math.sin(pi_piece*i);
    img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway;
    img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';
    }
    }
    init();

    cdiv.rotate = function(){
    setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);
    if(!spinning) return;
    if(++counter>=params.steps){
    counter=0;
    if(++img_index>=img_index_cap)
    img_index=params.images.length;
    }
    images[img_index-faces].style[direction]=faraway;
    for(var i=faces-1;i>=0;i--){
    images[img_index-i].style[direction]=img_position[counter+i*params.steps];
    images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
    }
    }
    cdiv.onmouseover=function(){
    spinning=false;
    }
    cdiv.onmouseout=function(){
    spinning=true;
    }
    setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);
    }
    </script>

    2.Và chèn code này vào nơi bạn thích trong Website

    See this thread for detailed info and docs on script: <a href="http://www.codingforums.com/showthread.php?t=58814">http://www.codingforums.com/showthread.php?t=58814</a>

    <div style="margin-top: 1em; font-weight: bold;">1) Horizontal Slideshow:</div>
    Each image hyperlinked and opens in same browser.
    <script type='text/javascript'>
    carousel({id:'Amazon Books', //Enter arbitrary but unique ID of this slideshow instance
    border:'',
    size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below.
    width:107, //Enter width of image or entire carousel, depending on above value
    height:140, //Enter height of image or entire carousel, depending on above value
    sides:6, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best
    steps:23, //# of animation steps. More = smoother, but more CPU intensive
    speed:5, //Speed of slideshow. Larger = faster.
    direction:'left', //Direction of slideshow. Enter "top", "bottom", "left", or "right"
    images:['http://images.amazon.com/images/P/0596004672.01.MZZZZZZZ.jpg',
    'http://images.amazon.com/images/P/0201730847.01.MZZZZZZZ.jpg',
    'http://images.amazon.com/images/P/0201735687.01.MZZZZZZZ.jpg',
    'http://images.amazon.com/images/P/0596005768.01._SCMZZZZZZZ_.jpg'],

    links: ['http://www.dynamicdrive.com', //enter link URLs, or for no links, empty array instead (links :[])
    'http://www.javascriptkit.com',
    'http://www.codingforums.com',
    'http://www.cssdrive.com'],
    titles:['Book #1',
    'Book #2',
    'Book #3',
    'Book #4'],
    image_border_width:1,
    image_border_color:'blue'
    });
    </script>


    <div style="margin-top: 1em; font-weight: bold;">2) Horizontal Slideshow:</div>
    Each image hyperlinked and opens in the new, set window (target="_blank")
    <script type='text/javascript'>
    carousel({id:'Amazon Books 2',
    border:'',
    size_mode:'image',
    width:107,
    height:140,
    sides:6,
    steps:23,
    speed:5,
    direction:'left',
    images:['http://images.amazon.com/images/P/0596004672.01.MZZZZZZZ.jpg',
    'http://images.amazon.com/images/P/0201730847.01.MZZZZZZZ.jpg',
    'http://images.amazon.com/images/P/0201735687.01.MZZZZZZZ.jpg',
    'http://images.amazon.com/images/P/0596005768.01._SCMZZZZZZZ_.jpg'],

    links: ['http://www.dynamicdrive.com',
    'http://www.javascriptkit.com','http://www.codingforums.com','http://www.cssdrive.com'],
    lnk_base:'google', //Link target for all links (see: http://www.codingforums.com/showthread.php?t=58814&page=2)
    titles:['Book #1',
    'Book #2',
    'Book #3',
    'Book #4'],
    image_border_width:1,
    image_border_color:'blue'
    });
    </script>

    <div style="margin-top: 1em; font-weight: bold;">3) Vertical Slideshow</div>
    Each image is hyperlinked and opens in a pop up window or iframe. 1st and 2nd image opens in the same popup window called "photo", 3rd image a _blank widnow, and 4th image, in the iframe following called "steve". Each pop up window's attributes can be customized, such as no toolbars, width/dimension etc.
    <script type='text/javascript'>
    carousel({id:'carousel_3',
    border:'',
    size_mode:'image',
    width:107,
    height:140,
    sides:8,
    steps:8,
    speed:7,
    direction:'top',
    images:['http://images.amazon.com/images/P/0596004672.01.MZZZZZZZ.jpg',
    'http://images.amazon.com/images/P/0201730847.01.MZZZZZZZ.jpg',
    'http://images.amazon.com/images/P/0201735687.01.MZZZZZZZ.jpg',
    'http://images.amazon.com/images/P/0596005768.01._SCMZZZZZZZ_.jpg'],

    links: ['http://www.dynamicdrive.com',
    'http://www.javascriptkit.com',
    'http://www.codingforums.com',
    'http://www.cssdrive.com'],
    lnk_base:'',
    lnk_targets:['photo', //link target for each link (see: http://www.codingforums.com/showthread.php?t=58814&page=2)
    'photo',
    '_blank',
    '_top.steve' ],
    lnk_attr:['width=700,height=600,top=200,menubar=yes', //window attribute for each pop up (see url above for docs)
    'width=700,height=600,left=400,scrollbars=yes',
    'width=750,height=550,left=300,top=100',
    ''],
    titles:['Opens in \'photo\' window',
    'Opens in \'photo\' window',
    'Opens in blank window',
    'Opens in iframe called "steve"'],
    image_border_width:1,
    image_border_color:'black'
    });
    </script>

    <iframe name="steve" style="width: 80%; height: 400px"></iframe>
    Chú ý:Thay những dòng màu đỏ thành Link của bạn
    Nguồn :dynamicdrive
    Xem Demo tại đây
    Chúc bạn thành công!  
    

    Nhắn tin cho tác giả
    Trường Thcs Nguyễn Trãi @ 19:27 09/11/2010
    Số lượt xem: 298
    Số lượt thích: 0 người
     
    Gửi ý kiến