几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 489 JAVASCRIPT 鼠标
Javascript脚本特效示例：[5]图形左右晃动
来源：互联网
2023-03-17 00:48:02 377
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
工具/原料
- txt文本文档或者 HTML文档/
方法/步骤
在桌机上新建文本文档，命名为晓博JavaScript特效测试.txt，在文本文档里中入HTML文档的基本元素如下，并保存。
html>
head>
title>晓博JavaScript特效测试/title>
/head>
body>
div id="zy">
div id="login">/div>
div id="daohang">
ul>
li>a href="index.html">首页/a>/li>
li>a href="jianjie.html">七夕简介/a>/li>
li>a href="#">七夕节传说/a>/li>
li>a href="#">七夕节习俗/a>/li>
li>a href="#">诗词& 歌谣/a>/li>
li>a href="#">七夕节寄语/a>/li>
/ul>
/div>
/div>
/body>
/html>
![Javascript脚本特效示例：[5]图形左右晃动](https://exp-picture.cdn.bcebos.com/f385f29959430401873adcf1d66b04d148290518.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[5]图形左右晃动](https://exp-picture.cdn.bcebos.com/1f03436b04d149294e4cfba063e5eceeacbc7e18.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
第一步:把如下代码加入head>区域中
SCRIPT LANGUAGE="JavaScript">
!--
step = 0;
obj = new Image();
function anim(xp,xk,smer) //smer = direction
{
obj.style.left = x;
x = step*smer;
if (x>=(xk xp)/2) {
if (smer == 1) step--;
else step ;
}
else {
if (smer == 1) step ;
else step--;
}
if (x >= xk) {
x = xk;
smer = -1;
}
if (x = xp) {
x = xp;
smer = 1;
}
// if (smer > 2) smer = 3;
setTimeout('anim(' xp ',' xk ',' smer ')', 50);
}
function moveLR(objID,movingarea_width,c)
{
if (navigator.appName=="Netscape") window_width = window.innerWidth;
else window_width = document.body.offsetWidth;
obj = document.images[objID];
image_width = obj.width;
x1 = obj.style.left;
x = Number(x1.substring(0,x1.length-2)); // 30px -> 30
if (c == 0) {
if (movingarea_width == 0) {
right_margin = window_width - image_width;
anim(x,right_margin,1);
}
else {
right_margin = x movingarea_width - image_width;
if (movingarea_width x image_width) window.alert("No space for moving!");
else anim(x,right_margin,1);
}
}
else {
if (movingarea_width == 0) right_margin = window_width - image_width;
else {
x = Math.round((window_width-movingarea_width)/2);
right_margin = Math.round((window_width movingarea_width)/2)-image_width;
}
anim(x,right_margin,1);
}
}
//-->
/SCRIPT>
第二步:在body>区域加入如下代码，并重名文档为HTML文件
img src="1.png" width=205 height=56 name="picture" style='position: absolute; top: 10px; left: 30px;' BORDER=0>
SCRIPT LANGUAGE="JavaScript">
!--
setTimeout("moveLR('picture',300,1)",10);
//-->
/SCRIPT>
注意，图片文件一定要和你做的网页一个文件路径下，src="1.png" 这句是文件的路径，可以改为绝对路径
![Javascript脚本特效示例：[5]图形左右晃动](https://exp-picture.cdn.bcebos.com/9bc92713e8e5ecee75787c9ccc704618deda7a18.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
用IE浏览器打开晓博JavaScript特效测试.html文件，可以看到图形左右晃动脚本特效，如下图
![Javascript脚本特效示例：[5]图形左右晃动](https://exp-picture.cdn.bcebos.com/46315818dfdae43be542c092c457935652bb7418.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[5]图形左右晃动](https://exp-picture.cdn.bcebos.com/4e168d5653bbf820803f54b8ba21056105a36e18.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[5]图形左右晃动](https://exp-picture.cdn.bcebos.com/30601b6104a355e9696a2a64d22ae3efe1786818.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
注意事项
注意，图片文件一定要和你做的网页一个文件路径下，src="1.png" 这句是文件的路径，可以改为绝对路径
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JAVASCRIPT
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 216 JAVASCRIPT
- 详细阅读