問題討論區


   查看所有留言 (男丁格爾)


(1) 2 3 4 ... 7 »


回覆: 不同的div用js執行同一個動作
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
試試看


$("#feature_1_a, #feature_1_b").hover(function(){
    var
id = '#' + this.id.replace('_1_', '_1_big_');
    $(
id).css("background-color", "#f4f9fa").animate({top:190},500,"easeOutBounce");
}, function(){
    var
id = '#' + this.id.replace('_1_', '_1_big_');
    $(
id).css("background-color", "#fff").animate({top:222},200,"easeOutBounce");
});

2013/6/30 16:07
 


回覆: 關於使用 animate 的淡入淡出問題
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

下一次是指?
現在看你的程式, 應該是先執行完 ('.info_content').animate({opacity: 1}) 後才會執行
$('.info').hide().empty().append(msg).delay(300).fadeIn(500);


By 男丁格爾

2012/3/7 14:52
 


回覆: 回覆: jquery 新手上路
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

試看看

$(function() {
    $(
".edit_tr").click(function() {
        $(
this).addClass('edit').find('span').hide().end().find(':text').show();
    });

    $(
'#change').click(function(){
        var
$edit = $('.edit');
        if(
$edit.length < 0) return;
            
        var
_difference = parseInt($edit.find(':text').val()) - parseInt($edit.find('span').text());

        
$edit.nextAll().each(function(){
            var
$this = $(this),
                
$span = $this.find('span');

            
$span.text(parseInt($span.text()) + _difference);
            
$this.find('text').val($span.text());
        });
    });
});


By 男丁格爾

2012/2/10 11:38
 


回覆: 【問題】Chrome Web Store 捲軸效果該如何做?
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

可以先試試 css 的 position: fixed; 的效果。

By 男丁格爾

2012/2/4 15:59
 


回覆: 向大家請教
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

如果是要問捲軸的話,那是用 jQuery 外掛 - jScrollPane 做的
http://www.kelvinluck.com/assets/jque ... rollPane/jScrollPane.html

若是要問頁籤的話,可以參考
http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html

By 男丁格爾

2012/2/4 15:57
 


回覆: 回覆: 回覆: 回覆: 如何計算金額???
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

我試你的程式是可以兩個都計算出值的。

By 男丁格爾

2012/2/4 15:55
 


回覆: 想請教關於滑動選單的問題~~
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

把你demo.html中的第15行

return false;

拿掉就可以了

By 男丁格爾

2011/4/6 16:40
 


回覆: 回覆: 回覆: jQuery
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

改成這段後試看看, 我在 IE9, Chrome 試都 OK

$('#func').attr({onclick: function(){ return changeFunc; }});


By 男丁格爾

2011/3/31 18:02
 


回覆: jQuery
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

把你的 code 貼上來瞧瞧~沒看到程式也不知道你是錯那邊


By 男丁格爾

2011/3/25 15:55
 


回覆: 怎樣寫電腦登入網站會轉頁,手機登入網站不會轉頁。
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

你需要去檢測使用者瀏覽器的版本是否為手機版的瀏覽器
若不是則做你需要的轉頁的動作

而這轉頁可以透過後端程式來完成也可以透過前端 JavaScript, 不過建議是透過後端程式

By 男丁格爾

2010/12/13 13:29
 


滑出式說明描述
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
網頁設計人員都知道 HTML + CSS 是設計時不可或缺。但單純的靜態畫面不太能吸引瀏覽者的注意,所以得在搭配 JavaScript 來讓效果動起來。此次就用簡單的 jQuery 語法來讓原本單調的設計有不同的效果。

先準備個 HTML 內容:


<body>
    <
div class="abgne_tip_gallery_block">
        <
a href="#"><img src="images/m01.jpg" title="" alt="" /></a>
        <
div class="caption">
            <
h2><a href="#" title="圖片來源-梅問題">圖片來源-梅問題</a></h2>
            <
div class="desc">
                &
#9827;梅問題•教學網【Minwt】&#9827; | 分享與記錄關於Photoshop教學、網頁教學、Wordpress教學、Flex教學、 Flash教學&#8230;等,也歡迎遇到以上任何問題都可到梅問題來找答案喔!  |  數位攝影
            
</div>
        </
div>
    </
div>
</
body>


接著就是各位設計人員熟悉的 CSS 部份:


.abgne_tip_gallery_block {
    
margin: 0;
    
padding: 0;
    
width: 450px;
    
height: 250px;
    
overflow: hidden;
    
position: relative;
}
.
abgne_tip_gallery_block img {
    
position: absolute;
    
border: 0;
}
.
abgne_tip_gallery_block .caption {
    
position: absolute;
    
bottom: 0;
    
width: 390px;    /* .abgne_tip_gallery_block 的寬 - .caption 的左右 padding */
    
padding: 15px 30px 20px;
    
cursor: pointer;
    
color: #fff;
    
background: url(images/1px_black.png) repeat;
}
.
abgne_tip_gallery_block .caption h2 {
    
margin: 0;
    
padding: 0px 0px 15px;
}
.
abgne_tip_gallery_block .caption h2 a {
    
text-decoration: none;
    
color: #fc6;
}
.
abgne_tip_gallery_block .caption h2 a:hover {
    
text-decoration: underline;
}


