|
หัวข้อ: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ เริ่มหัวข้อโดย: fogza ที่ 26 มิถุนายน 2011, 01:35:08 คลิ๊ก (http://howhost.com/th/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%82%E0%B8%AE%E0%B8%AA%E0%B8%95%E0%B8%B4%E0%B9%89%E0%B8%87/%E0%B8%9F%E0%B8%A3%E0%B8%B5%E0%B9%82%E0%B8%AE%E0%B8%AA%E0%B8%95%E0%B8%B4%E0%B9%89%E0%B8%87)
เลื่องดูล่างสุดนะครับ ที่เป็นคอลั่มท้ายสุด ไม่ทราบว่าใช้ poproty ไหนของ css ครับ เวลา hover, visite แล้วมันดูนุ่มนวลดี ขอคำแนะนำด้วยครับน่าลองมากๆ :wanwan003: หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ เริ่มหัวข้อโดย: sakang ที่ 26 มิถุนายน 2011, 01:59:17 jquery ทำได้ครับ hover ที่ li แล้วให้ + css left ตามกำหนด พอไม่ได้ hover ก็เอา left ลดตามค่าที่ + ไป
:wanwan017: หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ เริ่มหัวข้อโดย: ~SolariS~ ที่ 26 มิถุนายน 2011, 04:30:20 css3 รึเปล่าครับ เหมือนจะเคยเห็นแว๊บๆ :-[
หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ เริ่มหัวข้อโดย: bonshington ที่ 26 มิถุนายน 2011, 09:29:59 $().mouseenter(fnction(){
$(this).animate("padding-left", "+10px"); }).mouseleave(function(){ $(this).animate("padding-left", "-10px"); }); ในเวปทำไม่ถูกซะทีเดียว เค้าลืม clear animate queue เวลาเอาเม้าลากรัวๆ animate มันจะซ้ำ และแสดงผลไม่ทัน หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ เริ่มหัวข้อโดย: cpengineer ที่ 26 มิถุนายน 2011, 09:34:54 javascript แหงๆ ครับ
แต่เดี๋ยวนี้ css ก็น่าจะทำได้แล้วนะ หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครั เริ่มหัวข้อโดย: Taurusz ที่ 26 มิถุนายน 2011, 11:22:12 เป็น jQuery ครับ
ขอเสนออีกวิธีใช้ได้ดีเหมือนกันครับ ต้องมีไฟล์ไลบารี่ของ jquery ก่อนนะครับ แล้วก็นำ code ล่างนี้ไปใส่ระหว่าง tag <script ก็ได้ หรือแยกเป็น อีกไฟล์.js ก็ได้ครับ $(document).ready(function(){ $('.caterogies ul li a').hover(function() { //ขณะเมาส์บนอยู่วัตถุ $(this).animate({ paddingLeft: '18px'}, 100); }, function() { //ขณะเมาส์ออกนอกวัตถุ $(this).animate({ paddingLeft: '15px'}, 100); }); }); บริเวณตัวสีเขียวต้องเปลี่ยนเป็น ID หรือ Class ที่คุณกำหนดไว้ บริเวณสีสีแดงคือจำนวน padding ขณะเมาส์เหนือ ล่างขณะเมาส์ออก บริเวณสีน้ำเงินคือความเร็วในการเคลื่อนไหว ยิ่งเยอะยิ่งช้า หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ เริ่มหัวข้อโดย: cpengineer ที่ 26 มิถุนายน 2011, 14:28:33 มีน้ำใจ +1 ให้ท่านด้านบนครับ
:wanwan003: หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ เริ่มหัวข้อโดย: kenessar ที่ 27 มิถุนายน 2011, 02:26:00 หลักๆก็ jQuery ครับ แต่ CSS3 ก็ใช้ได้แล้ว (ยกเว้นไออีต่ำกว่า 9 นะครับ)
li:hover { -moz-transform: translate( 10px, 0 ); -webkit-transform: translate( 10px, 0 ); -o-transform: translate( 10px, 0 ); transform: translate( 10px, 0 ); } อยู่ในหมวด transform ครับ ย่อ/ขยาย , ย้ายตำแหน่ง , หมุน , บิด ได้ครับ แต่อย่างว่า ใช้กับ IE ต่ำกว่า 9 ไม่ได้ครับ หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ เริ่มหัวข้อโดย: fogza ที่ 27 มิถุนายน 2011, 19:07:24 หลักๆก็ jQuery ครับ แต่ CSS3 ก็ใช้ได้แล้ว (ยกเว้นไออีต่ำกว่า 9 นะครับ) ครับ ผมกำลังศึกษา css3 อยู่ มีของใหม่ๆ มาให้เล่นเยอะเลย :wanwan019:li:hover { -moz-transform: translate( 10px, 0 ); -webkit-transform: translate( 10px, 0 ); -o-transform: translate( 10px, 0 ); transform: translate( 10px, 0 ); } อยู่ในหมวด transform ครับ ย่อ/ขยาย , ย้ายตำแหน่ง , หมุน , บิด ได้ครับ แต่อย่างว่า ใช้กับ IE ต่ำกว่า 9 ไม่ได้ครับ เป็น jQuery ครับ โค้ดนี้คือใช้ได้เลยใช่ไหม๋ครับ แล้วการแสดงผลแสดงผลเหมือนกันไหม๋ครับ พอจะมีตัวอย่างไหม๋ครับ?ขอเสนออีกวิธีใช้ได้ดีเหมือนกันครับ ต้องมีไฟล์ไลบารี่ของ jquery ก่อนนะครับ แล้วก็นำ code ล่างนี้ไปใส่ระหว่าง tag <script ก็ได้ หรือแยกเป็น อีกไฟล์.js ก็ได้ครับ $(document).ready(function(){ $('.caterogies ul li a').hover(function() { //ขณะเมาส์บนอยู่วัตถุ $(this).animate({ paddingLeft: '18px'}, 100); }, function() { //ขณะเมาส์ออกนอกวัตถุ $(this).animate({ paddingLeft: '15px'}, 100); }); }); บริเวณตัวสีเขียวต้องเปลี่ยนเป็น ID หรือ Class ที่คุณกำหนดไว้ บริเวณสีสีแดงคือจำนวน padding ขณะเมาส์เหนือ ล่างขณะเมาส์ออก บริเวณสีน้ำเงินคือความเร็วในการเคลื่อนไหว ยิ่งเยอะยิ่งช้า $().mouseenter(fnction(){ ขอแบบฉบับเต็มได้ไหม๋ครับ เรื่อง javascript หรือ JQuery กระผมยังไม่ได้ศึกษาเลยครับ :wanwan012:$(this).animate("padding-left", " 10px"); }).mouseleave(function(){ $(this).animate("padding-left", "-10px"); }); ในเวปทำไม่ถูกซะทีเดียว เค้าลืม clear animate queue เวลาเอาเม้าลากรัวๆ animate มันจะซ้ำ และแสดงผลไม่ทัน ขอบคุณทุกท่านครับ น้ำใจงานซะเหลือเกิน เดี๋ยวจะแวะเวียน 1 ให้น้า :wanwan019: :wanwan017: หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ เริ่มหัวข้อโดย: Taurusz ที่ 27 มิถุนายน 2011, 20:06:28 ใช้ได้เลยครับ
แค่เรียกใช้ไลบารี่ jquery และก็เปลี่ยนชื่อ id ให้ตรงกับของคุณ แสดงผลเหมือนกับตัวอย่างครับ ผมลองกับ jquery 1.3.2 ไม่มีอาการที่เอามาลากรั่วๆแล้วทำเกินครับ ความเร็วในการเคลื่อนที่ก็ตามที่ผมได้บอกครับ หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ เริ่มหัวข้อโดย: fogza ที่ 27 มิถุนายน 2011, 21:16:15 ขอบคุณครับ คงต้องโหลด jquery มาก่อน แล้วเรียกใช้ไลบารี่ใช่ไหม๋ครับ?
ปล. ผมซื้อหนังสือ jquery มาแต่ยังไม่มีเวลาศึกษาเลย :'( หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ เริ่มหัวข้อโดย: TonHaDy ที่ 27 มิถุนายน 2011, 22:54:07 หลักๆก็ jQuery ครับ แต่ CSS3 ก็ใช้ได้แล้ว (ยกเว้นไออีต่ำกว่า 9 นะครับ) li:hover { -moz-transform: translate( 10px, 0 ); -webkit-transform: translate( 10px, 0 ); -o-transform: translate( 10px, 0 ); transform: translate( 10px, 0 ); } อยู่ในหมวด transform ครับ ย่อ/ขยาย , ย้ายตำแหน่ง , หมุน , บิด ได้ครับ แต่อย่างว่า ใช้กับ IE ต่ำกว่า 9 ไม่ได้ครับ ขอบคุนมากครับ :wanwan017: |