Home: http://www.maxss.netemail: Maxss.net@163.com
Everyone uses the timeline function in Dreamweaver or to make a very interesting animation effect, Dreamweaver will automatically generate a specific program code for the user. Do you want to achieve the achievement of animation? In fact, the principle is very simple, mainly using a timer function, below I demonstrate a simple animation production process, through the introduction, everyone can raise an anti-three, make more very dazzling animation effects. My personal homepage V3 animation effect is all written in JavaScript. The effect of this instance is to click the "Start Move" button on the web page, then the specified layer will move from left to right, during which you click the "Stop Move" button will stop moving.
javascript motion sample </ title></p>
<p><script language = "javascript"></p>
<p>Var movingid = null;</p>
<p>Var scrolling = false;</p>
<p>Function startmove ()</p>
<p>{</p>
<p>Var Left = evAl (Div1.Style.Left.Replace ("PX", ""));</p>
<p>IF (Left <Document.Body.ScrollWidth - 150)</p>
<p>Div1.Style.Left = Left 1;</p>
<p>Else</p>
<p>Div1.Style.Left = 10;</p>
<p>Movingid = setTimeout ("StartMove ()", 10);</p>
<p>}</p>
<p>Function stopmove ()</p>
<p>{</p>
<p>Cleartimeout (MovingID);</p>
<p>}</p>
<p></ script></p>
<p></ hEAD></p>
<p><body></p>
<p><div id = "Div1" style = "Visibility: Visible; Position: absolute; left: 10; Top: 10; Z-Index: 1;"</p>
<p><table bgcolor = "# fffcc" border = "1" cellpadding = "0" cellspacing = "0"></p>
<p><tr></p>
<p><TD> i can moving ... </ td></p>
<p></ TR></p>
<p></ table></p>
<p></ div></p>
<p><br> <br></p>
<p><Input Type = "Button" Value = "Start Mobile" Onclick = "Startmove ()"></p>
<p><Input Type = "Button" Value = "stop moving" onclick = "stopmove ()>></p>
<p></ body></p>
<p></ html></p>
<p>Here mainly uses a settimeout function, which is: the parameter format of this function is:</p>
<p>The first parameter "function" is called the function name called, the second parameter "interval" is a timeout value, in microseconds.</p>
<p>Note that if you want to stop this timer, you must save the return value after calling this setTimeout () function, and cancel the timer via the Cleartimeout function.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-2180.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="2180" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.036</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = '_2FmtuqDX_2B2kBzlD1ZG_2BjI_2F76Op6zuoj4Aq9BJJ0pBkflJ3DC76JMGH9WAxlpwT1XRbTDVqlckgkPq6yIqQncRYw_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