設計後的畫面就是一般很常見的照片加上標題及描述內容:

Open in new window


不過這樣一股腦的把描述內容都顯示出來的話,幾乎把正妹照都遮掉一大半了,最重要的下半身就看不到哩。所以筆者把整個描述的部份只顯示標題:


.abgne_tip_gallery_block .caption {
    
position: absolute;
    
top: 195px;    /* .abgne_tip_gallery_block 的高 - 想顯示 title 的高(這邊是設 55) */
    
width: 390px;    /* .abgne_tip_gallery_block 的寬 - .caption 的左右 padding */
    
padding: 15px 30px 20px;
    
cursor: pointer;
    
color: #fff;
    
background: url(images/1px_black.png) repeat;
}


所以就能看到...

Open in new window


嘿~可別以為筆者忘了最重要的描述內容的部份。目前雖然看不到,但筆者把它設計成當滑鼠移到圖片上時就能把其它部份展開來。


$(function(){
    
// 預設標題區塊 .abgne_tip_gallery_block .caption 的 top
    
var _titleHeight = 55;
    $(
'.abgne_tip_gallery_block').each(function(){
        
// 先取得區塊的高及標題區塊等資料
        
var $this = $(this),
            
_height = $this.height(),
            
$caption = $('.caption', $this),
            
_captionHeight = $caption.outerHeight(true),
            
_speed = 200;

        
// 當滑鼠移動到區塊上時
        
$this.hover(function(){
            
// 讓 $caption 往上移動
            
$caption.stop().animate({
                
top: _height - _captionHeight
            
}, _speed);
        }, function(){
            
// 讓 $caption 移回原位
            
$caption.stop().animate({
                
top: _height - _titleHeight
            
}, _speed);
        });
    });
});


這樣在瀏覽者未把滑鼠移入圖片前就是看到基本的標題,而滑鼠移入圖片後就能描述內容的多寡來決定要展開多少的部份囉。是不是加上一點點 JavaScript 就能讓原本的設計加分呢!?

範例瀏覽:
http://demonstration.abgne.tw/jquery/0029/0029.html


以上內容於2010-11-04 17:41 發表在 http://abgne.tw/jquery/apply-jquery/slide-description-show.html

2010/11/13 12:14
 


回覆: 請教老師 , 影片會遮住下拉選單怎麼辦?
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

可以試試像 bgiframe 這類的外掛
http://abgne.tw/jquery/jquery-plugins/bgiframe-2-1-2.html

2010/9/28 17:14
 


回覆: JavaScript + css輪播banner 如何寫
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

HTC 應該是使用這外掛效果的
http://caroufredsel.frebsite.nl/

2010/9/27 13:04
 


仿 Yahoo 切換式兩格圖片廣告
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
不知道各位在 Yahoo 新聞 中看新聞消息時,是否有注意到網頁中有用來推薦最新消息用的兩格圖片效果:

Open in new window


每一個都會有 2-N 張圖片內容,除了可透過左右鈕來切換內容之外;右上角也會有小圓點來表示共有幾對內容,點擊小圓點也能立即的切換到該對圖片上。這樣的效果用來當商品展示或是廣告展示都蠻有效果的。所以筆者這次又要教各位如果做一個"山寨版"的囉。

首先就是要準備一下 HTML 的框架:


<body>
    <
div class="showBox">
        <
h2 class="title">最新產~推薦</h2>
        <
div class="roll"></div>
        <
div class="btn">
            <
a href="#" class="prev">Prev</a>
            <
a href="#" class="next">Next</a>
        </
div>
        <
ul class="itemList">
            <
li>
                <
a href="#" class="adContent">
                    <
img src="images/s.gif" alt="" />
                    <
h3>Script - S</h3>
                </
a>
                <
a href="#" class="adContent">
                    <
img src="images/c.gif" alt="" />
                    <
h3>Script - C</h3>
                </
a>
            </
li>
            <
li>
                <
a href="#" class="adContent">
                    <
img src="images/r.gif" alt="" />
                    <
h3>Script - R</h3>
                </
a>
                <
a href="#" class="adContent">
                    <
img src="images/i.gif" alt="" />
                    <
h3>Script - I</h3>
                </
a>
            </
li>
            <
li>
                <
a href="#" class="adContent">
                    <
img src="images/p.gif" alt="" />
                    <
h3>Script - P</h3>
                </
a>
                <
a href="#" class="adContent">
                    <
img src="images/t.gif" alt="" />
                    <
h3>Script - T</h3>
                </
a>
            </
li>
            <
li>
                <
a href="#" class="adContent">
                    <
img src="images/js.gif" alt="" />
                    <
h3>JavaScript</h3>
                </
a>
                <
a href="#" class="adContent">
                    <
img src="images/jq.gif" alt="" />
                    <
h3>jQuery</h3>
                </
a>
            </
li>
        </
ul>
        <
a href="#" class="more">More</a>
    </
div>
</
body>


