zoukankan      html  css  js  c++  java
  • 在图片上显示左右箭头的翻页代码

    使用JS实现在图片上显示左右箭头的翻页代码,预览效果网址:http://www.keleyi.com/keleyi/phtml/picnext/

    本实例使用了javascript的onmousemove 事件。onmousemove 事件会在鼠标指针移动时发生。

    语法
    onmousemove="SomeJavaScriptCode"
    SomeJavaScriptCode是必需参数。规定该事件发生时执行的 JavaScript。

    下面是核心代码(完整代码请在效果页面查看源代码)
    <script type="text/javascript">
    function KeleyiImgNext(bigimg) {
    var lefturl = "01.html";
    var righturl ="03.html";
    var imgurl = righturl;
    var width = bigimg.width;
    var height = bigimg.height;
    bigimg.onmousedown = bigimg.onmousemove = function () {
    if (event.offsetX < width / 2) {
    imgurl = lefturl;
    if (imgurl != "#")
    bigimg.style.cursor = 'url(images/arr_left.cur),auto';
    else
    bigimg.style.cursor = 'default';
    } else {
    imgurl = righturl;
    if (imgurl != '#')
    bigimg.style.cursor = 'url(images/arr_right.cur),auto';
    else
    bigimg.style.cursor = 'default';

    }
    }
    bigimg.onmouseup = function () {
    if (imgurl != '#')
    top.location = imgurl;
    }
    }
    </script>
    <img onmouseover="KeleyiImgNext(this)" src="http://www.keleyi.com/keleyi/phtml/picnext/images/k02.jpg" alt="keleyi" />


    本文转载自柯乐义http://www.keleyi.com/a/bjac/a6e756c811719fff.htm

  • 相关阅读:
    关于asp.netCore3.0区域和路由配置
    用Autofac替换.net core 内置容器
    C#Assembly详解
    MongoDB
    Python
    Python,正则表达式
    Python
    Python
    Gevent和猴子补丁
    Django
  • 原文地址:https://www.cnblogs.com/jihua/p/2941613.html
Copyright © 2011-2022 走看看