يشارك هذا المثال تنفيذ رمز JavaScript للتأثير السلس للمرجع. المحتوى المحدد كما يلي]
صورة التكاثر:
رمز التنفيذ:
<! doctype html> <html> <head> <meta charset = "gb2312" /> <title> zzzz </itlem> <style> *{margin: 0 ؛ الحشو: 0 ؛ } body {width: 1000px ؛ الهامش: 100px Auto ؛ خلفية اللون: #fff ؛ } #wrapper {overflow: hidden ؛ العرض: 600 بكسل ؛ الارتفاع: 100px ؛ الموقف: قريب } #wrapper ul {position: absolute ؛ اليسار: 0 ؛ أعلى: 0 ؛ } #wrapper li {float: left ؛ على غرار القائمة: لا شيء ؛ } #wrapper li img {width: 150px ؛ الارتفاع: 100px ؛ الحدود الحدودية: 9px ؛ } الإدخال [type = button] {margin-top: 20px ؛ العرض: 35 بكسل ؛ الارتفاع: 25 بكسل ؛ رفع الخط: 25 بكسل ؛ } </style> <script type = "text/javaScript"> window.onload = function () {var timer = null ؛ var speed = 4 ؛ var od = document.getElementById ("wrapper") ؛ var au = od.getElementSbyTagName ('ul') [0] ؛ var ali = au.getelementsbytagname ('li') ؛ au.innerhtml = au.innerhtml+au.innerhtml ؛ au.style.width = ali [0] .offSetWidth*ali.length+'px' ؛ Timer = setInterval (move ، 30) function move () {if (au.offsetLeft <-au.offSetWidth/2) {au.style.left = '0' ؛ } if (au.offsetLeft> 0) {au.style.left = -aufsetWidth/2+'px' ؛ } au.style.left = au.offsetleft+speed+'px' ؛ } od.onmouseover = function () {clearinterval (timer) ؛ } od.onmouseout = function () {timer = setInterval (move ، 30)} document.getElementById ("btn1"). onClick = function () {speed = -4 ؛ } document.getElementById ("btn2"). onClick = function () {speed = 4 ؛ }} </script> </head> <body> <div id = "wrapper"> <ul> <li> <img src = "img/pic4 src = "img/pic2.jpg"/> </li> <li> <img src = "img/pic1.jpg"/> </li> </ul> </viv> <input type = "button" name = "" id = "btn1" value = "left"/> <button "يمكنك الرجوع إلى الموضوعات التالية للدراسة:
"ملخص تأثير JavaScript Scrolling" ، "ملخص تأثير JQuery" ، "ملخص تأثير JavaScript Carousel"
ما سبق هو كل شيء عن هذا المقال ، وآمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.