易优内容页图片点击变大效果,看本站效果即可

小秋同学 01-18 11:44:24 学习园地
摘要:     大家好,小秋分享一段 易优内容页里面的点击图片放大为全屏的效果,很多做站的时候,我们会发现有的模板文章内容页里面的图片,前台打开的时候 就只有静态一样跟内容一样沉在网页上,有的图片很小,眼睛不好的也很难摘要:     大家好,小秋分享一段 易优内容页里面的点击图片放大为全屏的效果,很多做站的时候,我们会发现有的模板文章内容页里面的图片,前台打开的时候 就只有静态一样跟内容一样沉在网页上,有的图片很小,眼睛不好的也很难

    大家好,小秋分享一段 易优内容页里面的点击图片放大为全屏的效果,很多做站的时候,我们会发现有的模板文章内容页里面的图片,前台打开的时候 就只有静态一样跟内容一样沉在网页上,有的图片很小,眼睛不好的也很难看清图片,我们不仅仅是为了充实网站内容,而是让用户更能的阅读我们网站文章内容,这样网站才能有更好的潜质用户。所以我就简单的分享一段JS 代码。喜欢的自己收藏吧!


JS部分(底部文件footer.htm)


<script>

+function() { 'use strict'


  function Zooming() {

    this._scaleBase = 1.0

    this._target = null // Zoomable target

    this._body = document.body

    this._lastScrollPosition = null

    this._scrollThreshold = 40


    this._handleClick = this._handleClick.bind(this)

    this._handleKeyDown = this._handleKeyDown.bind(this)

    this._handleScroll = this._handleScroll.bind(this)

  }


  Zooming.prototype = {

    init: function() {

      this._body.addEventListener('click', this._handleClick)


      var zoomableImages = document.querySelectorAll('img[data-action="zoom"]')

      for (var i = 0; i < zoomableImages.length; i++) {

        setCursorStyle(zoomableImages[i], 'zoom-in')

      }

    },


    _handleClick: function(event) {

      var target = event.target


      if (!target) return


      if (target.tagName !== 'IMG') this._close()


      if (!target.hasAttribute('data-action')) return


      switch (target.getAttribute('data-action')) {

        case 'zoom':

          this._zoom(target)

          break

        case 'close':

          this._close()

          break

        default:

          break

      }

    },


    _handleKeyDown: function(event) {

      if (event.keyCode === 27) this._close() // Esc

    },


    _handleScroll: function() {

      var scrollTop = window.pageYOffset ||

      (document.documentElement || this._body.parentNode || this._body).scrollTop


      if (this._lastScrollPosition === null) this._lastScrollPosition = scrollTop


      var deltaY = this._lastScrollPosition - scrollTop


      if (Math.abs(deltaY) >= this._scrollThreshold) {

        this._lastScrollPosition = null

        this._close()

      }

    },


    _zoom: function(target) {

      // Avoid zooming multiple times

      if (this._target) return


      this._target = new Zoomable(target)

      this._target.zoomIn()


      document.addEventListener('keydown', this._handleKeyDown)

      document.addEventListener('scroll', this._handleScroll)

    },


    _close: function() {

      if (!this._target) return


      this._target.zoomOut()

      this._target = null


      document.removeEventListener('keydown', this._handleKeyDown)

      document.removeEventListener('scroll', this._handleScroll)

    }

  }


  /**

   * The zoomable image.

   */

  function Zoomable(img) {

    this._scaleBase = 1.0

    this._image = img

    this._src = img.getAttribute('src')

    this._dataOriginal = img.getAttribute('data-original')

    this._overlay = null // An overlay that whites out the body

    this._body = document.body

    this._zoomImage = this._zoomImage.bind(this)

    this._handleTransitionEnd = this._handleTransitionEnd.bind(this)


    this._styles = {

      image: {

        width: '',

        height: '',

        transform: '',

        zoomIn: {

          'position': 'relative',

          'z-index': 666,

          '-webkit-transition': 'all 300ms',

               '-o-transition': 'all 300ms',

                  'transition': 'all 300ms'

        },

        zoomOut: {

          'position': '',

          'z-index': '',

          '-webkit-transition': '',

               '-o-transition': '',

                  'transition': ''

        }

      },

      overlay: {

        'z-index': 233,

        'background': '#fff',

        'position': 'fixed',

        'top': 0,

        'left': 0,

        'right': 0,

        'bottom': 0,

        'filter': 'alpha(opacity=0)',

        'opacity': 0,

        '-webkit-transition': 'opacity 300ms',

             '-o-transition': 'opacity 300ms',

                'transition': 'opacity 300ms'

      }

    }

  }


  Zoomable.prototype = {

    zoomIn: function() {

      var img = new Image()


      img.onload = (function() {

        // If data-orginal is present, set image CSS width and height explicitly

        // so the transformed source image is correctly displayed

        if (this._dataOriginal) {

          // Save the original image width and height styles if present

          this._styles.image.width = this._image.style.width

          this._styles.image.height = this._image.style.height


          var rect = this._image.getBoundingClientRect()


          setStyles(this._image, {

            'width': rect.width + 'px',

            'height': rect.height + 'px'

          })


          // Use data-original as image src

          this._image.setAttribute('src', this._dataOriginal)

        }


        this._calculateZoom()

        this._zoomImage()

      }).bind(this)


      img.src = this._src

    },


    _calculateZoom: function() {

      var rect = this._image.getBoundingClientRect()


      var windowCenter = {

        x: window.innerWidth / 2,

        y: window.innerHeight / 2

      }


      var imgHalfWidth = rect.width / 2

      var imgHalfHeight = rect.height / 2


      var imgCenter = {

        x: rect.left + imgHalfWidth,

        y: rect.top + imgHalfHeight

      }


      // The vector to translate image to the window center

      var translate = {

        x: windowCenter.x - imgCenter.x,

        y: windowCenter.y - imgCenter.y

      }


      // The distance between image edge and window edge

      var distFromImageEdgeToWindowEdge = {

        x: windowCenter.x - imgHalfWidth,

        y: windowCenter.y - imgHalfHeight

      }


      // The additional scale is based on the smaller value of

      // scaling horizontally and scaling vertically

      var scaleHorizontally = distFromImageEdgeToWindowEdge.x / imgHalfWidth

      var scaleVertically = distFromImageEdgeToWindowEdge.y / imgHalfHeight

      var scale = this._scaleBase + Math.min(scaleHorizontally, scaleVertically)


      // Translate the image to window center, then scale the image

      this._styles.image.transform =

        'translate(' + translate.x + 'px,' + translate.y + 'px) ' +

        'scale(' + scale + ',' + scale + ')'

    },


    _zoomImage: function() {

      // Repaint before animating, fix Safari image flickring issue

      this._image.offsetWidth


      setStyles(this._image, this._styles.image.zoomIn)

      this._image.addEventListener('transitionend', this._handleTransitionEnd)


      // Create an overlay, it does not white out at this point

      this._overlay = document.createElement('div')

      setStyles(this._overlay, this._styles.overlay)

      this._body.appendChild(this._overlay)


      // Use setTimeout to apply correct overlay opacity transition when

      // zooming in, otherwise the transition effect won't trigger.

      window.setTimeout((function() {

        // Now whites out the overlay

        setStyles(this._overlay, {

          'filter': "alpha(opacity=100)",

          'opacity': 1

        })

      }).bind(this), 30)


      this._transform()

    },


    zoomOut: function() {

      this._image.addEventListener('transitionend', this._handleTransitionEnd)


      // Remove the overlay

      setStyles(this._overlay, {

        'filter': "alpha(opacity=0)",

        'opacity': 0

      })


      this._styles.image.transform = ''

      this._transform()

    },


    _transform: function() {

      setStyles(this._image, {

        '-webkit-transform': this._styles.image.transform,

        '-ms-transform': this._styles.image.transform,

        'transform': this._styles.image.transform,

      })

    },


    _handleTransitionEnd: function(event) {

      switch (this._image.getAttribute('data-action')) {

        case 'close':

          if (this._dataOriginal) {

            setStyles(this._image, {

              'width': this._styles.width,

              'height': this._styles.height

            })


            // Restore the old image src

            this._image.setAttribute('src', this._src)

          }

          this._body.removeChild(this._overlay)

          setStyles(this._image, this._styles.image.zoomOut)

          setCursorStyle(this._image, 'zoom-in')

          this._image.setAttribute('data-action', 'zoom')

          break

        case 'zoom':

          setCursorStyle(this._image, 'zoom-out')

          this._image.setAttribute('data-action', 'close')

          break

        default:

          break

      }

      this._image.removeEventListener('transitionend', this._handleTransitionEnd)

    }

  }


  function setStyles(element, styles) {

    for (var prop in styles) {

      element.style[prop] = styles[prop]

    }

  }


  function setCursorStyle(element, style) {

    element.style.cursor = style

    element.style.cursor = '-webkit-' + style

    element.style.cursor = '-moz-' + style

  }


  document.addEventListener('DOMContentLoaded', function() {

    new Zooming().init()

  })

}()

