手機版 | 登陸 | 注冊 | 留言 | 設首頁 | 加收藏
當前位置: 網站首頁 > 建站教程 > 織夢教程 > 文章 當前位置: 織夢教程 > 文章

織夢文章頁實現圖片點擊放大特效的實現方法

時間:2020-03-10    點擊: 次    來源:網絡    作者:佚名 - 小 + 大

瀏覽有的網站文章的時候,發現圖文中的圖片是可以點擊放大的,這樣可以更清楚的看圖片的內容,對用戶體驗很好。

 

首先引入jquery及 lighter js你可以下載換成最新的版本,可以到他們的官網下載或者下載余斗準備好的附件:

jquery.lighter.zip

然后我們需要修改文章頁模板中的調用語句:{dede:field.body}

修改后的代碼,沒什么技術含量就是正則替換在img圖片前面加一個超鏈接 ,其中可以修改成任意的你自己的代碼,其實a中還可以加入兩個參數:data-height="720" 以及data-width="1280"兩個,至于這兩個的效果可以到官方去看,網址:http://ksylvest.github.io/jquery-lighter/

{dede:field.body runphp="yes"}

$a = @me;$a = preg_replace('/<s*imgs+[^>]*?srcs*=s*('|")(.*?)[^>]*?/?s*>/i','<a data-lighter="″ href="″><img src="″> </a>',$a);@me = $a;

{/dede:field.body}

經過上面的修改后就可以實現效果了,如果想實現第一個圖片中的小圖片在左邊然后點擊放大圖片的效果,只需要在你的css代碼中插入:

.content .bdimg{display: block;float: left;margin-right: 3.57866%;width: 22.316%; }

国产视频app .content .bdimg:last-child {margin-right: 0; }

国产视频app .content .bdimg img {width: 100%; }

就可以了, 其中content及bdimg換成你自己的。如果還想實現上一幅圖片下一幅圖片,建議到官網研究看下。

上一篇:織夢dedecms手機搜索跳轉到手機搜索模板教程

下一篇:織夢搜索頁結果中去掉欄目名稱的中括號

 |   QQ:292823885  |  地址:北京市東城區  |  郵箱:servcra@vip.qq.com  |