مدونة ديما هنا مدونة عربية لتبادل الأفكار فى مجال الويب و التجارة الإلكترونية
اضافة ثأثير Jquery جميل جدا على الصور في المدونة
في هذه التدوينة سأقوم بشرح كيفية اضافة تأثير jquery رائع على الصور في مدونتك تتمثل هذه الاضافة في تأثير دائري على الصور يمكنك استعمال هذه الاضافة على صور المدونة ومع جميع أحجام الصور واضافتها سهلة جدا فقط اتبع الخطوات التالية .
1) قم بالدخول الى لوحة تحكم المدونة
2) قم بالضغط على Layout
3) اختر اضافة HTML/Javascript
4) ألصق هذا الكود
<script>
$(function() {
var tot = $(“.img_c”).length;
var stat = deg = 10;
var rotate = “”;
var frame, mozframe, webkitframe;
$(“img”).each(function(index) {
$(this).css({
“transform”: “rotate(“+deg+”deg)”,
“-moz-transform”: “rotate(“+deg+”deg)”,
“-webkit-transform”: “rotate(“+deg+”deg)”,
“-o-transform”: “rotate(“+deg+”deg)”
});
rotate = “100% {” +
“transform: rotate(360deg);” +
“-moz-transform: rotate(360deg);” +
“-webkit-transform: rotate(360deg);” +
“-o-transform: rotate(360deg);” +
“} “;
var imgclass = parseInt(index+1);
frame = ” @keyframe anim” + imgclass + ” { ” +
rotate + “}”;
mozframe = ” @-moz-keyframes anim” + imgclass + ” { ” +
rotate + “}”;
webkitframe = ” @-webkit-keyframes anim” + imgclass + ” { ” +
rotate + “}”;
$(‘<style> ‘+ frame + mozframe + webkitframe +
‘ .img’+imgclass+’ { animation: anim’+imgclass+’ 3s ease 0s infinite alternate;’ +
‘-moz-animation: anim’+imgclass+’ 3s ease 0s infinite alternate;’ +
‘-webkit-animation: anim’+imgclass+’ 3s ease 0s infinite alternate; }’
+'</style>’).appendTo(‘head’);
deg = deg + stat;
});
});
</script>
<style>
body {
background: #fff url(‘wood_pattern.png’) repeat top right;
}
.content {
margin: 0 auto;
padding: 100px;
}
img {
margin: 10px;
padding: 20px;
background: #fff;
-moz-box-shadow: 0px 0px 3px #d3d3d3;
-webkit-box-shadow: 0px 0px 3px #d3d3d3;
box-shadow: 0px 0px 3px #000000;
position: absolute;
}
</style>
<br />
<div>
<div>
<img src=”http://3.bp.blogspot.com/-1NxAOtbB_S0/UJVEjzMZyEI/AAAAAAAAFjQ/lctChiBBuAs/s1600/nature.jpg” /></div>
<div>
<img src=”http://3.bp.blogspot.com/-1NxAOtbB_S0/UJVEjzMZyEI/AAAAAAAAFjQ/lctChiBBuAs/s1600/nature.jpg” /></div>
<div>
<img src=”http://3.bp.blogspot.com/-1NxAOtbB_S0/UJVEjzMZyEI/AAAAAAAAFjQ/lctChiBBuAs/s1600/nature.jpg” /></div>
<div>
<img src=”http://3.bp.blogspot.com/-1NxAOtbB_S0/UJVEjzMZyEI/AAAAAAAAFjQ/lctChiBBuAs/s1600/nature.jpg” /></div>
<div>
<img src=”http://3.bp.blogspot.com/-1NxAOtbB_S0/UJVEjzMZyEI/AAAAAAAAFjQ/lctChiBBuAs/s1600/nature.jpg” /></div>
<div>
<img src=”http://3.bp.blogspot.com/-1NxAOtbB_S0/UJVEjzMZyEI/AAAAAAAAFjQ/lctChiBBuAs/s1600/nature.jpg” /></div>
<div>
<img src=”http://3.bp.blogspot.com/-1NxAOtbB_S0/UJVEjzMZyEI/AAAAAAAAFjQ/lctChiBBuAs/s1600/nature.jpg” /></div>
<div>
<img src=”http://3.bp.blogspot.com/-1NxAOtbB_S0/UJVEjzMZyEI/AAAAAAAAFjQ/lctChiBBuAs/s1600/nature.jpg” /></div>
<div>
<img src=”http://3.bp.blogspot.com/-1NxAOtbB_S0/UJVEjzMZyEI/AAAAAAAAFjQ/lctChiBBuAs/s1600/nature.jpg” /></div>
<div>
<img src=”http://3.bp.blogspot.com/-1NxAOtbB_S0/UJVEjzMZyEI/AAAAAAAAFjQ/lctChiBBuAs/s1600/nature.jpg” /></div>
</div>
لاتنسى تغيير روابط الصور التي بالأحمر الى رابط الصورة التي تريد اضافتها
