HTML中点击图片翻转文字

来源：互联网发布：淘宝网夏季竹凉席坐垫编辑：程序博客网时间：2024/05/15 17:09
<!DOCTYPE html><html><head><script type='text/javascript'  src='http://code.jquery.com/jquery-1.7.1.js'></script><style type='text/css'>.info, .image {  position: absolute;  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;}.info {  padding: 10px;  width: 160px;  height: 160px;  z-index: -2;  -webkit-transform: rotateY(180deg);  background-color: rgba(255, 255, 255, 0.8);}.image {  z-index: -1;  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;  -webkit-transform: rotateY(0deg);}.rotator {  width: 160px;  height: 160px;}.rotator .info {  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;  z-index: -1;  -webkit-transform: rotateY(0deg);}.rotator  .image {  -webkit-transform: rotateY(180deg);  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;;  z-index: -2;}</style><script type='text/javascript'>$(window).load(function(){    $(".cont").click(function(){       $(this).toggleClass("rotator")  ;     })});</script></head><body>  <div class="cont">    <img class="image"      src=<!DOCTYPE html><html><head><script type='text/javascript'  src='http://code.jquery.com/jquery-1.7.1.js'></script><style type='text/css'>.info, .image {  position: absolute;  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;}.info {  padding: 10px;  width: 160px;  height: 160px;  z-index: -2;  -webkit-transform: rotateY(180deg);  background-color: rgba(255, 255, 255, 0.8);}.image {  z-index: -1;  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;  -webkit-transform: rotateY(0deg);}.rotator {  width: 160px;  height: 160px;}.rotator .info {  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;  z-index: -1;  -webkit-transform: rotateY(0deg);}.rotator  .image {  -webkit-transform: rotateY(180deg);  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;;  z-index: -2;}</style><script type='text/javascript'>$(window).load(function(){    $(".cont").click(function(){       $(this).toggleClass("rotator")  ;     })});</script></head><body>  <div class="cont">    <img class="image"      src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%90%9E%E7%AC%91%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=0&spn=0&di=188735733010&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=4288736241%2C1007588047&os=2757452537%2C4175728003&simid=3447087890%2C364510106&adpicid=0&lpn=0&ln=1955&fr=&fmq=1494919720044_R&fm=rs1&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F160929%2F12-160929161S1.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fw_z%26e3Bth8dn_z%26e3Bv54AzdH3FqAzdH3Fqq6tzitAzdH3F2w5xtw5AzdH3Fc8amb_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0">    <div class="info">Click here to flip</div>  </div></body></html>">    <div class="info">点击翻转</div>  </div></body></html>
阅读全文
0 0
HTML中 点击图片翻转文字

HTML中点击图片翻转文字
