საკმაოდ გავრცელებული პრაქტიკა თანამედროვე ვებსაიტებზე არის ბლოკის შეუფერხებლად გაფართოება გამოსახულებით. როგორ გავაკეთოთ ეს CSS-ის გამოყენებით?
გამოსახულების გლუვი მასშტაბირება hover CSS-ზე
პრობლემის გადაწყვეტას ორ ეტაპად ვყოფთ: html მარკირებადა css სტილები. პირველი, მოდით აღვნიშნოთ ბლოკები შიგნით სურათებით:
ყველა ბლოკს მიენიჭა ყუთის კლასი. მისი ერთ-ერთი მნიშვნელოვანი თვისება იქნება overflow: დამალული, ანუ დამალვა ყველაფერი, რაც სცილდება ბლოკს. გავადიდოთ სურათი? დიახ. მაგრამ ხილული იქნება მხოლოდ ბლოკით შეზღუდული ნაწილი.
ჩვენ მოვაგვარეთ ეს. მოდით გადავიდეთ სტილის აღწერაზე.
ყუთი (
overflow:დამალული;
სიგანე: 250px;
სიმაღლე: 250 px;
}
ყველაფერი ისეა, როგორც ნათქვამია - კვადრატული ბლოკები, ზომით მსგავსი სტანდარტული, არ არის გადიდებული გამოსახულება, შემდეგ ასევე 250 250-ზე.
overflow:hidden თვისება, როგორც უკვე აღვნიშნეთ, არ აძლევს მას საშუალებას გასცდეს ბლოკის საზღვრებს მასშტაბის გადიდებისას.
სურათებთან დაკავშირებული თვისებები:
ყუთი img (
-moz-გარდამავალი: ყველა 1s ease-out;
-o-გარდამავალი: ყველა 1s ease-out;
-webkit-transition: all 1s ease-out;
გარდამავალი: ყველა 1-ის გამარტივება;
}
ყუთი img: hover(
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-ტრანსფორმა: მასშტაბი(1.2);
ტრანსფორმაცია: მასშტაბი (1.2);
}
ამის გაკეთება არ არსებობს CSS3-ის გარეშე. ყველა თანამედროვე ბრაუზერებინაჩვენები იქნება ანიმაცია. თქვენ გჭირდებათ გადასვლის და გარდაქმნის პარამეტრები. ანიმაციის დრო დავაყენეთ 1 წამზე (1წმ). ზრდა იქნება 1,2-ჯერ. თქვენ შეგიძლიათ შეცვალოთ იგი თქვენი გემოვნებით.
ახლა მაგალითად მუშაობა!
რა თქმა უნდა, სურათების გადიდების მრავალი გზა არსებობს. და ძირითადად გამოიყენება სკრიპტებისა და დანამატების გამოყენება. ჩემი აზრით, ასეთი მეთოდები გამართლებულია რესურსების შემთხვევაში დიდი რაოდენობით ფოტოებით ან ნებისმიერი სურათით. ჩემი ბლოგი ასეთი არ არის. და, ჩვეულებისამებრ, მივყვები ჩემს საიტზე დროის, ცოდნისა და რესურსების ნაკლებ ხარჯვის გზას.
მე გთავაზობთ ვებსაიტზე სურათების გადიდების გზას ყოველგვარი სკრიპტის გამოყენების გარეშე, მაგრამ ექსკლუზიურად html-ის გამოყენებით.
ვებსაიტზე გამოსახულების გადიდების ეს მეთოდი მკითხველს საშუალებას მისცემს სწრაფად ნახოს სურათი, რადგან თქვენს ვებსაიტს არ დასჭირდება სკრიპტების დამატებით ჩატვირთვა.
სურათის გაფართოება საიტზე
მეთოდი 1 – გაადიდეთ გამოსახულება საიტზე კურსორის დაჭერისას
ძალიან მარტივია, კარგად უმარტივესი გზაპატიოსნად. სურათის თვისებებს უნდა დაამატოთ შემდეგი კოდი:
Onmouseover="this.style.width="სურათის დიდი სიგანე px"" onmouseout="this.style.width="სურათის მცირე სიგანე px""
როდესაც მაუსის კურსორს ატარებთ, სურათი იზრდება.
იმედი მაქვს გესმით, რომ ეს ყველაფერი კეთდება ტექსტის რედაქტორში.
მეთოდი 2 – გაადიდეთ საიტის სურათი მაუსის დაჭერით
მეთოდი მსგავსია, თქვენ უბრალოდ უნდა შეცვალოთ onmouseover onclick-ით. სურათის თვისებებს ემატება შემდეგი კოდი:
Style="width: "მცირე სურათის სიგანის მნიშვნელობა px; border:2px solid black;" onclick="this.style.width=სურათის დიდი სიგანე px"" onmouseout="this.style.width="სურათის მცირე სიგანე px""
მთლიანად ასე გამოიყურება
აქ არის შედეგი და კოდი პუსის სურათისთვის.
მაუსის დაჭერისას სურათი გადიდდება ორიგინალური სურათის ზომამდე ან თქვენ მიერ მითითებულ ზომამდე. ზომის შესამცირებლად, ანუ დააბრუნეთ სურათი თავდაპირველ ზომაზე, უბრალოდ დააწკაპუნეთ გვერდზე ნებისმიერ ადგილას.
იმედი მაქვს, რომ არ გაგიჭირდათ მსგავსი მეთოდების გამოყენება - html-ის გამოყენებით - სურათების გასადიდებლად საიტზე.
ზოგადად, მე მჯერა, რომ ბევრი ვებმასტერი არ შემოიფარგლება მხოლოდ ნებისმიერი ძრავის გამოყენებით და იყენებს html კოდებს მათ საიტებზე.
ასევე წაიკითხეთ:
2015-10-27T16:07:59+00:00 იმედისკრიპტები და კოდები საიტის სურათის გადიდება, საიტის სურათის გადიდებარა თქმა უნდა, სურათების გადიდების მრავალი გზა არსებობს. და ძირითადად გამოიყენება სკრიპტებისა და დანამატების გამოყენება. ჩემი აზრით, ასეთი მეთოდები გამართლებულია რესურსების შემთხვევაში დიდი რაოდენობით ფოტოებით ან ნებისმიერი სურათით. ჩემი ბლოგი ასეთი არ არის. და, ჩვეულებისამებრ, მივყვები ჩემს საიტზე დროის, ცოდნისა და რესურსების ნაკლებ ხარჯვის გზას. მე გთავაზობთ გაზრდის საშუალებას...
ნადეჟდა ტროფიმოვა [ელფოსტა დაცულია]ადმინისტრატორის ბლოგის საიტითქვენ ასევე შეიძლება დაგაინტერესოთ:
ჩვენ ამოვიღებთ მთავარი გვერდიდა RSS ჩანაწერები კატეგორიაში
ჩვენ ვაგრძელებთ ფუნქციონირების გაუმჯობესებას და გარეგნობასაიტი. ჩვენ ვხსნით არასაჭირო პოსტებს მთავარი გვერდიდან და RSS-დან.
პურის ნამსხვრევები wordpress-ის ვებსაიტზე
Breadcrumbs ვებგვერდზე - რა არის ისინი და როგორ გავაკეთოთ ისინი?
როგორ შევქმნათ ტექსტის ჩრდილი 5 წუთში
გამარჯობა, ჩემი ბლოგის ძვირფასო მკითხველო. ამ სტატიაში თქვენ შეისწავლით როგორ შექმნათ 5 წუთში css სტილის გამოყენებით და html კოდიტექსტის ჩრდილი.
როგორ გააკეთოთ ჩამოტვირთვის ღილაკი css კოდის გამოყენებით
გამარჯობა, ჩემი ბლოგის ძვირფასო მკითხველო. ვაგრძელებ ღილაკების თემას. ამ სტატიაში ვისაუბრებთ იმაზე, თუ როგორ უნდა გააკეთოთ ჩამოტვირთვის ღილაკი css კოდის გამოყენებით.
როგორ შევადგინოთ ღილაკები ვებსაიტისთვის
გამარჯობა ძვირფასო მკითხველებო. დავფიქრდი, დავფიქრდი და გადავწყვიტე დამეწერა სტატია, თუ როგორ ლამაზად გავადიდოთ ფოტოები, როცა მაუსის ზემოდან ატარებთ.
ჩემს სიხარულს საზღვარი არ ჰქონდა და არა იმიტომ საინტერესო თვისება, და არა იმიტომ, რომ ბავშვობა ერთ ადგილას თამაშობს :) მინდა ვთქვა, რომ ასეთ ეფექტს არ ველოდი.
მე ვარ ახალი ბლოგერი, ახალგაზრდა, დამწყები. საოფისე პროგრამებიმე პრაქტიკულად არ ვიცოდი მისი გამოყენება, რომ აღარაფერი ვთქვათ Photoshop. ბლოგი შევქმენი, მაგრამ აღმოჩნდა, რომ ქვემოდან უნდა მესწავლა. ჩაიდანი ჩაიდანით. ყველაფერი რაც მე ვიცოდი იყო სკრინშოტის გადაღება Paint-ში.
შემიძლია ვთქვა, რომ შეუძლებელი იყო ჩემი სკრინშოტების ცრემლების გარეშე ყურება. მაგრამ მოულოდნელად, როდესაც ექსპერიმენტი ჩავატარე და გაჯეტი დავამატე ბლოგს, ჩემმა ფოტოებმა დაიწყეს თამაში, ბრწყინავს, კაშკაშა ფერებით ანათებდნენ, ისინი თითქოს გაცოცხლდნენ და დაიწყეს სხვა ახალი ცხოვრება, მათ დაემატა კონტრასტი.
ბლოგზე ყველა სურათს ექნება გლუვი მასშტაბირების ეფექტი. სურათები არ იზრდება მთელი ეკრანის შესავსებად, მაგრამ შეუფერხებლად სრიალებს გარეთ და ცოცხლდება. რეალური 3D ეფექტი.
როგორ დააინსტალიროთ გაჯეტი „სურათის გლუვი მასშტაბირება ჰოვერზე“ Blogger-ში
გამოსახულების გლუვი მასშტაბირება მაუსის კურსორის დაჭერისასკოდი ინსტალირებულია როგორც ჩვეულებრივი HTML/JavaScript გაჯეტი ყველგან. თქვენ შეგიძლიათ წაიკითხოთ სტატია "" ჩემს ბლოგზე.
ახლა საჭიროა ჰოვერზე სურათების ლამაზი გაფართოება. და არა JS! მაგრამ ძველი ბრაუზერების მომხმარებლები ვერაფერს ხედავენ. ემსახურება მათ სწორად.
ინტერნეტში ვერ ვიპოვე სრული არაფერი, ან პოზიცია: გამოყენებულია აბსოლუტური, ან შინაარსი შორდება, რაც გზას უთმობს სურათს, რაც ყოველთვის არ არის მისაღები.
ასე რომ, დავიწყოთ. ყველაფერი რაც თქვენ უნდა მიუთითოთ არის სურათის კლასის დაყენება. ჩვენ დავაყენებთ, როგორც ყოველთვის, ცალ-ცალკე მარცხნივ, ცალკე მარჯვნივ და ცალ-ცალკე ცენტრისთვის. ეს გამოწვეულია გამოსახულების გაფართოების თავისებურებით. ყოველივე ამის შემდეგ, თუ სურათი მარცხნივ არის, გადიდებისას ის მარჯვნივ უნდა გადავიდეს, წინააღმდეგ შემთხვევაში პატარა მონიტორებზე სურათი ბრაუზერის გარეთ გაცურდება.
HTML კოდი მარცხნივ გამოსახული სურათისთვის (სურათი გადიდებულია, გადაიტანეთ მაუსი სურათზე):
და პატარა CSS, სადაც ჩვენ მივუთითებთ მინიატურების ზომას, მდებარეობას (მარცხნივ), შეფუთვას და ასევე გამოსახულების გაფართოებას ჰოვერირებისას:
img .img.left ( float: მარცხენა ; ზღვარი: 5px 15px 5px 0 ; max-სიმაღლე: 320px ; max-width: 320px ; ) img .img.left :hover( transform: scale (2 ) translate, 30x გარდამავალი: ყველა 3 წრფივი 0 )
თითქმის იგივეა სურათებზე მარჯვნივ
და CSS განსხვავდება მხოლოდ ესკიზის პოზიციით (მარჯვნივ) და მარცხნივ გადაადგილებით, მასშტაბირებისას:
img .img.right ( float: right ; ზღვარი: 5px 0 5px 15px ; max-height: 320px ; max-width: 320px ; ) img .img.right :hover(transform: scale (2) translate,-69px გარდამავალი: ყველა 3 წრფივი 0 )
ახლა აჩვენეთ მინიატურა ცენტრისთვის:
img .img.center ( ზღვარი: 5 პიქსელი ავტო ; ეკრანი: ბლოკი ; მაქსიმალური სიმაღლე: 320 პიქსელი ; მაქსიმალური სიგანე: 320 პიქსელი ; ) img .img.center :hover ( ტრანსფორმაცია: მასშტაბი (2 ); გარდამავალი: ყველა 0 . 3წმ წრფივი 0 .3 წმ ;
მოდით შევაჯამოთ CSS და დავამატოთ სილამაზე:
img .img.left ( float: მარცხენა ; ზღვარი: 5px 15px 5px 0 ; ) img .img.right ( float: right ; margin: 5px 0 5px 15px ; ) img .img.center ( margin: 5px auto ; ) img .img (მაქს-სიმაღლე: 320 პიქსელი; მაქს-სიგანე: 320 პიქსელი; გარდამავალი: ყველა 0 . 3 წმ წრფივი 0s; z-ინდექსი: 1; საზღვარი: 1px მყარი #EEE; ფონი: #FFFFFF; padding: 5px); img .img :hover (კურსორი: მაჩვენებელი ; box-shadow: 0 0 5px 5px #eee ; საზღვარი: 1px მყარი #25A0E3 ; z-index: 10 ; გარდამავალი: ყველა 0 . 3s წრფივი 0 . 3s ; ) img .img. მარცხენა :hover( transform: scale (2) translate (88px, 30px); ) img .img.right :hover(transform: scale (2) translate (-88px, 30px); ) img .img.center :hover (transform :scale(2);
სურათის მასშტაბირება 0,3 წამით დავაგვიანე. ისე, რომ სურათზე მაუსის გადაადგილებისას ის არ გაიზარდოს.
ვებსაიტზე გამოსახულების გადიდების მრავალი გზა არსებობს. ჩვენ განვიხილავთ სურათების გადიდების რამდენიმე გზას დამატებითი სკრიპტების გამოყენების გარეშე, მხოლოდ html და CSS გამოყენებით.
ასეთი მეთოდები საშუალებას გაძლევთ სწრაფად ნახოთ ორიგინალი, რადგან სკრიპტების დამატებითი ჩატვირთვა არ არის, თუმცა, თუ გსურთ ორიგინალური სურათების გახსნა სკრიპტების გამოყენებით ლამაზი ეფექტებით, ან შექმნათ გალერეა, გირჩევთ ყურადღება მიაქციოთ შემდეგ სტატიებს:
ლირიკული გადახვევა გავაკეთე, დავიწყოთ.
სურათის გაფართოება საიტზე
უპირატესობა ის არის, რომ თქვენ არ გჭირდებათ ორიგინალური გამოსახულების ცალკე მინიატურების გაკეთება. აქ მხოლოდ ერთი სურათია ჩართული
ადიდებს სურათს საიტზე კურსორზე გადაადგილებისას
პირველი და უმარტივესი გზა გაადიდეთ სურათი საიტზე, არის შემდეგი კოდის დამატება image თვისებას img ტეგებს შორის:
onmouseover="this.style.width="ორიგინალური სურათის სიგანე px-ში (ან ავტო)"" onmouseout="this.style.width="შემცირებული სურათის სიგანე px-ში""
ანუ, როდესაც კურსორს ერთხელ დააჭერთ, სურათი უფრო დიდი გახდება.
სრული კოდი:
და ბოლო არის ულამაზესი გზა ჰოვერის გამოყენებით მასშტაბის გასადიდებლად. აქ ჩვენ დავამატებთ ჩარჩოს და აღწერას დიდ სურათს.
კოდი:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
  სურათის აღწერა. |
სურათის აღწერა.
საიტის სურათის გადიდება დაწკაპუნებით
სურათის გასადიდებლად დააწკაპუნეთ მეთოდი მსგავსია პირველივე Hover-to-zoom მეთოდის, მაგრამ onmouseover-ის ნაცვლად ჩვენ გამოვიყენებთ onclick-ს.
შედეგი:
როგორც ხედავთ, აქ გამოსახულების გასადიდებლად საჭიროა დააწკაპუნოთ მასზე და თუ კურსორს ამოიღებთ, ის ავტომატურად შემცირდება.
შემდეგ ვერსიაში გაადიდეთ სურათი საიტზედაწკაპუნებით ჩვენ გამოვიყენებთ:
აქ გამოსახულების შესამცირებლად, ანუ პირვანდელ ზომაზე დასაბრუნებლად, თქვენ უნდა დააჭიროთ ნებისმიერ ადგილას ვებ გვერდზე.
შედეგი:
გამოსაყენებელი კიდევ ერთი ვარიანტია სურათის გადიდება ტექსტის თავზე დაწკაპუნებით. აქ ჩვენ ვიყენებთ შემდეგ კოდს:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
|
ჩვენ განვიხილეთ რამდენიმე ვარიანტი გაადიდეთ სურათი საიტზე: მარტივიდან ოდნავ უფრო რთულამდე html-ის გამოყენებითდა . გამოიყენეთ რომელიმე მათგანი თქვენს ვებსაიტებზე დამატებითი სკრიპტების გარეშე.