这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
应网友要求修改一个图片转移效果 一个比较漂亮的效果,只是在增加图片效果时有些麻烦。今天应网友的要求,对 JS 进行了更改。使大家在对图片添加删除更加容易。在这里主要对以下几点详细说明一下。 var firstnum = 1; var secnum = 2; var tounum=1; 这三个变量分别作用是传入图片 ID 变量。以及保存当前图片 ID 便于操作! 相信大家都会很容易的修改成自己想要的效果 ! 代码如下:
[Ctrl+A 全选 注:
- <style type="text/CSS">
- #mainid{position:absolute;right:5px;top:10px;height:435px;width:650px;overflow:hidden;background:#fff;left:
- 400px;border: 3px solid #666666;} .imgbox{position:absolute; left:35px;
- margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff}
- .moveimgbox{position:absolute; left:700px; margin-top:20px; top:105px;
- z-index:90; width:100px;height:100px;background:#ffffff}
- </style>
- <script>
- var ticked = 0;
- var okayToGo = true;
- var currentCreature = 1;
- var forwardBackward = 1;
- var firstnum = 1;
- var secnum = 2;
- var tounum = 1;
- function moveItem(firstnum, secnum) {
- if (okayToGo && firstnum != secnum) {
- tounum = firstnum;
- document.getElementById("y" + firstnum).style.zIndex = 50 + 10 * forwardBackward;
- document.getElementById("y" + secnum).style.zIndex = 50 + 20 * forwardBackward;
- startTheMove = window.setInterval(function() {
- rightOrLeft(firstnum, secnum)
- },
- 20);
- }
- }
- function rightOrLeft(firstnum, secnum) {
- if (ticked == 1020) {
- window.clearInterval(startTheMove);
- ticked = 0;
- forwardBackward = 1;
- okayToGo = true;
- } else {
- okayToGo = false;
- thisAngle = (Math.PI / 2) * (ticked / 1000);
- document.getElementById("y" + firstnum).style.left = " " + (735 - Math.sin(thisAngle) * 700) + "px";
- document.getElementById("y" + firstnum).style.top = " " + (105 - (forwardBackward * Math.cos(thisAngle) * 55)) + "px";
- document.getElementById("y" + secnum).style.left = " " + (735 - Math.sin(thisAngle + Math.PI / 2) * 700) + "px";
- document.getElementById("y" + secnum).style.top = " " + (105 - (forwardBackward * Math.cos(thisAngle + Math.PI / 2) * 55)) + "px";
- ticked += 20;
- }
- }
- </script>
- <img class="img-responsive" src="http://www.szrgb.net/text/moveimg/images/1.GIF"
- width="129" height="97" data-src="">
- <img class="img-responsive" src="http://www.szrgb.net/text/moveimg/images/2.JPG"
- width="134" height="100" data-src="">
- <img class="img-responsive" src="http://www.szrgb.net/text/moveimg/images/3.JPG"
- width="134" height="100" data-src="">
- <img class="img-responsive" src="http://www.szrgb.net/text/moveimg/images/4.jpg"
- width="101" height="134" data-src="">
- <div align="right">
- <div>
- <img class="img-responsive" src="http://www.szrgb.net/text/moveimg/images/1.GIF"
- data-src="">
- </div>
- <div>
- <img class="img-responsive" src="http://www.szrgb.net/text/moveimg/images/2.JPG"
- width="400" height="300" data-src="">
- </div>
- <div>
- <img class="img-responsive" src="http://www.szrgb.net/text/moveimg/images/3.JPG"
- width="387" height="290" data-src="">
- </div>
- <div>
- <img class="img-responsive" src="http://www.szrgb.net/text/moveimg/images/4.jpg"
- width="281" height="374" data-src="">
- </div>
- </div>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0615/288937.html