วิธีปิดพื้นที่โฆษณาโดยลอยผ่านด้านล่าง

ผล 1:

1. ก่อนอื่นทั้งหมดที่ลอยอยู่ด้านล่างผ่านโฆษณาบาร์ได้รับการแก้ไขที่ด้านล่างของเบราว์เซอร์ ในขณะที่เบราว์เซอร์เลื่อนโฆษณาลอยด้านล่างจะอยู่ในหน้าต่างเบราว์เซอร์เสมอ นี่คือประเด็นสำคัญบางประการ: ผ่านคอลัมน์คงที่และสีดำ

ดังนั้น: ก่อนอื่นเราต้องให้ความกว้างโดยรวมของโฆษณาคอลัมน์ลอยน้ำ 100%และประการที่สองตั้งตำแหน่งคงที่สำหรับมันแก้ไขที่ด้านล่างของเบราว์เซอร์สีพื้นหลังเป็นสีดำและความโปร่งใสคือ 0.7

 .footfixed {width: 100%; ความสูง: 140px; / * ขนาดภาพความกว้างต้องเป็น 100% */ ตำแหน่ง: แก้ไข; ด้านล่าง: 0; /* การกำหนดตำแหน่งคงที่, แก้ไขที่ด้านล่างของเบราว์เซอร์ */ พื้นหลัง: #081628; ความทึบ: .7; /*Chrome, Safari, Firefox, Opera*/Filter: Alpha (Opacity = 70);/*สำหรับ IE8 และรุ่นก่อนหน้า*/}

2. รูปภาพของโฆษณาคอลัมน์ลอยตัวที่ด้านล่างสามารถมองเห็นได้สูงกว่าพื้นหลัง (ความสูงพื้นหลัง: 140px, ความสูงของภาพด้านใน: 218px)

และเนื้อหาโดยรวมอยู่กึ่งกลางบางส่วน

 .fimg {ความสูง: 218px; /*โปรดทราบว่าความสูงของภาพที่นี่สูงกว่า 140px*/ ความกว้าง: 1190px; มาร์จิ้น: 0px auto; /*เนื้อหาโดยรวมอยู่กึ่งกลาง*/}

อย่างไรก็ตามเนื่องจากความสูงของเนื้อหาโฆษณาที่ถูกระงับด้านล่างส่วน 218px นั้นสูงกว่าความสูงขององค์ประกอบหลัก 140px ความแตกต่างของความสูงคือ 78px 78px

มีการผลิตเอฟเฟกต์ต่อไปนี้และรูปภาพไม่สามารถเสร็จสิ้นได้:

สิ่งนี้ต้องการภาพที่จะย้ายไปถึง 78px และการวางตำแหน่งโดยรวมของส่วนเนื้อหาโฆษณาลอยตัวทั้งหมดที่ด้านล่างเป็นสิ่งจำเป็น

 .fimg {ตำแหน่ง: ญาติ; /*การวางตำแหน่งสัมพัทธ์ขององค์ประกอบหลัก*/ top: -78px; -

ผลลัพธ์:

นี่คือคำถาม:

ภาพไม่ชัดเจนมากนักเนื่องจากความโปร่งใสที่เพิ่มเข้ามา

ในการแก้ปัญหานี้ให้ใช้ div เพื่อตั้งค่าพื้นหลังแทนการตั้งค่าสีพื้นหลังใน. footfixed

 <div> </div>

 .ftbj {ตำแหน่ง: สัมบูรณ์; ความเป็นมา:#081628; ความสูง: 100%; ความกว้าง: 100%; ด้านบน: 0; ซ้าย: 0; ความทึบ: .7;/*Chrome, Safari, Firefox, Opera*/Filter: Alpha (Opacity = 70);}/*สำหรับ IE8 และรุ่นก่อนหน้า*/. footfixed {width: 100%; ความสูง: 140px; / * ขนาดภาพความกว้างต้องเป็น 100% */ ตำแหน่ง: แก้ไข; ด้านล่าง: 0; /*การกำหนดตำแหน่งคงที่, แก้ไขที่ด้านล่างของเบราว์เซอร์ */ พื้นหลัง: #081628; ความทึบ: .7; /*Chrome, Safari, Firefox, Opera*/Filter: Alpha (Opacity = 70);/*สำหรับ IE8 และรุ่นก่อนหน้า*/}

ด้วยวิธีนี้ภาพเอฟเฟกต์:

สิ่งนี้ทำให้ชัดเจนขึ้นมาก

3. เอฟเฟกต์ของปุ่มปิด:

ก่อนอื่นปุ่มจะถูกจับจ้องไปที่มุมขวาบนของภาพโฆษณาโดยวางตำแหน่งภาพ จำเป็นต้องตั้งค่าขนาดภาพเส้นทางการแนะนำภาพจะต้องใช้เพื่อวางตำแหน่งส่วนทั้งหมดของเนื้อหาโฆษณาลอยตัวที่ด้านล่างและปุ่มปิดคือการวางตำแหน่งอย่างแน่นอน

 .fimg {ตำแหน่ง: ญาติ; /*การวางตำแหน่งสัมพัทธ์ขององค์ประกอบหลัก*/} ปิด {width: 33px; ความสูง: 33px; /* ขนาดภาพ*/พื้นหลัง: url (images/close.png) ศูนย์กลางที่ไม่มีการทำซ้ำ /*เส้นทางการแนะนำภาพ*/ ตำแหน่ง: สัมบูรณ์; ขวา: 15px; ด้านบน: 85px; /*แก้ไขเพื่อแก้ไขที่ด้านล่างทั้งหมดและแขวนมุมบนขวาของภาพโฆษณา*/}

ประการที่สองเลื่อนเมาส์ไปที่ปุ่มปิดและมือเล็ก ๆ จะปรากฏขึ้นและปุ่มปิดจะหมุน

เพื่อสร้างเอฟเฟกต์ภาพเคลื่อนไหวเพิ่มการเปลี่ยนแปลง

 .close {การเปลี่ยนแปลง: .5S; เคอร์เซอร์: ตัวชี้; /*จับจ้องไปที่มุมขวาบนของด้านล่างโดยการวางตำแหน่ง*/} ปิด: โฮเวอร์ {แปลง: หมุน (180deg); -ms-transform: หมุน (180deg); / * IE 9 */ -MOZ -TRANSFORM: หมุน (180DEG); / * firefox */ -webkit -transform: หมุน (180deg); / * Safari และ Chrome */ -O -transform: หมุน (180deg); /* โอเปร่า*/}/* หมุนภาพ*/

จากนั้นคลิกปุ่มปิดโฆษณาจะหายไปและเอฟเฟกต์จะปรากฏขึ้นที่ด้านข้าง

 #fimg-min {width: 80px; ความสูง: 140px; /* ขนาดภาพ*/ ตำแหน่ง: แก้ไข; ด้านล่าง: 0px; ซ้าย: 0px; /* การวางตำแหน่ง*/ จอแสดงผล: ไม่มี; /*ซ่อน*/ เคอร์เซอร์: ตัวชี้; /*มือเล็ก ๆ*/}

คลิกที่ไอคอนวนอยู่ในภาพและโฆษณาที่ด้านล่างจะปรากฏขึ้นอีกครั้ง

 <script> $ (เอกสาร) .ready (function () {$ (". ปิด") คลิก (ฟังก์ชั่น () {$ ('. footfixed'). animate ({ความสูง: '10px', opacity: '0.4'}, "slow", ฟังก์ชั่น () {$ ('. footfixed') $ ('#fimg-min') คลิก (function () {$ ('. footfixed'). show (). css ({ความสูง: '140px', opacity: '1'}); $ ('#fimg-min')

หมายเหตุ: เอฟเฟกต์การหมุนภาพปิดปุ่มปิดในเบราว์เซอร์ด้านล่าง IE9 ไม่สามารถทำได้

วิธีการด้านบนของการปิดพื้นที่โฆษณาโดยคอลัมน์ลอยตัวที่ด้านล่างของบทความคือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น