</script>


html页  

请在img标签里面增加:


data-action="zoom"    


比如


<img src=""  data-action="zoom"


效果如下:

易优内容页图片点击变大效果,看本站效果即可(图1)



易优程序  JS应用部分:

将以上代码新建一个js文件  记得上面部分头尾去掉<script></script> 

文件保存在 \template\pc\skin\js目录里面



内容页

易优内容页图片点击变大效果,看本站效果即可(图2)

以上全部打开添加

<script type="text/javascript" src="{eyou:global name='web_templets_pc' /}/skin/js/zooming.js"></script>


这段代码在<herd>上面代码</head>中间



但是要打开易优内容编辑器img图片增加我们JS标记的部分方法  请传送门到这个文章:易优内容(百度)编辑器图片img标签里修改alt或者title属性教程


增加以下代码即可


//追加data-action="zoom"属性

                    $altNew = data-action."zoom";

                    $imgstrNew = preg_replace('/data-action(\s*)=(\s*)[\'|\"]('.$imgname.')?[\'|\"]/i', 'data-action="'.$altNew.'"', $imgstrNew);

                    if (!preg_match('/<img(.*?)data-action(\s*)=(\s*)[\'|\"](.*?)[\'|\"](.*?)[\/]?(\s*)>/i', $imgstrNew)) {

                        // 新增alt属性

                        $imgstrNew = str_ireplace('<img', "<img data-action=\"zoom\" ", $imgstrNew);

                    }


如果是懒人或者新手 就直接下载文件吧

本帖含有附件!帮助5.00学币可下载!!

文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/1227.html发布于 01-18 11:44:24
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就施舍一下文章作者

支付宝施舍

微施舍

阅读
分享

发表评论
加载中~