其中 div.roll 是用來放置小圓點的;而 ul.itemList 中的每一個 li 都是用來顯示內容使用的,其中會再用 a 來切成左右各一塊。接著用 CSS 來排版裝飾一下:


.showBox {
    
width: 290px;
    
height: 220px;
    
border: 1px solid black;
    
position: relative;
    
overflow: hidden;
    
font-family: Arial;
    
letter-spacing: 1px;
}
.
showBox * {
    
margin: 0;
    
padding: 0;
}
.
showBox a {
    
color: blue;
    
text-decoration: none;
}
.
showBox h2.title {
    
position: absolute;
    
top: 10px;
    
left: 5px;
    
font-size: 16px;
}
.
showBox .roll {
    
position: absolute;
    
top: 16px;
    
right: 80px;
    }
.
showBox .roll a {
    
float: left;
    
width: 7px;
    
height: 7px;
    
margin-right: 3px;
    
text-indent: -9999px;
    
background: url(images/dot.gif) no-repeat 0 0;
}
.
showBox .roll a.on {
    
background-position: 0 -27px;
}
.
showBox .btn {
    
position: absolute;
    
top: 10px;
    
right: 5px;
    
height: 20px;
}
.
showBox .btn a {
    
width: 31px;
    
height: 24px;
    
float: left;
    
text-indent: -9999px;
}
.
showBox .btn a.prev {
    
background: url(images/btn.gif) no-repeat 0 -42px;
}
.
showBox .btn a.next {
    
background: url(images/btn.gif) no-repeat 0 0;
}
.
showBox a.more {
    
position: absolute;
    
bottom: 10px;
    
right: 5px;
    
padding-left: 7px;
    
font-size: 12px;
    
background: url(images/more.gif) no-repeat -1px 5px;
}
.
showBox ul.itemList, .showBox ul.itemList li {
    list-
style: none;
}
.
showBox ul.itemList {
    
position: absolute;
    
top: 40px;
    
white-space: nowrap;
}
.
showBox ul.itemList li {
    
display: inline;
}
.
showBox ul.itemList li .adContent {
    
display: inline-block;
    
width: 135px;
    
margin: 0 5px;
}
.
showBox ul.itemList li .adContent h3 {
    
text-align: center;
    
font-weight: normal;
    
font-size: 12px;
}
.
showBox ul.itemList li .adContent img {
    
border: 1px solid #ccc;
    
padding: 5px;
}


不要看到 CSS 落落長就覺得它很難,其這邊比較麻煩的只是如何讓 ul.itemList 水平排列時不換行而已。若順利的話就能看到相似度達 9 成的畫面了:

Open in new window


嘿~除了不能換上下組內容之外,還缺少了表示幾對的小圓點。這些我們就用 jQuery 來幫我們補上吧:


$(function(){
    $(
'.showBox').each(function(){
        
// 先取得必要的元素並用 jQuery 包裝
        // 再來取的 .showBox 的寬及設定移動速度
        
var $showBox = $(this),
        
$itemList = $showBox.find('ul.itemList'),
        
$items = $itemList.find('li'),
        
$adContent = $items.find('.adContent'),
        
width = $showBox.width(),
        
speed = 400;

        
// 針對不支援 cssFloat 或 IE 瀏覽器
        // 減回 $adContent 的 margin-left 及 margin_right
        
if(!$.support.cssFloat || $.browser.msie){
            
width -= _margin;
        }

        
// 產生小圓點
        
var rollStr = '';
        
$items.each(function(i, ele){
            
rollStr += '<a href="#">'+i+'</a>rn';
        });

        
// 加入小圓點並加上 click 事件
        
$showBox.find('.roll').html(rollStr).find('a').click(function(){
            
move($(this).index());
        }).
eq(0).addClass('on');

        
// 當點擊左右鈕時
        
$showBox.find('.prev, .next').click(function(){
            
// 找出目前是顯示那一組
            
var no = $showBox.find('.roll a.on').index();
            
// 判斷接下來要移往那一組
            
no = ($(this).attr('className').indexOf('prev')>-1 ? (no - 1 + $items.length) : (no + 1))  % $items.length;
            
// 進行移動
            
move(no);

            return
false;
        });

        
// 控制移動的函式
        
function move(no){
            
$itemList.stop().animate({
                
left: width * no * -1
            
}, speed);
            
$showBox.find('.roll a').eq(no).addClass('on').siblings().removeClass('on');
        }
    });

    $(
'a').focus(function(){
        
this.blur();
    });
});


將將~這樣一個仿 Yahoo 新聞 的切換式兩格圖片廣告效果就完成囉!至於如何讓它能循環切換及自動輪播就留給各位當做功課了。

範例瀏覽:
http://demonstration.abgne.tw/jquery/0026/0026_1.html
http://demonstration.abgne.tw/jquery/0026/0026_2.html


2010/8/13 22:05
 


回覆: js和swf相衝的問題
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

有試過不要用 FlashObject 的顯示 swf 後的效果嗎?
先把 swf 的標籤語法寫死在網頁中後再試試

不過也許真的是 Firefox 本身的問題XD

2010/8/9 9:30
 



(1) 2 3 4 ... 7 »




 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS