English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
لم يتم تحديثه مؤخرًا، لذا سأقوم بدمج بعض التأثيرات لملء الفراغ.
لم يتم تحسين هذا الخطوة بعد.
بالتنسيق الكامل من cssالمزمار:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css هارمونيكا</title>
<style>
.showBox{
العرض: 660px;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
العرض: 30000px;
}
ul li{
float: left;
position: relative;
الارتفاع: 254px;
width: 110px;
overflow: hidden;
transition: all 0.3s;
}
/* هذا هو لب النموذج css هارمونيكا، وهو استخدام hover
**أولاً ul:hover li هذا هو الذي يسبب التغيير عند مرور ul ولكن ليس عند مرور li
**ثم ul li:hover هنا هو التغيير الذي يحدث عند مرور li، التطابق مع تأثيرات الحركة الخاصة بـ css3
و بعض التأثيرات الجمالية الخاصة بـ css3 يمكن أن تجعل من الممكن إنشاء هارمونيكا جميلة جداً
ربما يكون الأمر معقدًا إذا تم تنفيذ ذلك باستخدام JavaScript فقط.
*/
ul:hover li{
width:22px;
}
ul li:hover{
width: 460px;
}
ul li img{
العرض: 550px;
الارتفاع: 254px;
}
ul li span{
العرض: 22px;
position: absolute;
top: 0;
right: 0;
الارتفاع: 204px;
الإرتفاع الأعلى: 50px;
color: #fff;
}
ul li span.bg1{
background: #333;
}
ul li span.bg2{
background: #0f0;
}
ul li span.bg3{
background: #ff7500;
}
ul li span.bg4{
background: #0ff;
}
ul li span.bg5{
background: #00f;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="showBox">
<ul>
<li><span class="bg1">هذا هو الأول</span><img src="1.jpg" alt=""></li>
<li><span class="bg2">هذا الثاني</span><img src="2.jpeg" alt=""></li>
<li><span class="bg3">هذا الثالث</span><img src="3.jpg" alt=""></li>
<li><span class="bg4">هذا الرابع</span><img src="4.jpg" alt=""></li>
<li><span class="bg5">هذا الخامس</span><img src="5.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
css3المزمار:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-checked:</title>
<style>
/* استخدمت خاصية الإشارة في الراديو لتحقيق تأثير المزمار */
ul{
display: none;
}
input{display: none;}
label{display: block; line-height: 40px; border-bottom: 1px solid #ddd; cursor:pointer; font-size: 15px; font-weight: bold;}
.list > ul{display: none; -webkit-transition:all .5s linear; -moz-transition:all .5s linear; -ms-transition:all .5s linear; -o-transition:all .5s linear; transition:all .5s linear;}
#list1:checked + ul{display: block;}
#list2:checked + ul{display: block;}
#list3:checked + ul{display: block;}
#list4:checked + ul{display: block;}
</style>
</head>
<body>
<div> <label for="list1">أصدقائي</label> <input type="radio" name="list" id="list1" checked="chekced"/>
<ul> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> </ul> <label for="list2">أصدقائي</label>
<input type="radio" name="list" id="list2"/>
<ul> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> </ul> <label for="list3">زملائي</label> <input type="radio" name="list" id="list3"/> <ul> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> </ul> <label for="list4">زملائي</label> <input type="radio" name="list" id="list4"/> <ul> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> <li><a href="">اسم الطالب</a></li> </ul> </div>
</body>
</html>
مغنية الحدث بالجافا سكربت:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>مغنية الحدث</title>
<style>
.showBox{
العرض: 660px;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
العرض: 30000px;
}
ul li.active{
العرض: 550px;
}
ul li{
float: left;
position: relative;
الارتفاع: 254px;
العرض: 22px;
overflow: hidden;
}
ul li img{
العرض: 660px;
الارتفاع: 254px;
}
ul li span{
العرض: 22px;
position: absolute;
top: 0;
left: 0;
الارتفاع: 204px;
الإرتفاع الأعلى: 50px;
}
ul li span.bg1{
background: #333;
}
ul li span.bg2{
background: #0f0;
}
ul li span.bg3{
background: #ff7500;
}
ul li span.bg4{
background: #0ff;
}
ul li span.bg5{
background: #00f;
}
</style>
<script type="text/javascript">
window.onload=function ()
{
createAccordion('.showBox');
};
function createAccordion(name)
{
/*获取元素*/
var oDiv=document.querySelector(name);
/*声明最小宽度*/
var iMinWidth=9999999;
/*获取元素*/
var aLi=oDiv.getElementsByTagName('li');
var aSpan=oDiv.getElementsByTagName('span');
/*定时器容器默认*/
oDiv.timer=null;
/*循环添加事件和自定义属性索引值*/
for(vari=0;i<aSpan.length;i++)
{
aSpan[i].index=i;
aSpan[i].onmouseover=function ()
{
gotoImg(oDiv, this.index, iMinWidth);
};
/*获取最小宽度*/
iMinWidth=Math.min(iMinWidth, aLi[i].offsetWidth);
}
};
function gotoImg(oDiv, iIndex, iMinWidth)
{
if(oDiv.timer)
{ /*清除定时器，避免叠加*/
clearInterval(oDiv.timer);
}
/*开启定时器*/
oDiv.timer=setInterval
(
function ()
{
changeWidthInner(oDiv, iIndex, iMinWidth);
}, 30
);
}
/*这里是关键，运动*/
function changeWidthInner(oDiv, iIndex, iMinWidth)
{
var aLi=oDiv.getElementsByTagName('li');
var aSpan=oDiv.getElementsByTagName('span');
/*获取盒子的大小，这个是总宽度*/
var iWidth=oDiv.offsetWidth;
/*缩进去的图片的宽度声明*/
var w=0;
/*�断的声明，为了清除定时器声明*/
var bEnd=true;
/*loop to iterate through each image, to get the extended and shrunk elements*/
for(var i=0;i<aLi.length;i++)
{
/*this is to get the index of the extended element*/
if(i==iIndex)
{
continue;
}
/*here there is no change in the element, so all save the minimum width*/
if(iMinWidth==aLi[i].offsetWidth)
{
/*subtract these widths from the total width, as they are also in the total width*/
iWidth-=iMinWidth;
continue;
}
/*the code below the loop is for the shrunk element*/
/*do not clear the timer, the movement is not yet complete*/
bEnd=false;
/*get the speed, faster at first and then slower*/
speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10);
/*shrink the remaining width*/
w=aLi[i].offsetWidth-speed;
/*to avoid the shrunk element being smaller than the minimum width*/
if(w<=iMinWidth)
{
w=iMinWidth;
}
/*set the width of the shrunk element*/
aLi[i].style.width=w+'px';
/*subtract the width that has been shrunk, the remaining is the width that has been extended*/
iWidth-=w;
}
/*عرض العنصر الممتد*/
aLi[iIndex].style.width=iWidth+'px';
if(bEnd)
{
clearInterval(oDiv.timer);
oDiv.timer=null;
}
}
</script>
</head>
<body>
<div class="showBox">
<ul>
<li class="active"><span class="bg1">هذا الاول</span><img src="1.jpg" alt=""></li>
<li><span class="bg2">هذا الثاني</span><img src="2.jpeg" alt=""></li>
<li><span class="bg3">هذا الثالث</span><img src="3.jpg" alt=""></li>
<li><span class="bg4">هذا الرابع</span><img src="4.jpg" alt=""></li>
<li><span class="bg5">هذا الخامس</span><img src="5.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
接下来的都是会使用到动画效果，既然这样就把封装好运动：
/*使用调用，obj对象，attr属性，speed速度，iTarget想达到的值，fn回调函数*/
/*因为运动基本都是px为单位的，至于透明度是没有单位，所以在这里把它分开了，
其实也没有怎么改，就是判断是不是透明度这个属性，然后走透明度这条线
*/
function doMove(obj,attr,speed,iTarget,fn){
if(attr=="opacity"){
obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100;
}else{
obj.len=iTarget-parseFloat(getStyle(obj,attr));
}
/*这里判断方向，在初始点后的为负数，在初始点前为正数*/
speed=obj.len>0 ? speed : -speed;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(!obj.num){
obj.num=0;
}
if(attr=="opacity"){
obj.num=parseFloat(getStyle(obj,attr))*100+speed;
}else{
obj.num=parseInt(getStyle(obj,attr))+speed;
}
/*这里是判断到了目标点没有，到了就停止定时器*/
if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
obj.num=iTarget;
clearInterval(obj.timer);
}
if(attr=="opacity"){
obj.style[attr]=obj.num/100;
}else{
obj.style[attr]=obj.num+"px";
}
/*因为放在上面无法实现到回调函数的完整作用，出现一些BUG*/
if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
fn && fn();
}
},30);
}
/*获取CSS属性值的，会获取表现出现的值*/
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
التصفح التلقائي:}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>التصفح التلقائي</title>
<!-- هذا هو استدعاء دالة الحركة الم封装ة -->
<script type="text/javascript" src="doMove.js"></script>
<script type="text/javascript">
window.onload=function(){
/*إدخال التشغيل التلقائي للتصفح*/
دالة_السيارات("carousel")
}
دالة_السيارات(name){
مفهوم_الوظائف=مفهوم_الوظائف.getElementById(name);
مفهوم_الوظائف=oScl.querySelector("ul");
مفهوم_الوظائف=aUl.querySelectorAll("li");
مفهوم_الوظائف=مفهوم_الوظائف.getElementById("next");
مفهوم_الوظائف=مفهوم_الوظائف.getElementById("pre");
مفهوم_الوظائف=oScl.querySelectorAll(".index span");
رقم=0;
مفهوم=0;
/*تعيين أعلى مستوى الظل للصورة الأولى*/
aLi[0].style.zIndex=5;
/*تحقق مما إذا كان التباعد الزمني موجودًا أو لا*/
إذا (!oScl.timer) {
oScl.timer=null;
}
/*هذا هو التشغيل التلقائي للتصفح*/
oScl.timer=setInterval(function() {
رقم++;
رقم%=aLi.length;
play();
},2000);
/*إظهار وإخفاء الصفحات السابقة واللاحقة*/
oScl.onmouseover=function() {
/*إيقاف تشغيل التباعد الزمني عند الدخول*/
clearInterval(oScl.timer);
next.style.display="block";
pre.style.display="block";
}
oScl.onmouseout=function() {
next.style.display="none";
pre.style.display="none";
/*إيقاف تشغيل التباعد الزمني عند الخروج*/
oScl.timer=setInterval(function() {
رقم++;
رقم%=aLi.length;
play();
},2000);
}
/*النقر على الصفحات السابقة واللاحقة*/
next.onclick=function() {
رقم++;
رقم%=aLi.length;
play();
}
pre.onclick=function() {
إذا (!aLi[index]) {
index=num;
}
رقم--;
إذا (رقم<0) {
رقم=aLi.length-1;
}
play();
}
/*نقطة الدليل*/
للمستندات (i=0; i<aIndex.length; i++) {
aIndex[i].index=i;
aIndex[i].onmouseover=function(){
num=this.index;
play();
}
}
/*动画执行函数*/
function play(){
/*�断是否是相同触发点，如索引点的两次移入都是相同的，
إذا لم يتم تنفيذ، لتجنب التكرار المتكرر
*/
if(index!=num){
for(var i=0;i<aLi.length;i++){
/*设置全部层级为1*/
aLi[i].style.zIndex=1;
}
/*设置上次轮播过的图的层级为2*/
aLi[index].style.zIndex=2;
aIndex[index].className="";
aIndex[num].className="active";
index=num;
/*设置这次轮播的图透明度为0*/
aLi[num].style.opacity=0;
/*设置这是轮播的图的层级为5*/
aLi[num].style.zIndex=5;
/*运动函数封装，淡出这次的图*/
doMove(aLi[num],"opacity",10,100);
}
}
}
</script>
<style>
a{
text-decoration: none;
color: #555;
}
#carousel{
font-family: "微软雅黑";
position: relative;
width: 800px;
height: 400px;
margin: 0 auto;
}
#carousel ul{
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
#carousel ul li{
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
.imgBox img{
width: 800px;
height: 400px;
}
.btn{
position: absolute;
z-index: 10;
top: 50%;
width: 45px;
height: 62px;
margin-top: -31px;
text-align: center;
line-height: 62px;
font-size: 40px;
background: rgba(0,0,0,0.4);
opacity: alpha(opacity=50);
display: none;
}
#pre{
left: 0;
}
#next{
right: 0;
}
#carousel .index{
position: absolute;
bottom: 10px;
left: 50%;
z-index: 10;
}
#carousel .index span{
width: 15px;
height: 15px;
border-radius: 50%;
background: #87CEFA;
display: inline-block;
box-shadow:1px 1px 6px #4169E1;
}
#carousel .index span.active{
background: #4169E1;
box-shadow:1px 1px 6px #87CEFA inset;
}
</style>
</head>
<body>
<div id="carousel">
<ul class="imgBox">
<li><a href="#"><img src="1.jpg" alt=""></a></li>
<li><a href="#"><img src="2.jpg" alt=""></a></li>
<li><a href="#"><img src="3.jpg" alt=""></a></li>
<li><a href="#"><img src="4.jpg" alt=""></a></li>
<li><a href="#"><img src="5.jpg" alt=""></a></li>
</ul>
<a href="javascript:;" class="btn" id="next">></a>
<a href="javascript:;" class="btn" id="pre"><</a>
<div class="index">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
هذا تم إنشاؤه باستخدام مكتبة: responsiveslides.js
قائم على jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- استيراد مكتبة الجافا سكربت للقسم والمكتبة jQuery -->
<script src="jquery-2.0.3.js"></script>
<script src="responsiveslides.js"></script>
<style>
#banner{
position: relative;
width: 800px;
}
/* خصائص css الافتراضية للقسم */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
/* تم تعديلها، تم تحويلها إلى أزرار نقاط */
ul.rslides_tabs.rslides1_tabs {
position: absolute;
bottom: 10px;
left: 45%;
list-style: none;
z-index: 10;
}
ul.rslides_tabs.rslides1_tabs li{
float: left;
}
ul.rslides_tabs.rslides1_tabs li a{
display: block;
border-radius: 50%;
width: 10px;
height: 10px;
margin-right: 10px;
background: #fff;
}
/* .rslides_here 这个相当于active */
ul.rslides_tabs.rslides1_tabs li.rslides_here a{
background: #004F88;
}
/* 左右按钮的class名 */
.rslides_nav.rslides1_nav{
position: absolute;
top: 50%;
color: #eee;
font-size: 40px;
text-decoration: none;
z-index: 4;
}
.rslides_nav.rslides1_nav.pre{
left: 10px;
}
.rslides_nav.rslides1_nav.next{
right: 10px;
}
.rslides img{
height: 400px;
}
</style>
<script>
$(function() {
$(".rslides").responsiveSlides({
pager: true,
// 默认为false,需要展示时（true）展示索引点，默认为数字12345，去js库里修改就可以了
nav: true, // 展示上一张和下一张的导航
pause: false, // 鼠标移入移出是否停止
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "<", // 修改左右按钮的符号
nextText: ">", // String: Text for the "next" button
"maxwidth":"800px"
});
$(".rslides1_nav").css("display","none");
$("#banner").mouseover(function(){
$(".rslides1_nav").css("display","block");
)
$("#banner").mouseout(function(){
$(".rslides1_nav").css("display","none");
)
});
</script>
</script>
</head>
<body>
<!-- 使用一个div包住它，而那些js添加的标签会直接加载到ul标签后面 -->
<div id="banner">
<ul class="rslides" id="rslides">
<li><img src="111.jpg" alt=""></li>
<li><img src="222.jpg" alt=""></li>
<li><img src="333.jpg" alt=""></li>
<li><img src="444.jpg" alt=""></li>
<li><img src="555.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
图片滑动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片滑动</title>
<style>
.container{
position: relative;
width: 630px;
border: 2px solid #888;
padding: 5px;
}
.c-wrap{
width: 630px;
overflow: hidden;
}
.container img{
width: 200px;
height: 90px;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
}
.container ul li{
float: left;
margin-right: 10px;
}
.container .imgBigBox{
width: 33000px;
margin-left: 0px;
}
.imgBigBox:after{
content: " ";
display: block;
clear: both;
}
.btnGroup{
border: 1px solid #888;
width: 65px;
}
.btnGroup a{
text-align: center;
line-height: 20px;
text-decoration: none;
color: #888;
font-size: 20px;
display: inline-block;
width: 30px;
}
.btn1{
margin-right: 4px;
border-right: 1px solid #888;
}
</style>
/*استدعاء وظيفة الحركة*/
<script type="text/javascript" src="doMove.js"></script>
<script type="text/javascript">
window.onload=function(){
/*تطبيق الدالة التمرير*/
slide(".container");
}
function slide(name){
var oContainer=document.querySelector(name);
var oImgBigBox=oContainer.querySelector(".imgBigBox");
var aBtn=oContainer.querySelectorAll(".btnGroup a");
var oC_wrap=oContainer.querySelector(".c-wrap");
/*الحصول على عرض التمرير*/
var w=oC_wrap.offsetWidth;
/*ضغط على الزر الأيسر*/
aBtn[0].onclick=function(){
doMove(oImgBigBox,"marginLeft",10,-w,function(){
var child=oImgBigBox.children[0].cloneNode(true);
oImgBigBox.appendChild(child);
oImgBigBox.removeChild(oImgBigBox.children[0]);
oImgBigBox.style.marginLeft="0px";
)
}
/*ضغط على الزر الأيمن*/
aBtn[1].onclick=function(){
oImgBigBox.insertBefore(oImgBigBox.children[1],oImgBigBox.children[0]);
oImgBigBox.style.marginLeft=-w+"px";
doMove(oImgBigBox,"marginLeft",10,0)
}
}
</script>
</head>
<body>
<div class="container">
<div class="c-wrap">
<div class="imgBigBox">
<ul class="imgBox">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
<ul class="imgBox">
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="btnGroup">
<a href="javascript:;" class="btn1"><</a><a href="javascript:;" class="btn2">></a>
</div>
</div>
</body>
</html>
هذا هو نهاية محتويات هذا المقال، نأمل أن تكون قد ساعدتكم في التعلم، ونأمل أن تدعموا تعليمات النطق بقدر الإمكان.
البيان: محتويات هذا المقال تم جمعها من الإنترنت، وتعود حقوق الملكية إلى المالك الأصلي، تم جمع المحتويات بواسطة المستخدمين عبر الإنترنت وتحميلها بشكل مستقل، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل أي مسؤولية قانونية. إذا اكتشفت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على الادعاء، وسيتم حذف المحتوى المزعوم فور التحقق منه.